diff --git a/commafeed-client/package-lock.json b/commafeed-client/package-lock.json index cbe364c4..674131d6 100644 --- a/commafeed-client/package-lock.json +++ b/commafeed-client/package-lock.json @@ -25,6 +25,7 @@ "axios": "^1.4.0", "dayjs": "^1.11.7", "interweave": "^13.1.0", + "monaco-editor": "^0.38.0", "mousetrap": "^1.6.5", "re-resizable": "^6.9.9", "react": "^18.2.0", @@ -9025,10 +9026,9 @@ } }, "node_modules/monaco-editor": { - "version": "0.39.0", - "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.39.0.tgz", - "integrity": "sha512-zhbZ2Nx93tLR8aJmL2zI1mhJpsl87HMebNBM6R8z4pLfs8pj604pIVIVwyF1TivcfNtIPpMXL+nb3DsBmE/x6Q==", - "peer": true + "version": "0.38.0", + "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.38.0.tgz", + "integrity": "sha512-11Fkh6yzEmwx7O0YoLxeae0qEGFwmyPRlVxpg7oF9czOOCB/iCjdJrG5I67da5WiXK3YJCxoz9TJFE8Tfq/v9A==" }, "node_modules/moo": { "version": "0.5.2", diff --git a/commafeed-client/package.json b/commafeed-client/package.json index d30a3def..e30883d7 100644 --- a/commafeed-client/package.json +++ b/commafeed-client/package.json @@ -31,6 +31,7 @@ "axios": "^1.4.0", "dayjs": "^1.11.7", "interweave": "^13.1.0", + "monaco-editor": "^0.38.0", "mousetrap": "^1.6.5", "re-resizable": "^6.9.9", "react": "^18.2.0", diff --git a/commafeed-client/src/components/RichCodeEditor.tsx b/commafeed-client/src/components/RichCodeEditor.tsx index 65e784b0..dd46d322 100644 --- a/commafeed-client/src/components/RichCodeEditor.tsx +++ b/commafeed-client/src/components/RichCodeEditor.tsx @@ -1,5 +1,28 @@ import { useMantineTheme } from "@mantine/core" -import { Editor } from "@monaco-editor/react" +import { Loader } from "components/Loader" +import { useAsync } from "react-async-hook" + +const init = async () => { + window.MonacoEnvironment = { + async getWorker(_, label) { + let worker + if (label === "css") { + worker = await import("monaco-editor/esm/vs/language/css/css.worker?worker") + } else if (label === "javascript") { + worker = await import("monaco-editor/esm/vs/language/typescript/ts.worker?worker") + } else { + worker = await import("monaco-editor/esm/vs/editor/editor.worker?worker") + } + // eslint-disable-next-line new-cap + return new worker.default() + }, + } + + const monacoReact = await import("@monaco-editor/react") + const monaco = await import("monaco-editor") + monacoReact.loader.config({ monaco }) + return monacoReact.Editor +} interface RichCodeEditorProps { height: number | string @@ -12,6 +35,8 @@ function RichCodeEditor(props: RichCodeEditorProps) { const theme = useMantineTheme() const editorTheme = theme.colorScheme === "dark" ? "vs-dark" : "light" + const { result: Editor } = useAsync(init, []) + if (!Editor) return return ( {