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

@@ -1,16 +1,8 @@
 <script>
-  import {
-    codeStore,
-    updateCodeStore,
-    updateConfig,
-    updateCode,
-  } from '../code-store.js';
+  import { codeStore, updateConfig } from '../code-store.js';
   import { configErrorStore } from '../config-error-store.js';
   import { onMount } from 'svelte';
-  import { push, pop, replace } from 'svelte-spa-router';
-  import { Base64 } from 'js-base64';
-  // import mermaid from '@mermaid-js/mermaid';
-  import mermaid from '@mermaid';
+
   import Error from './Error.svelte';
   import { getResizeHandler, initEditor } from './editor-utils';
   import { watchResize } from 'svelte-watch-resize';
@@ -18,35 +10,20 @@
   import 'monaco-editor/esm/vs/editor/contrib/find/findController.js';
   import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js';
 
-  export let conf = '';
-  export let code = '';
   export let error = false;
 
   let edit;
   let editorElem = null;
 
-  let decorations = [];
-  const decArr = [];
   let resizeHandler = () => {};
 
-  let oldConf = {};
-  const handleConfUpdate = (conf) => {
-    try {
-      console.log(conf);
-      JSON.parse(conf);
-      // let newState = { code, mermaid: JSON.parse(conf) };
-      // oldConf = newState.mermaid;
-      updateConfig(JSON.parse(conf));
-      configErrorStore.set(undefined);
-      // const model = edit.getModel();
-      // // model.setValue(conf);
-      // // model.dispose();
-    } 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 unsubscribeError = configErrorStore.subscribe((_error) => {
@@ -58,32 +35,29 @@
     }
   });
 
+  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);
+    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 (e) {
+        console.log('Error in parsed', e);
+        configErrorStore.set(e);
       }
     });
 

src/components/Editor.svelte

@@ -9,27 +9,24 @@
   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;
   export let error = false;
 
-
   const decArr = [];
   let editorElem = null;
   let resizeHandler = () => {};
   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) {
@@ -56,12 +53,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',
     });
@@ -70,19 +72,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);
-      }
-    });
-
     const unsubscribeError = codeErrorStore.subscribe((_error) => {
       if (_error) {
         error = true;