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
  Fix Config Update

src/code-store.js

@@ -24,21 +24,18 @@ export const fromUrl = (data) => {
     console.error('Init error', e);
     state = defaultState;
   }
-  codeStore.set({...state, updateEditor: true});
+  codeStore.set({ ...state, updateEditor: true });
 };
 export const updateCodeStore = (newState) => {
   codeStore.set(newState);
 };
 export const updateCode = (code, updateEditor) => {
   const state = get(codeStore);
-  state.code = code;
-  state.updateEditor = updateEditor;
-  codeStore.set(state);
+  codeStore.set({...state, code, updateEditor});
 };
-export const updateConfig = (config) => {
+export const updateConfig = (config, updateEditor) => {
   const state = get(codeStore);
-  state.mermaid = config;
-  codeStore.set(state);
+  codeStore.set({ ...state, mermaid: config, updateEditor });
 };
 
 const unsubscribe = codeStore.subscribe((state) => {

src/components/Config.svelte

@@ -2,62 +2,48 @@
   import { codeStore, updateConfig } from '../code-store.js';
   import { configErrorStore } from '../error-store.js';
   import { onMount } from 'svelte';
-  import { replace } from 'svelte-spa-router';
-  import { Base64 } from 'js-base64';
   import Error from './Error.svelte';
   import { getResizeHandler, initEditor } from './editor-utils';
   import { watchResize } from 'svelte-watch-resize';
   import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js';
 
-  export let conf = '';
-  export let code = '';
-
   let edit;
-  let editorElem = null;
 
   let resizeHandler = () => {};
 
-  let oldConf = {};
-  const handleConfUpdate = (conf) => {
-    try {
-      console.log(conf);
-      updateConfig(JSON.parse(conf));
-      configErrorStore.set(undefined);
-      const model = edit.getModel();
-    } catch (e) {
-      console.log('Error in parsed', e);
-      configErrorStore.set(e);
-      const str = JSON.stringify({ code, mermaid: oldConf });
-      replace('/edit/' + Base64.encodeURI(str));
+  const handleConfUpdate = (conf, updateEditor) => {
+    console.log(conf);
+    if (updateEditor && edit) {
+      edit.setValue(JSON.stringify(conf, null, 2));
     }
+    updateConfig(conf, false);
+    configErrorStore.set(undefined);
   };
+  
+
+  const unsubscribe = codeStore.subscribe((state) => {
+    console.log(state.mermaid, state.updateEditor);
+    if (state.updateEditor) {
+      handleConfUpdate(state.mermaid, true);
+    }
+  });
 
   onMount(async () => {
     console.log('Mounting config');
-
-    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);
+    const editorElem = document.getElementById('editor-conf');
+    edit = monaco.editor.create(editorElem, {
+      value: '',
+      theme: 'myCoolTheme',
+      language: 'json',
+    });
+    resizeHandler = getResizeHandler(edit);
+    edit.onDidChangeModelContent(function (e) {
+      try {
+        const conf = JSON.parse(edit.getValue());
+        handleConfUpdate(conf, false);
+      } catch (err) {
+        console.log('Error in parsed', err);
+        configErrorStore.set(err);
       }
     });
 

src/components/Editor.svelte

@@ -8,10 +8,6 @@
   import * as monaco from 'monaco-editor';
   import { watchResize } from 'svelte-watch-resize';
 
-
-  export let code = '';
-  const isDarkMode =
-    window.matchMedia('(prefers-color-scheme: dark)').matches && false;
   let edit;
 
   const decArr = [];
@@ -20,13 +16,15 @@
   const handleCodeUpdate = (updatedCode, updateEditor) => {
     try {
       mermaid.parse(updatedCode);
-      if(updateEditor){
-        edit.setValue(updatedCode);
+      if (edit) {
+        if (updateEditor) {
+          edit.setValue(updatedCode);
+        }
+        decArr.forEach((decor) => {
+          edit.deltaDecorations(decor, []);
+        });
       }
-      decArr.forEach((decor) => {
-        edit.deltaDecorations(decor, []);
-      });
-      updateCode(updatedCode, false)
+      updateCode(updatedCode, false);
       codeErrorStore.set(undefined);
     } catch (e) {
       if (e) {
@@ -53,12 +51,17 @@
     }
   };
 
+  const unsubscribe = codeStore.subscribe((state) => {
+    if (state.updateEditor) {
+      handleCodeUpdate(state.code, true);
+    }
+  });
+
   onMount(async () => {
     initEditor(monaco);
-
     editorElem = document.getElementById('editor');
     edit = monaco.editor.create(editorElem, {
-      value: [code].join('\n'),
+      value: '',
       theme: 'myCoolTheme',
       language: 'mermaid',
     });
@@ -67,19 +70,6 @@
       handleCodeUpdate(edit.getValue(), false);
     });
 
-
-    const unsubscribe = codeStore.subscribe((state) => {
-      console.log(`Code change ${JSON.stringify(state)}`);
-      
-      if (state) {
-        code = state.code || code;
-      }
-
-      if(state.updateEditor){
-        handleCodeUpdate(code, true);
-      }
-    });
-
     initEditor(monaco);
   });
 </script>