latest

Author: Marco

components/webui/client/src/components/SqlEditor/index.tsx

@@ -7,6 +7,7 @@ import {
 } from "@monaco-editor/react";
 import {language as sqlLanguage} from "monaco-editor/esm/vs/basic-languages/sql/sql.js";
 
+import "./monaco-config";
 
 type SqlEditorProps = Omit<EditorProps, "language">;
 

components/webui/client/src/components/SqlEditor/monaco-config.ts

@@ -0,0 +1,28 @@
+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';
+
+// Reference: https://github.com/suren-atoyan/monaco-react?tab=readme-ov-file#use-monaco-editor-as-an-npm-package
+self.MonacoEnvironment = {
+  getWorker(_, label) {
+    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();
+  },
+};
+
+loader.config({ monaco });

components/webui/client/src/components/SqlEditor/monaco-sql.d.ts

@@ -1,5 +1,5 @@
 declare module "monaco-editor/esm/vs/basic-languages/sql/sql.js" {
-    import {languages} from "monaco-editor/esm/vs/editor/editor.api";
+    import {languages} from "monaco-editor";
 
 
     interface SqlLanguageDefinition extends languages.IMonarchLanguage {