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

* 'master' of https://github.com/mermaid-js/mermaid-live-editor:
  Release
  Add deployment
  Fix header image
  Fix font path
  Update Monaco Editor

src/components/Config.svelte

@@ -32,41 +32,36 @@
     }
   };
 
-  const unsubscribe = codeStore.subscribe((state) => {
-    if (editorElem === null) {
-      console.log('Starting stuff', document.getElementById('editor-conf'));
-      editorElem = document.getElementById('editor-conf');
-    }
-    if (!conf && state) {
-      conf = JSON.stringify(state.mermaid, null, 2) || '{}';
-    }
-    if (state) {
-      code = state.code;
-    }
-    if (!edit && conf && editorElem !== null) {
-      edit = monaco.editor.create(editorElem, {
-        value: [conf].join('\n'),
-        theme: 'myCoolTheme',
-        language: 'JSON',
-      });
-      resizeHandler = getResizeHandler(edit);
-      edit.onDidChangeModelContent(function (e) {
-        const conf = edit.getValue();
-        handleConfUpdate(conf);
-      });
-      handleConfUpdate(conf);
-    }
-  });
-
-  initEditor(monaco);
-
   onMount(async () => {
     console.log('Mounting config');
-    self.MonacoEnvironment = {
-      getWorkerUrl: function (moduleId, label) {
-        return './editor.worker.bundle.js';
-      },
-    };
+
+    const unsubscribe = codeStore.subscribe((state) => {
+      if (editorElem === null) {
+        console.log('Starting stuff', document.getElementById('editor-conf'));
+        editorElem = document.getElementById('editor-conf');
+      }
+      if (!conf && state) {
+        conf = JSON.stringify(state.mermaid, null, 2);
+      }
+      if (state) {
+        code = state.code;
+      }
+      if (!edit && conf && editorElem !== null) {
+        edit = monaco.editor.create(editorElem, {
+          value: [conf].join('\n'),
+          theme: 'myCoolTheme',
+          language: 'json',
+        });
+        resizeHandler = getResizeHandler(edit);
+        edit.onDidChangeModelContent(function (e) {
+          const conf = edit.getValue();
+          handleConfUpdate(conf);
+        });
+        handleConfUpdate(conf);
+      }
+    });
+
+    initEditor(monaco);
   });
 </script>
 

src/components/Editor.svelte

@@ -7,9 +7,7 @@
   import mermaid from '@mermaid';
   import Error from './Error.svelte';
   import { getResizeHandler, initEditor } from './editor-utils';
-  import 'monaco-editor/esm/vs/editor/browser/controller/coreCommands.js';
-  import 'monaco-editor/esm/vs/editor/contrib/find/findController.js';
-  import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js';
+  import * as monaco from 'monaco-editor';
   import { watchResize } from 'svelte-watch-resize';
 
   export let code = '';
@@ -60,12 +58,6 @@
   };
 
   onMount(async () => {
-    self.MonacoEnvironment = {
-      getWorkerUrl: function (moduleId, label) {
-        return './editor.worker.bundle.js';
-      },
-    };
-
     const unsubscribe = codeStore.subscribe((state) => {
       console.log('Code change');
       if (editorElem === null) {

src/editor.js

@@ -1,80 +0,0 @@
-// (1) Desired editor features:
-import 'monaco-editor/esm/vs/editor/browser/controller/coreCommands.js';
-import 'monaco-editor/esm/vs/editor/contrib/find/findController.js';
-import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js';
-
-monaco.languages.register({ id: 'mermaid' });
-
-// Register a tokens provider for the language
-monaco.languages.setMonarchTokensProvider('mermaid', {
-  tokenizer: {
-    root: [
-      [/\[graph.*/, 'custom-error'],
-      [/\[notice.*/, 'custom-notice'],
-      [/\[info.*/, 'custom-info'],
-      [/\[[a-zA-Z 0-9:]+\]/, 'custom-date'],
-    ],
-  },
-});
-
-self.MonacoEnvironment = {
-  getWorkerUrl: function (moduleId, label) {
-    return './editor.worker.bundle.js';
-  },
-};
-
-// Define a new theme that contains only rules that match this language
-monaco.editor.defineTheme('myCoolTheme', {
-  base: 'vs',
-  inherit: false,
-  rules: [
-    { token: 'custom-info', foreground: '808080' },
-    { token: 'custom-error', foreground: 'ff0000', fontStyle: 'bold' },
-    { token: 'custom-notice', foreground: 'FFA500' },
-    { token: 'custom-date', foreground: '008800' },
-  ],
-});
-
-// Register a completion item provider for the new language
-monaco.languages.registerCompletionItemProvider('mySpecialLanguage', {
-  provideCompletionItems: () => {
-    var suggestions = [
-      {
-        label: 'simpleText',
-        kind: monaco.languages.CompletionItemKind.Text,
-        insertText: 'simpleText',
-      },
-      {
-        label: 'testing',
-        kind: monaco.languages.CompletionItemKind.Keyword,
-        insertText: 'testing(${1:condition})',
-        insertTextRules:
-          monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
-      },
-      {
-        label: 'ifelse',
-        kind: monaco.languages.CompletionItemKind.Snippet,
-        insertText: [
-          'if (${1:condition}) {',
-          '\t$0',
-          '} else {',
-          '\t',
-          '}',
-        ].join('\n'),
-        insertTextRules:
-          monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
-        documentation: 'If-Else Statement',
-      },
-    ];
-    return { suggestions: suggestions };
-  },
-});
-
-const edit = monaco.editor.create(document.getElementById('editor'), {
-  value: [code].join('\n'),
-  theme: 'myCoolTheme',
-  language: 'mermaid',
-});
-edit.onDidChangeModelContent(function (e) {
-  codeStore.set(edit.getValue());
-});