Fix restore history

src/lib/components/card/card.svelte

@@ -9,7 +9,7 @@
 	$: isOpen = isCloseable ? isOpen : true;
 </script>
 
-<div class={`bg-white rounded overflow-hidden shadow m-2 flex-grow flex flex-col `}>
+<div class="bg-white rounded overflow-hidden shadow m-2 flex-grow flex flex-col">
 	<div class="bg-indigo-400 border-gray-400 p-2 flex-none" on:click={() => (isOpen = !isOpen)}>
 		<div class="flex justify-between">
 			<Tabs on:select {tabs} bind:isOpen {title} {isCloseable} />

src/lib/components/editor/editor.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { EditorEvents } from '$lib/types';
+	import { codeStore } from '$lib/util/state';
 	import type monaco from 'monaco-editor';
 	import { createEventDispatcher, onMount } from 'svelte';
 	import { initEditor } from './util';
@@ -20,9 +21,15 @@
 		overviewRulerLanes: 0
 	};
 	export let errorMarkers: monaco.editor.IMarkerData[] = [];
+	let oldText = text;
 	$: Monaco?.editor.setModelLanguage(editor.getModel(), language);
-	$: editor?.setValue(text);
 	$: {
+		if (text !== oldText) {
+			if ($codeStore.updateEditor) {
+				editor?.setValue(text);
+			}
+			oldText = text;
+		}
 		Monaco?.editor.setModelMarkers(editor.getModel(), 'test', errorMarkers);
 	}
 
@@ -35,8 +42,9 @@
 
 		editor = Monaco.editor.create(divEl, editorOptions);
 		editor.onDidChangeModelContent(async () => {
+			text = editor.getValue();
 			dispatch('update', {
-				text: editor.getValue()
+				text
 			});
 		});
 

src/lib/components/history/history.svelte

@@ -73,14 +73,18 @@
 
 <Card on:select={tabSelectHandler} bind:isOpen {tabs} title="History">
 	<div slot="actions">
-		<button class="btn" on:click|stopPropagation={() => saveHistory()} title="Save current state"
-			><i class="far fa-save" /></button>
 		<button
+			id="saveHistory"
+			class="btn"
+			on:click|stopPropagation={() => saveHistory()}
+			title="Save current state"><i class="far fa-save" /></button>
+		<button
+			id="clearHistory"
 			class="btn text-red-400"
 			on:click|stopPropagation={() => clearHistory()}
 			title="Delete all saved states"><i class="fas fa-trash-alt" /></button>
 	</div>
-	<ul class="p-2 space-y-2 overflow-auto h-56">
+	<ul class="p-2 space-y-2 overflow-auto h-56" id="historyList">
 		{#if $historyStore.length > 0}
 			{#each $historyStore as { state, time, name }}
 				<li class="rounded p-2 shadow flex-col">

src/routes/edit.svelte

@@ -13,7 +13,7 @@
 	import type monaco from 'monaco-editor';
 	import type { Mermaid } from 'mermaid';
 	import { goto } from '$app/navigation';
-	import type { EditorUpdateEvent, Tab } from '$lib/types';
+	import type { EditorUpdateEvent, State, Tab } from '$lib/types';
 
 	const mermaid: Mermaid = (window.mermaid as unknown) as Mermaid;
 
@@ -27,16 +27,20 @@
 	let errorMarkers: monaco.editor.IMarkerData[] = [];
 	$: language = languageMap[selectedMode];
 	$: {
-		if ($codeStore.updateEditor) {
-			if (selectedMode === 'code') {
-				text = $codeStore.code;
-			} else {
-				text = $codeStore.mermaid;
-			}
+		if (selectedMode === 'code') {
+			text = $codeStore.code;
+		} else {
+			text = $codeStore.mermaid;
 		}
 	}
-	onMount(initHandler);
 
+	codeStore.subscribe((state: State) => {
+		console.log(state);
+
+		if (state.updateEditor) {
+			text = selectedMode === 'code' ? state.code : state.mermaid;
+		}
+	});
 	const tabSelectHandler = (message: CustomEvent<Tab>) => {
 		$codeStore.updateEditor = true;
 		selectedMode = message.detail.id;
@@ -97,6 +101,8 @@
 	const viewDiagram = async () => {
 		await goto(`/view#${$base64State}`, { replaceState: true });
 	};
+
+	onMount(initHandler);
 </script>
 
 <div class="h-full flex flex-col overflow-hidden bg-gray-100">
@@ -118,7 +124,7 @@
 					</label>
 				</div>
 
-				<Editor on:update={updateHandler} {language} {text} {errorMarkers} />
+				<Editor on:update={updateHandler} {language} bind:text {errorMarkers} />
 			</Card>
 
 			<div class="flex-1">