host monaco ourselves, don't download it from a CDN

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",

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",

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 <Loader />
     return (
         <Editor
             height={props.height}

commafeed-client/vite.config.ts

@@ -32,7 +32,7 @@ export default defineConfig({
         },
     },
     build: {
-        chunkSizeWarningLimit: 1000,
+        chunkSizeWarningLimit: 3000,
         rollupOptions: {
             output: {
                 manualChunks: id => {