@scalar/api-client
Version:
the open source API testing client
154 lines (153 loc) • 4.38 kB
JavaScript
import * as r from "monaco-editor";
import "monaco-editor/esm/vs/editor/contrib/folding/browser/folding.css";
import "monaco-editor/esm/vs/base/browser/ui/codicons/codicon/codicon.css";
import { presets as E } from "@scalar/themes";
import { toValue as a, watch as c } from "vue";
import { applyScalarTheme as J } from "../helpers/apply-scalar-theme.js";
import { configureLanguageSupport as R } from "../helpers/configure-language-support.js";
import { ensureMonacoEnvironment as k } from "../helpers/ensure-monaco-environment.js";
import { getJsonAstNodeFromPath as D } from "../helpers/get-json-ast-node-from-path.js";
import { getYamlNodeRangeFromPath as j } from "../helpers/get-yaml-node-range-from-path.js";
import { ensureJsonPointerLinkSupport as z } from "../helpers/json-pointer-links.js";
import { parseJsonPointerPath as B } from "../helpers/json-pointer-path.js";
const ot = ({
element: w,
value: f,
onChange: b,
actions: O,
readOnly: m = !1,
isDarkMode: x = !1,
theme: S = E.default.theme,
language: C = "json"
}) => {
k();
const n = r.editor.createModel(a(f) ?? "", C);
R(n.uri.toString());
const o = r.editor.create(w, {
model: n,
automaticLayout: !0,
folding: !0,
showFoldingControls: "always",
glyphMargin: !0,
lineNumbers: "on",
minimap: { enabled: !1 },
overviewRulerLanes: 0,
readOnly: a(m),
scrollbar: {
useShadows: !1,
verticalScrollbarSize: 5
},
scrollBeyondLastLine: !1,
guides: {
indentation: !0
},
formatOnPaste: !0,
renderValidationDecorations: "on",
formatOnType: !0,
lineHeight: 20,
renderLineHighlight: "none",
fontFamily: "'JetBrains Mono', monospace"
});
o.updateOptions({ insertSpaces: !0, tabSize: 2 });
let d = [], u = 0;
O?.forEach((t) => {
o.addAction({
id: t.id,
label: t.label,
keybindings: t.keybindings,
run: async () => {
await t.run();
}
});
});
const g = (t, e) => {
const s = n.getPositionAt(t), i = Math.max(t, e - 1), F = n.getPositionAt(i), P = Math.max(1, s.lineNumber), M = Math.max(P, F.lineNumber);
return new r.Range(P, 1, M, n.getLineMaxColumn(M));
}, p = async (t) => {
if (n.getLanguageId() === "yaml")
return j(n.getValue(), t);
const e = await D(n, t);
return e ? { startOffset: e.offset, endOffset: e.offset + e.length } : null;
}, l = async (t) => {
await o.getAction(t)?.run();
}, h = ({ startOffset: t, endOffset: e }) => {
const s = g(t, e);
d = o.deltaDecorations(d, [
{
range: s,
options: {
isWholeLine: !0,
className: "json-focus-highlight"
}
}
]);
}, T = async (t) => {
const e = await p(t);
e && h(e);
}, y = async (t) => {
const e = await p(t);
if (!e)
return;
const s = g(e.startOffset, e.endOffset);
await l("editor.foldAll"), o.setSelection(s), await l("editor.unfoldRecursively");
const i = n.getPositionAt(e.startOffset);
o.setPosition(i), o.revealPositionNearTop(i), h(e);
}, N = async (t) => {
const e = B(t);
e && await y(e);
}, { dispose: v } = z(N);
o.onDidChangeModelContent(() => {
if (u > 0) {
u -= 1;
return;
}
const t = o.getValue();
typeof t == "string" && b?.(t ?? "");
}), c(
() => a(f),
(t) => {
t && o.getValue() !== t && L(t, !0);
}
), c(
[() => a(S), () => a(x)],
async ([t, e]) => {
await J(t, e);
},
{
immediate: !0
}
), c(
() => a(m),
(t) => {
o?.updateOptions({ readOnly: t });
}
);
const A = async () => {
await l("editor.action.formatDocument");
}, V = () => o.getValue(), L = (t, e = !1) => {
e && (u += 1), o.setValue(t);
};
return {
editor: o,
model: n,
highlightPath: T,
focusPath: y,
formatDocument: A,
getValue: V,
setValue: L,
hasTextFocus: () => o.hasTextFocus(),
setLanguage: (t) => {
r.editor.setModelLanguage(n, t);
},
setCursorToMarker: (t) => {
const e = Math.min(Math.max(t.startLineNumber || 1, 1), n.getLineCount()), s = Math.min(Math.max(t.startColumn || 1, 1), n.getLineMaxColumn(e));
o.setPosition({ lineNumber: e, column: s });
},
dispose: () => {
o.dispose(), n.dispose(), v();
}
};
};
export {
ot as useEditor
};