From 19e00e65b019faf3eeea8fe89ea0612dad371c12 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Sat, 15 May 2021 23:36:50 +0530
Subject: [PATCH] Fix mermaid

---
 src/lib/History/index.svelte | 14 +++++++++++---
 src/lib/Util/state.ts        |  9 +++++++--
 src/lib/View/index.svelte    |  7 ++++---
 3 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/src/lib/History/index.svelte b/src/lib/History/index.svelte
index 83c4f0b8..1d8e30a2 100644
--- a/src/lib/History/index.svelte
+++ b/src/lib/History/index.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import Tabs from '$lib/Tabs/index.svelte';
 	import Card from '$lib/Card/index.svelte';
-	import { codeStore } from '$lib/Util/state';
+	import { codeStore, getStateString } from '$lib/Util/state';
 	import { historyStore } from '$lib/Util/history';
 
 	let historyMode: string = 'saved';
@@ -20,9 +20,16 @@
 		}
 	];
 
+	let previousState = getStateString();
+
 	setInterval(() => {
-		saveHistory(true);
+		const currentState = getStateString();
+		if (previousState !== currentState) {
+			saveHistory(true);
+			previousState = currentState;
+		}
 	}, 1000);
+
 	let history: HistoryEntry[] = [];
 	$: history = $historyStore.filter((h) => (historyMode === 'saved' ? !h.auto : h.auto));
 	const saveHistory = (auto = false) => {
@@ -47,7 +54,8 @@
 		<div class="flex"><Tabs on:select={tabSelectHandler} {tabs} /></div>
 		<div class="flex-grow" />
 		<div class="flex gap-x-4 text-white">
-			<button class="bg-blue-500 hover:bg-blue-700 rounded px-1" on:click={saveHistory}>Save</button
+			<button class="bg-blue-500 hover:bg-blue-700 rounded px-1" on:click={() => saveHistory()}
+				>Save</button
 			>
 		</div>
 	</div>
diff --git a/src/lib/Util/state.ts b/src/lib/Util/state.ts
index 3187782d..dbf4d9df 100644
--- a/src/lib/Util/state.ts
+++ b/src/lib/Util/state.ts
@@ -1,4 +1,4 @@
-import { writable } from 'svelte/store';
+import { writable, get } from 'svelte/store';
 import { encode, decode } from 'js-base64';
 
 const defaultState: State = {
@@ -13,7 +13,8 @@ const defaultState: State = {
 		theme: 'default'
 	}),
 	updateEditor: false,
-	autoSync: true
+	autoSync: true,
+	updateDiagram: true
 };
 
 export const codeStore = writable(defaultState);
@@ -53,3 +54,7 @@ export const initURLSubscription = (): void => {
 		window.location.hash = encode(JSON.stringify(state), true);
 	});
 };
+
+export const getStateString = (): string => {
+	return JSON.stringify(get(codeStore));
+};
diff --git a/src/lib/View/index.svelte b/src/lib/View/index.svelte
index 3d2b9ea2..b4b8c5dd 100644
--- a/src/lib/View/index.svelte
+++ b/src/lib/View/index.svelte
@@ -1,15 +1,16 @@
 <script lang="ts">
 	import { errorStore } from '$lib/Util/error';
-	import { getMermaid } from '$lib/Util/mermaid';
 
 	import { codeStore } from '$lib/Util/state';
 	import { onMount } from 'svelte';
+	import type { Mermaid } from 'mermaid';
+
+	const mermaid: Mermaid = (window.mermaid as unknown) as Mermaid;
 	let container;
 
 	export let code = '';
 	export let errorClass = '';
 	onMount(async () => {
-		const mermaid = await getMermaid();
 		codeStore.subscribe((state) => {
 			try {
 				if (container && state && (state.updateDiagram || state.autoSync)) {
@@ -22,7 +23,7 @@
 					container.innerHTML = code;
 					delete container.dataset.processed;
 					mermaid.initialize(Object.assign({}, JSON.parse(state.mermaid)));
-					mermaid.init(undefined, container);
+					mermaid.init(container);
 					mermaid.render('graph-div', code, insertSvg);
 				}
 			} catch (e) {