diff --git a/src/renderer/main.tsx b/src/renderer/main.tsx index 989a051..7e636e9 100644 --- a/src/renderer/main.tsx +++ b/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 }); diff --git a/src/renderer/vite-env.d.ts b/src/renderer/vite-env.d.ts new file mode 100644 index 0000000..c01c0ce --- /dev/null +++ b/src/renderer/vite-env.d.ts @@ -0,0 +1,45 @@ +/// + +// 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; +}