oppi.li
1import editorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker";
2import jsonWorker from "monaco-editor/esm/vs/language/json/json.worker?worker";
3import * as monaco from "monaco-editor";
4import { onMount } from "solid-js";
5
6const isTouchDevice = "ontouchstart" in window || navigator.maxTouchPoints > 1;
7
8self.MonacoEnvironment = {
9 getWorker(_, label) {
10 if (label === "json") return new jsonWorker();
11 return new editorWorker();
12 },
13};
14
15let editor: monaco.editor.IStandaloneCodeEditor;
16
17const Editor = (props: { theme: string; model: monaco.editor.IModel }) => {
18 let editorDiv!: HTMLDivElement;
19
20 onMount(() => {
21 editor = monaco.editor.create(editorDiv, {
22 minimap: { enabled: false },
23 theme: props.theme === "dark" ? "vs-dark" : "vs",
24 model: props.model,
25 wordWrap: "on",
26 automaticLayout: true,
27 fontFamily: "Roboto Mono",
28 lineNumbers: isTouchDevice ? "off" : "on",
29 fontSize: 12,
30 });
31 });
32
33 return <div ref={editorDiv} class="h-20rem sm:h-24rem dark:shadow-dark-900/80 shadow-sm"></div>;
34};
35
36export { Editor, editor };