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 (
{