diff --git a/package.json b/package.json index 9d22618b..07ec7971 100644 --- a/package.json +++ b/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": { diff --git a/src/lib/components/Editor.svelte b/src/lib/components/Editor.svelte index 427b0e4c..15dcbaa6 100644 --- a/src/lib/components/Editor.svelte +++ b/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(); diff --git a/yarn.lock b/yarn.lock index ab8466b0..60b2bad5 100644 --- a/yarn.lock +++ b/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"