From a0ccc8f94a569f595cfa8be2e3d45ded7d4a464c Mon Sep 17 00:00:00 2001 From: Dmitry Litsman Date: Sun, 16 Apr 2023 15:07:33 +0100 Subject: [PATCH 1/6] Fix editor broken moving between code and config --- src/lib/components/Editor.svelte | 1 + 1 file changed, 1 insertion(+) diff --git a/src/lib/components/Editor.svelte b/src/lib/components/Editor.svelte index c4fc11e6..486e07a1 100644 --- a/src/lib/components/Editor.svelte +++ b/src/lib/components/Editor.svelte @@ -30,6 +30,7 @@ const newText = editorMode === 'code' ? code : mermaid; if (newText !== text) { // console.log('updating editor text', newText); + editor.setScrollTop(0); editor.setValue(newText); text = newText; } From 6e9453da0eb66c0a8a22582838ae076497e129b9 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Wed, 19 Apr 2023 18:46:20 +0530 Subject: [PATCH 2/6] Fix/monaco (#865) * Fix monaco import * Cleanup monaco * Test fix * Test fix * build: update Browserslist db * chore(deps): update all non-major dependencies * Fix editor --------- Co-authored-by: GitHub Action Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: github-merge-queue[bot] <118344674+github-merge-queue[bot]@users.noreply.github.com> --- .github/workflows/update-monaco-editor.yml | 25 - package.json | 2 +- src/app.html | 28 - src/lib/components/Editor.svelte | 47 +- src/lib/components/Navbar.svelte | 2 +- src/lib/components/Theme.svelte | 2 +- yarn.lock | 1268 ++++++++++---------- 7 files changed, 669 insertions(+), 705 deletions(-) delete mode 100644 .github/workflows/update-monaco-editor.yml diff --git a/.github/workflows/update-monaco-editor.yml b/.github/workflows/update-monaco-editor.yml deleted file mode 100644 index 31c2fd15..00000000 --- a/.github/workflows/update-monaco-editor.yml +++ /dev/null @@ -1,25 +0,0 @@ -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 18a5fb70..9d22618b 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.5", + "@sveltejs/kit": "1.15.7", "@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 896c9e6c..ec7dd686 100644 --- a/src/app.html +++ b/src/app.html @@ -21,34 +21,6 @@ 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 c4fc11e6..427b0e4c 100644 --- a/src/lib/components/Editor.svelte +++ b/src/lib/components/Editor.svelte @@ -63,18 +63,41 @@ }; const loadMonaco = async () => { - 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; + // @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); + } } - await new Promise((r) => setTimeout(r, 100)); - } - alert('Loading Monaco Editor failed. Please try refreshing the page.'); + }; + + Monaco = await import('monaco-editor'); }; onMount(async () => { @@ -111,7 +134,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 defb3c53..9947de0c 100644 --- a/src/lib/components/Navbar.svelte +++ b/src/lib/components/Navbar.svelte @@ -51,7 +51,7 @@