Properly load monaco workers

package.json

@@ -64,7 +64,7 @@
     "tailwindcss": "^3.3.1",
     "tslib": "^2.5.0",
     "typescript": "5.0.4",
-    "vite": "^4.2.1",
+    "vite": "^4.3.0-beta.8",
     "vitest": "^0.30.1"
   },
   "dependencies": {

src/lib/components/Editor.svelte

@@ -3,14 +3,16 @@
   import { stateStore, updateCode, updateConfig } from '$lib/util/state';
   import { themeStore } from '$lib/util/theme';
   import { errorDebug, syncDiagram } from '$lib/util/util';
-  import type monaco from 'monaco-editor';
+  import * as monaco from 'monaco-editor';
+  import monacoJsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
+  import monacoEditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
+
   import { onMount } from 'svelte';
   import initEditor from 'monaco-mermaid';
   import { logEvent } from '$lib/util/stats';
 
   let divEl: HTMLDivElement | undefined = undefined;
   let editor: monaco.editor.IStandaloneCodeEditor | undefined;
-  let Monaco: typeof monaco | undefined;
   let editorOptions: monaco.editor.IStandaloneEditorConstructionOptions = {
     minimap: {
       enabled: false
@@ -22,7 +24,7 @@
 
   stateStore.subscribe(({ errorMarkers, editorMode, code, mermaid }) => {
     // console.log('editor store subscription', { code, mermaid });
-    if (!editor || !Monaco) {
+    if (!editor) {
       return;
     }
 
@@ -30,6 +32,7 @@
     const newText = editorMode === 'code' ? code : mermaid;
     if (newText !== text) {
       // console.log('updating editor text', newText);
+      editor.setScrollTop(0);
       editor.setValue(newText);
       text = newText;
     }
@@ -42,15 +45,15 @@
       return;
     }
     if (model.getLanguageId() !== language) {
-      Monaco.editor.setModelLanguage(model, language);
+      monaco.editor.setModelLanguage(model, language);
     }
 
     // Display/clear errors
-    Monaco.editor.setModelMarkers(model, 'mermaid', errorMarkers);
+    monaco.editor.setModelMarkers(model, 'mermaid', errorMarkers);
   });
 
   themeStore.subscribe(({ isDark }) => {
-    editor && Monaco?.editor.setTheme(isDark ? 'mermaid-dark' : 'mermaid');
+    editor && monaco.editor.setTheme(isDark ? 'mermaid-dark' : 'mermaid');
   });
 
   const handleUpdate = (text: string, mode: EditorMode) => {
@@ -62,56 +65,32 @@
     }
   };
 
-  const loadMonaco = async () => {
-    // @ts-ignore
-    self.MonacoEnvironment = {
-      getWorker: function (workerId: string, label: string) {
-        const getWorkerModule = (moduleUrl: string, label: string): Worker => {
-          // @ts-ignore
-          return new Worker(self.MonacoEnvironment.getWorkerUrl(moduleUrl), {
-            name: label,
-            type: 'module'
-          });
-        };
-
-        switch (label) {
-          case 'json':
-            return getWorkerModule('/monaco-editor/esm/vs/language/json/json.worker?worker', label);
-          case 'css':
-          case 'scss':
-          case 'less':
-            return getWorkerModule('/monaco-editor/esm/vs/language/css/css.worker?worker', label);
-          case 'html':
-          case 'handlebars':
-          case 'razor':
-            return getWorkerModule('/monaco-editor/esm/vs/language/html/html.worker?worker', label);
-          case 'typescript':
-          case 'javascript':
-            return getWorkerModule(
-              '/monaco-editor/esm/vs/language/typescript/ts.worker?worker',
-              label
-            );
-          default:
-            return getWorkerModule('/monaco-editor/esm/vs/editor/editor.worker?worker', label);
+  onMount(async () => {
+    const getWorkerModule = (moduleUrl: string, label: string) => {
+      return new Worker(
+        new URL('monaco-editor/esm/vs/' + moduleUrl + '.js?worker', import.meta.url),
+        {
+          name: label,
+          type: 'module'
         }
+      );
+    };
+    self.MonacoEnvironment = {
+      getWorker(_, label) {
+        if (label === 'json') {
+          return new monacoJsonWorker();
+        }
+        return new monacoEditorWorker();
       }
     };
 
-    Monaco = await import('monaco-editor');
-  };
-
-  onMount(async () => {
-    await loadMonaco(); // Fix https://github.com/mermaid-js/mermaid-live-editor/issues/175
-    if (!Monaco) {
-      throw new Error('Monaco failed to load');
-    }
     if (!divEl) {
       throw new Error('divEl is undefined');
     }
     // eslint-disable-next-line @typescript-eslint/no-unsafe-call
-    initEditor(Monaco);
+    initEditor(monaco);
     errorDebug(100);
-    editor = Monaco.editor.create(divEl, editorOptions);
+    editor = monaco.editor.create(divEl, editorOptions);
     editor.onDidChangeModelContent(({ isFlush, changes }) => {
       const newText = editor?.getValue();
       // console.log('editor onDidChangeModelContent', { text, newText, isFlush, changes });
@@ -124,7 +103,7 @@
     editor.addAction({
       id: 'mermaid-render-diagram',
       label: 'Render Diagram',
-      keybindings: [Monaco.KeyMod.CtrlCmd | Monaco.KeyCode.Enter],
+      keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter],
       run: function () {
         syncDiagram();
         logEvent('renderDiagram', {
@@ -132,7 +111,7 @@
         });
       }
     });
-    Monaco.editor.setTheme($themeStore.isDark ? 'mermaid-dark' : 'mermaid');
+    monaco.editor.setTheme($themeStore.isDark ? 'mermaid-dark' : 'mermaid');
     const resizeObserver = new ResizeObserver((entries) => {
       editor?.layout({
         height: entries[0].contentRect.height,
@@ -143,7 +122,12 @@
     if (divEl.parentElement) {
       resizeObserver.observe(divEl.parentElement);
     }
-    // console.log(`editor mounted`);
+
+    // @ts-ignore
+    if (window.Cypress) {
+      // @ts-ignore
+      window.editorLoaded = true;
+    }
     return () => {
       // console.log(`editor disposed`);
       editor?.dispose();

yarn.lock

@@ -4955,7 +4955,7 @@ robust-predicates@^3.0.0:
   resolved "https://registry.yarnpkg.com/robust-predicates/-/robust-predicates-3.0.1.tgz#ecde075044f7f30118682bd9fb3f123109577f9a"
   integrity sha512-ndEIpszUHiG4HtDsQLeIuMvRsDnn8c8rYStabochtUeCvfuvNptb5TUbVD68LRAILPX7p9nqQGh4xJgn3EHS/g==
 
-rollup@^3.18.0:
+rollup@^3.20.2:
   version "3.20.6"
   resolved "https://registry.yarnpkg.com/rollup/-/rollup-3.20.6.tgz#53c0fd73e397269d2ce5f0ec12851457dd53cacd"
   integrity sha512-2yEB3nQXp/tBQDN0hJScJQheXdvU2wFhh6ld7K/aiZ1vYcak6N/BKjY1QrU6BvO2JWYS8bEs14FRaxXosxy2zw==
@@ -5824,15 +5824,14 @@ vite-node@0.30.1:
   optionalDependencies:
     fsevents "~2.3.2"
 
-vite@^4.2.1:
-  version "4.2.2"
-  resolved "https://registry.yarnpkg.com/vite/-/vite-4.2.2.tgz#014c30e5163844f6e96d7fe18fbb702236516dc6"
-  integrity sha512-PcNtT5HeDxb3QaSqFYkEum8f5sCVe0R3WK20qxgIvNBZPXU/Obxs/+ubBMeE7nLWeCo2LDzv+8hRYSlcaSehig==
+vite@^4.3.0-beta.8:
+  version "4.3.0-beta.8"
+  resolved "https://registry.yarnpkg.com/vite/-/vite-4.3.0-beta.8.tgz#ee62d10b0efb298d30efa931f3430bbfa648f54f"
+  integrity sha512-dCYroE9jtHgjaZV9+ZINUNBZQg59JTDSmpWWldHO3X22P2RWrpTPQN57Kjv+WAA2WVRiXxyTXzQat+y0kJAy9g==
   dependencies:
     esbuild "^0.17.5"
     postcss "^8.4.21"
-    resolve "^1.22.1"
-    rollup "^3.18.0"
+    rollup "^3.20.2"
   optionalDependencies:
     fsevents "~2.3.2"