Преглед изворни кода

fix(webui): bundle Monaco locally so the editor works offline (no CDN)

Install monaco-editor ^0.52.x, wire Vite ?worker imports in monacoSetup.ts,
and point @monaco-editor/react loader at the local bundle via loader.config.
Fszontagh пре 1 месец
родитељ
комит
1525c1e372
4 измењених фајлова са 19 додато и 36 уклоњено
  1. 4 36
      webui/package-lock.json
  2. 1 0
      webui/package.json
  3. 1 0
      webui/src/main.tsx
  4. 13 0
      webui/src/monacoSetup.ts

+ 4 - 36
webui/package-lock.json

@@ -12,6 +12,7 @@
         "@tanstack/react-query": "^5.90.16",
         "clsx": "^2.1.1",
         "lucide-react": "^0.562.0",
+        "monaco-editor": "^0.52.2",
         "react": "^19.2.0",
         "react-dom": "^19.2.0",
         "react-router-dom": "^7.11.0",
@@ -1678,13 +1679,6 @@
         "@types/react": "^19.2.0"
       }
     },
-    "node_modules/@types/trusted-types": {
-      "version": "2.0.7",
-      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
-      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
-      "optional": true,
-      "peer": true
-    },
     "node_modules/@vitejs/plugin-react": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-5.2.0.tgz",
@@ -1971,15 +1965,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/dompurify": {
-      "version": "3.2.7",
-      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.2.7.tgz",
-      "integrity": "sha512-WhL/YuveyGXJaerVlMYGWhvQswa7myDG17P7Vu65EWC05o8vfeNbvNf4d/BOvH99+ZW+LlQsc1GDKMa1vNK6dw==",
-      "peer": true,
-      "optionalDependencies": {
-        "@types/trusted-types": "^2.0.7"
-      }
-    },
     "node_modules/electron-to-chromium": {
       "version": "1.5.364",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.364.tgz",
@@ -2799,18 +2784,6 @@
         "@jridgewell/sourcemap-codec": "^1.5.5"
       }
     },
-    "node_modules/marked": {
-      "version": "14.0.0",
-      "resolved": "https://registry.npmjs.org/marked/-/marked-14.0.0.tgz",
-      "integrity": "sha512-uIj4+faQ+MgHgwUW1l2PsPglZLOLOT1uErt06dAPtx2kjteLAkbsd/0FiYg/MGS+i7ZKLb7w2WClxHkzOOuryQ==",
-      "peer": true,
-      "bin": {
-        "marked": "bin/marked.js"
-      },
-      "engines": {
-        "node": ">= 18"
-      }
-    },
     "node_modules/minimatch": {
       "version": "3.1.5",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.5.tgz",
@@ -2824,14 +2797,9 @@
       }
     },
     "node_modules/monaco-editor": {
-      "version": "0.55.1",
-      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.55.1.tgz",
-      "integrity": "sha512-jz4x+TJNFHwHtwuV9vA9rMujcZRb0CEilTEwG2rRSpe/A7Jdkuj8xPKttCgOh+v/lkHy7HsZ64oj+q3xoAFl9A==",
-      "peer": true,
-      "dependencies": {
-        "dompurify": "3.2.7",
-        "marked": "14.0.0"
-      }
+      "version": "0.52.2",
+      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.52.2.tgz",
+      "integrity": "sha512-GEQWEZmfkOGLdd3XK8ryrfWz3AIP8YymVXiPHEdewrUq7mh0qrKrfHLNCXcbB6sTnMLnOZ3ztSiKcciFUkIJwQ=="
     },
     "node_modules/ms": {
       "version": "2.1.3",

+ 1 - 0
webui/package.json

@@ -15,6 +15,7 @@
     "@tanstack/react-query": "^5.90.16",
     "clsx": "^2.1.1",
     "lucide-react": "^0.562.0",
+    "monaco-editor": "^0.52.2",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-router-dom": "^7.11.0",

+ 1 - 0
webui/src/main.tsx

@@ -1,3 +1,4 @@
+import './monacoSetup'
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'

+ 13 - 0
webui/src/monacoSetup.ts

@@ -0,0 +1,13 @@
+import * as monaco from 'monaco-editor'
+import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
+import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
+import { loader } from '@monaco-editor/react'
+
+self.MonacoEnvironment = {
+  getWorker(_workerId: string, label: string): Worker {
+    if (label === 'json') return new jsonWorker()
+    return new editorWorker()
+  },
+}
+
+loader.config({ monaco })