fix(dashboard): bundle Monaco editor instead of fetching from CDN (#4247)

Author: koushik717

frontend/app/package.json

@@ -69,6 +69,7 @@
     "js-confetti": "^0.13.1",
     "lodash": "^4.18.1",
     "lucide-react": "^1.8.0",
+    "monaco-editor": "^0.55.1",
     "monaco-themes": "^0.4.8",
     "ms": "^2.1.3",
     "posthog-js": "^1.369.2",

frontend/app/pnpm-lock.yaml

@@ -1,5 +1,6 @@
 import CopyToClipboard from './copy-to-clipboard';
 import { useTheme } from '@/components/hooks/use-theme';
+import '@/lib/monaco-environment';
 import { cn } from '@/lib/utils';
 import Editor, { Monaco, OnMount } from '@monaco-editor/react';
 import { useCallback, useEffect, useId, useRef } from 'react';
@@ -49,7 +50,8 @@ export function CodeEditor({
       const existingSchemas = existingOptions.schemas || [];
 
       const otherSchemas = existingSchemas.filter(
-        (s) => !s.fileMatch?.includes(modelPath),
+        (s: (typeof existingSchemas)[number]) =>
+          !s.fileMatch?.includes(modelPath),
       );
 
       const newSchemas = hasJsonSchema

frontend/app/src/components/v1/ui/code-editor.tsx

@@ -0,0 +1,19 @@
+// Bundles Monaco locally instead of letting @monaco-editor/react fetch it
+// from cdn.jsdelivr.net at runtime, which breaks air-gapped/self-hosted
+// deployments. Importing this module configures both the editor's worker
+// environment and the loader before any <Editor /> instance mounts.
+import { loader } from '@monaco-editor/react';
+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';
+
+self.MonacoEnvironment = {
+  getWorker(_workerId, label) {
+    if (label === 'json') {
+      return new jsonWorker();
+    }
+    return new editorWorker();
+  },
+};
+
+loader.config({ monaco });