@scalar/api-client
Version:
the open source API testing client
107 lines (106 loc) • 3.49 kB
JavaScript
import { ScalarTooltip as m } from "@scalar/components";
import { REGEX as u } from "@scalar/helpers/regex/regex-helpers";
import { ViewPlugin as p, EditorView as v, RangeSetBuilder as b, Decoration as g, WidgetType as E } from "@scalar/use-codemirror";
import { defineComponent as C, h as l, createApp as w } from "vue";
class c extends E {
constructor(e, n) {
super(), this.variableName = e, this.pillColor = n?.color || "var(--scalar-color-1)";
const t = n?.variables?.find((i) => i.name === e), a = t ? typeof t.value == "string" ? t.value : t.value?.default : void 0;
this.variableInfo = {
value: a || "No value",
hasValue: !!a
};
}
app;
pillColor;
variableInfo;
toDOM() {
const e = document.createElement("span");
e.className = "cm-pill", e.textContent = this.variableName, e.style.setProperty("--tw-bg-base", this.pillColor), e.style.opacity = this.variableInfo.hasValue ? "1" : "0.5";
const n = C({
render: () => {
const t = l("div", { class: "flex items-center gap-1 whitespace-nowrap" }, [
l("span", this.variableName)
]);
return l(
m,
{
content: this.variableInfo.value,
delay: 0,
placement: "bottom",
offset: 6
},
{
default: () => t
}
);
}
});
return this.app = w(n), this.app.mount(e), e;
}
destroy() {
this.app && (this.app.unmount(), this.app = null);
}
eq(e) {
return e instanceof c && e.variableName === this.variableName && e.pillColor === this.pillColor && e.variableInfo.value === this.variableInfo.value && e.variableInfo.hasValue === this.variableInfo.hasValue;
}
ignoreEvent() {
return !1;
}
}
const N = (o) => p.fromClass(
class {
decorations;
lastEnvironment;
constructor(e) {
this.lastEnvironment = o.environment, this.decorations = this.buildDecorations(e);
}
update(e) {
if (o.environment !== this.lastEnvironment) {
this.lastEnvironment = o.environment, this.decorations = this.buildDecorations(e.view);
return;
}
(e.docChanged || e.viewportChanged) && (this.decorations = this.buildDecorations(e.view));
}
buildDecorations(e) {
const n = new b();
for (const { from: t, to: a } of e.visibleRanges) {
const i = e.state.doc.sliceString(t, a), f = new RegExp(u.VARIABLES.source, u.VARIABLES.flags);
let s;
for (; (s = f.exec(i)) !== null; ) {
const r = t + s.index, d = r + s[0].length, h = s[1] ?? "";
e.state.doc.sliceString(r, d).includes(`
`) || n.add(
r,
d,
g.widget({
widget: new c(h, o.environment),
side: 1
})
);
}
}
return n.finish();
}
},
{
decorations: (e) => e.decorations
}
), S = v.domEventHandlers({
keydown(o, e) {
if (o.key !== "Backspace")
return !1;
const { state: n } = e, { from: t, to: a } = n.selection.main;
return t === 0 && a === n.doc.length ? (e.dispatch({
changes: { from: 0, to: n.doc.length },
selection: { anchor: 0 }
}), o.preventDefault(), !0) : t === a && t >= 2 && n.doc.sliceString(t - 2, t) === "}}" ? (e.dispatch({
changes: { from: t - 2, to: t },
selection: { anchor: t - 2 }
}), o.preventDefault(), !0) : !1;
}
});
export {
S as backspaceCommand,
N as pillPlugin
};