@scalar/api-client
Version:
the open source API testing client
112 lines (111 loc) • 3.77 kB
JavaScript
import { ScalarTooltip as p } from "@scalar/components";
import { ScalarIconGlobe as h } from "@scalar/icons";
import { REGEX as u } from "@scalar/oas-utils/helpers";
import { ViewPlugin as v, EditorView as f, RangeSetBuilder as b, Decoration as g, WidgetType as y } from "@scalar/use-codemirror";
import { nanoid as N } from "nanoid";
import { defineComponent as w, h as l, createApp as E } from "vue";
import { getEnvColor as C } from "../../libs/env-helpers.js";
import { parseEnvVariables as V } from "../../libs/environment-parser.js";
class m extends y {
constructor(e, n, t, o) {
super(), this.variableName = e, this.variableName = e, this.environment = n, this.envVariables = t, this.isReadOnly = o ?? !1, this.uid = N();
}
app;
uid;
environment;
envVariables;
isReadOnly;
toDOM() {
const e = document.createElement("span");
e.className = "cm-pill", e.textContent = `${this.variableName}`;
const n = w({
props: { variableName: { type: String, default: null } },
render: () => {
const t = this.envVariables ? V(this.envVariables).find((c) => c.key === this.variableName) : void 0, o = t?.source === "global", r = o ? "var(--scalar-color-1)" : t && this.environment && this.environment.name !== "No Environment" ? C(this.environment) : "var(--scalar-color-1)";
e.style.setProperty("--tw-bg-base", r), e.style.opacity = t?.value ? "1" : "0.5";
const a = t?.value || "No value", s = l("div", { class: "flex items-center gap-1 whitespace-nowrap" }, [
(o || this.environment?.name === "No Environment" && t?.value) && l(h, { class: "size-3 -ml-1", icon: "Globe" }),
l("span", this.variableName)
]);
return l(
p,
{
content: a,
delay: 0,
placement: "bottom",
offset: 6
},
{
default: () => s
}
);
}
});
return this.app = E(n, { variableName: this.variableName }), this.app.mount(e), e;
}
destroy() {
this.app && this.app.unmount();
}
eq(e) {
return e instanceof m && e.variableName === this.variableName && e.uid === this.uid;
}
ignoreEvent() {
return !1;
}
}
const B = (i) => v.fromClass(
class {
decorations;
constructor(e) {
this.decorations = this.buildDecorations(e);
}
update(e) {
(e.docChanged || e.viewportChanged) && requestAnimationFrame(() => {
this.decorations = this.buildDecorations(e.view), e.view.update([]);
});
}
buildDecorations(e) {
const n = new b();
for (const { from: t, to: o } of e.visibleRanges) {
const r = e.state.doc.sliceString(t, o);
let a;
for (; (a = u.VARIABLES.exec(r)) !== null; ) {
const s = t + a.index, c = s + a[0].length, d = a[1] ?? "";
n.add(
s,
c,
g.widget({
widget: new m(d, i.environment, i.envVariables, i.isReadOnly),
side: 1
})
);
}
}
return n.finish();
}
},
{
decorations: (e) => e.decorations
}
), P = f.domEventHandlers({
keydown(i, e) {
if (i.key === "Backspace") {
const { state: n } = e, { from: t, to: o } = n.selection.main;
if (t === 0 && o === n.doc.length)
return e.dispatch({
changes: { from: 0, to: n.doc.length },
selection: { anchor: 0 }
}), i.preventDefault(), !0;
if (t === o && t > 0 && n.doc.sliceString(t - 2, t) === "}}")
return e.dispatch({
changes: { from: t - 2, to: o },
selection: { anchor: t - 2 }
}), i.preventDefault(), !0;
}
return !1;
}
});
export {
P as backspaceCommand,
B as pillPlugin
};