diff --git a/.github/workflows/update-monaco-editor.yml b/.github/workflows/update-monaco-editor.yml new file mode 100644 index 00000000..31c2fd15 --- /dev/null +++ b/.github/workflows/update-monaco-editor.yml @@ -0,0 +1,25 @@ +name: Update Monaco-editor +on: + workflow_dispatch: + push: + branches: + - 'dependabot/npm_and_yarn/develop/monaco-editor-**' + +jobs: + build: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v3 + - uses: actions/setup-node@v3 + with: + node-version: 18 + - name: Update monaco version + run: | + yarn install + node ./bin/update-monaco.js + - name: Commit changes + uses: EndBug/add-and-commit@v9 + with: + author_name: ${{ github.actor }} + author_email: ${{ github.actor }}@users.noreply.github.com + message: 'Update Monaco-editor' diff --git a/package.json b/package.json index 9d22618b..18a5fb70 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,7 @@ "devDependencies": { "@cypress/snapshot": "2.1.7", "@sveltejs/adapter-static": "2.0.2", - "@sveltejs/kit": "1.15.7", + "@sveltejs/kit": "1.15.5", "@testing-library/jest-dom": "5.16.5", "@testing-library/svelte": "3.2.2", "@types/pako": "2.0.0", diff --git a/src/app.html b/src/app.html index ec7dd686..896c9e6c 100644 --- a/src/app.html +++ b/src/app.html @@ -21,6 +21,34 @@ integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" /> + + + + + %sveltekit.head% diff --git a/src/lib/components/Editor.svelte b/src/lib/components/Editor.svelte index d655e95b..486e07a1 100644 --- a/src/lib/components/Editor.svelte +++ b/src/lib/components/Editor.svelte @@ -64,41 +64,18 @@ }; 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); - } + console.log('Loading Monaco...'); + // errorDebug(); + let i = 0; + while (i++ < 500) { + // @ts-expect-error : This is a hack to handle a svelte-kit error when importing monaco. + Monaco = window.monaco; + if (Monaco !== undefined) { + return; } - }; - - Monaco = await import('monaco-editor'); + await new Promise((r) => setTimeout(r, 100)); + } + alert('Loading Monaco Editor failed. Please try refreshing the page.'); }; onMount(async () => { @@ -135,7 +112,7 @@ }); Monaco.editor.setTheme($themeStore.isDark ? 'mermaid-dark' : 'mermaid'); const resizeObserver = new ResizeObserver((entries) => { - editor?.layout({ + editor!.layout({ height: entries[0].contentRect.height, width: entries[0].contentRect.width }); diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte index 9947de0c..defb3c53 100644 --- a/src/lib/components/Navbar.svelte +++ b/src/lib/components/Navbar.svelte @@ -51,7 +51,7 @@