From 0a27e93e182fdc5639880b46678672b857136c41 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Sat, 23 Jan 2021 12:10:53 +0530
Subject: [PATCH] Fix Editor Init. Fixes #85

---
 src/code-store.js            |  4 +-
 src/components/Editor.svelte | 72 +++++++++++++++---------------------
 2 files changed, 31 insertions(+), 45 deletions(-)

diff --git a/src/code-store.js b/src/code-store.js
index 972d7825..f9a3b31b 100644
--- a/src/code-store.js
+++ b/src/code-store.js
@@ -24,12 +24,10 @@ export const fromUrl = (data) => {
     console.error('Init error', e);
     state = defaultState;
   }
-
-  codeStore.set(state);
+  codeStore.set({...state, updateEditor: true});
 };
 export const updateCodeStore = (newState) => {
   codeStore.set(newState);
-  replace('/edit/' + Base64.encodeURI(JSON.stringify(newState)));
 };
 export const updateCode = (code, updateEditor) => {
   const state = get(codeStore);
diff --git a/src/components/Editor.svelte b/src/components/Editor.svelte
index fd850a8d..c44f7db6 100644
--- a/src/components/Editor.svelte
+++ b/src/components/Editor.svelte
@@ -1,9 +1,7 @@
 <script>
-  import { codeStore, updateCodeStore } from '../code-store.js';
+  import { codeStore, updateCode } from '../code-store.js';
   import { codeErrorStore } from '../code-error-store.js';
   import { onMount } from 'svelte';
-  import { 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';
@@ -11,34 +9,32 @@
   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;
-  export let conf = { theme: isDarkMode ? 'dark' : 'default' };
   let edit;
   export let error = false;
 
-  let decorations = [];
+
   const decArr = [];
   let editorElem = null;
   let resizeHandler = () => {};
-  const handleCodeUpdate = (code) => {
+  const handleCodeUpdate = (updatedCode, updateEditor) => {
     try {
-      mermaid.parse(code);
-      let newState = { code, mermaid: conf, updateEditor: false };
-      updateCodeStore(newState);
+      mermaid.parse(updatedCode);
+      if(updateEditor){
+        edit.setValue(updatedCode);
+      }
       decArr.forEach((decor) => {
         edit.deltaDecorations(decor, []);
       });
-
+      updateCode(updatedCode, false)
       codeErrorStore.set(undefined);
-      const model = edit.getModel();
     } catch (e) {
       if (e) {
         codeErrorStore.set(e);
         console.log('Error in parsed', e.hash);
-        const str = JSON.stringify({ code: code, mermaid: conf });
-        replace('/edit/' + Base64.encodeURI(str));
         const l = e.hash.line;
         decArr.push(
           edit.deltaDecorations(
@@ -61,35 +57,29 @@
   };
 
   onMount(async () => {
-    const unsubscribe = codeStore.subscribe((state) => {
-      console.log('Code change');
-      if (editorElem === null) {
-        editorElem = document.getElementById('editor');
-      }
-      if (!code && state) {
-        code = state.code;
-      }
-      if (state) {
-        conf = state.mermaid;
-      }
-      if (!edit && code && editorElem !== null) {
-        edit = monaco.editor.create(editorElem, {
-          value: [code].join('\n'),
-          theme: 'myCoolTheme',
-          language: 'mermaid',
-        });
-        resizeHandler = getResizeHandler(edit);
+    initEditor(monaco);
 
-        let decorations = [];
-        edit.onDidChangeModelContent(function (e) {
-          const code = edit.getValue();
-          handleCodeUpdate(code);
-        });
-        handleCodeUpdate(code);
+    editorElem = document.getElementById('editor');
+    edit = monaco.editor.create(editorElem, {
+      value: [code].join('\n'),
+      theme: 'myCoolTheme',
+      language: 'mermaid',
+    });
+    resizeHandler = getResizeHandler(edit);
+    edit.onDidChangeModelContent(function (e) {
+      handleCodeUpdate(edit.getValue(), false);
+    });
+
+
+    const unsubscribe = codeStore.subscribe((state) => {
+      console.log(`Code change ${JSON.stringify(state)}`);
+      
+      if (state) {
+        code = state.code || code;
       }
-      if (state && state.updateEditor && edit && code && editorElem !== null) {
-        edit.setValue(state.code);
-        handleCodeUpdate(state.code);
+
+      if(state.updateEditor){
+        handleCodeUpdate(code, true);
       }
     });
 
@@ -100,8 +90,6 @@
         error = false;
       }
     });
-
-    initEditor(monaco);
   });
 </script>