fix: monaco worker setup

src/renderer/main.tsx

@@ -2,9 +2,35 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 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';
+import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
+import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker';
+import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
 import App from './App';
 import './styles/global.css';
 
+// Configure Monaco web workers
+// This is required for syntax highlighting, validation, etc. to work properly
+// without blocking the main thread
+self.MonacoEnvironment = {
+  getWorker(_: unknown, label: string) {
+    if (label === 'json') {
+      return new jsonWorker();
+    }
+    if (label === 'css' || label === 'scss' || label === 'less') {
+      return new cssWorker();
+    }
+    if (label === 'html' || label === 'handlebars' || label === 'razor') {
+      return new htmlWorker();
+    }
+    if (label === 'typescript' || label === 'javascript') {
+      return new tsWorker();
+    }
+    return new editorWorker();
+  },
+};
+
 // Configure Monaco to use local bundled version instead of CDN
 // This avoids CSP issues in Electron
 loader.config({ monaco });

src/renderer/vite-env.d.ts

@@ -0,0 +1,45 @@
+/// <reference types="vite/client" />
+
+// Type declarations for Vite's ?worker import syntax
+declare module '*?worker' {
+  const workerConstructor: {
+    new (): Worker;
+  };
+  export default workerConstructor;
+}
+
+// Specific Monaco Editor worker module declarations
+declare module 'monaco-editor/esm/vs/editor/editor.worker?worker' {
+  const workerConstructor: {
+    new (): Worker;
+  };
+  export default workerConstructor;
+}
+
+declare module 'monaco-editor/esm/vs/language/json/json.worker?worker' {
+  const workerConstructor: {
+    new (): Worker;
+  };
+  export default workerConstructor;
+}
+
+declare module 'monaco-editor/esm/vs/language/css/css.worker?worker' {
+  const workerConstructor: {
+    new (): Worker;
+  };
+  export default workerConstructor;
+}
+
+declare module 'monaco-editor/esm/vs/language/html/html.worker?worker' {
+  const workerConstructor: {
+    new (): Worker;
+  };
+  export default workerConstructor;
+}
+
+declare module 'monaco-editor/esm/vs/language/typescript/ts.worker?worker' {
+  const workerConstructor: {
+    new (): Worker;
+  };
+  export default workerConstructor;
+}