Merge branch 'develop' of https://github.com/mermaid-js/mermaid-live-editor into develop

* 'develop' of https://github.com/mermaid-js/mermaid-live-editor: Revert "Fix/monaco (#865)"
2023-04-19 20:54:04 +05:30
parent 7887854068 1efb5aa62e
commit eea17f31dd
7 changed files with 705 additions and 669 deletions
@@ -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'
@@ -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",
@@ -21,6 +21,34 @@
      integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer" />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.37.1/min/vs/editor/editor.main.min.css"
+      integrity="sha512-wB3xfL98hWg1bpkVYSyL0js/Jx9s7FsDg9aYO6nOMSJTgPuk/PFqxXQJKKSUjteZjeYrfgo9NFBOA1r9HwDuZw=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer" />
+    <script>
+      var require = {
+        paths: {
+          vs: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.0/min/vs'
+        }
+      };
+    </script>
+    <script
+      src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.37.1/min/vs/loader.min.js"
+      integrity="sha512-A+6SvPGkIN9Rf0mUXmW4xh7rDvALXf/f0VtOUiHlDUSPknu2kcfz1KzLpOJyL2pO+nZS13hhIjLqVgiQExLJrw=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"></script>
+    <script
+      src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.37.1/min/vs/editor/editor.main.nls.min.js"
+      integrity="sha512-rWneFgUi2AyxOdM2M4CqPQVSJOidtmUflUfKroRoxsX3qaQrXAZ17fiPXASJo12ta0RUO+lgQtRbEbRFaClJ6g=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"></script>
+    <script
+      src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.37.1/min/vs/editor/editor.main.js"
+      integrity="sha512-y99DgzNm8N3flFl0hvmTFfWVtj6prXGxll7PUbNc51mKGFiyWqTBqBFr06N8k7mLKp7LqvitwaIz8sJOfdHM4A=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"></script>
    %sveltekit.head%
  </head>
  <body>
@@ -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
      });
@@ -51,7 +51,7 @@
  </div>
  <label for="menu-toggle" class="pointer-cursor lg:hidden block"
    ><svg
-      class="fill-current"
+      class="fill-current "
      xmlns="http://www.w3.org/2000/svg"
      width="20"
      height="20"
@@ -28,7 +28,7 @@

 <div class="hidden lg:block dropdown">
  <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-  <div tabindex="0" class="btn btn-ghost">
+  <div tabindex="0" class="btn btn-ghost ">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"