From ae6070d7acef52b4bf5df1ee8936a85cf2b4ec29 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Sat, 15 May 2021 23:27:28 +0530
Subject: [PATCH] Add mermaid in HTML

---
 src/app.html            |  6 +++++-
 src/lib/Util/mermaid.ts |  9 ---------
 src/routes/edit.svelte  | 37 +++++++++++++++++--------------------
 svelte.config.js        |  3 ++-
 4 files changed, 24 insertions(+), 31 deletions(-)
 delete mode 100644 src/lib/Util/mermaid.ts
diff --git a/src/app.html b/src/app.html
index 83011ca6..60316b6b 100644
--- a/src/app.html
+++ b/src/app.html
@@ -4,7 +4,11 @@
 		<meta charset="utf-8" />
 		<link rel="icon" href="/favicon.ico" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
-
+		<script
+			src="https://cdn.jsdelivr.net/npm/mermaid@8.10.1/dist/mermaid.min.js"
+			integrity="sha256-aQCGsx3/OLAXwNyOUrAedielIQAjIrMFkcWdXMlIkGc="
+			crossorigin="anonymous"
+		></script>
 		%svelte.head%
 	</head>
 	<body>
diff --git a/src/lib/Util/mermaid.ts b/src/lib/Util/mermaid.ts
deleted file mode 100644
index ee5b14d3..00000000
--- a/src/lib/Util/mermaid.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import type { Mermaid } from 'mermaid';
-
-let mer: Mermaid;
-export const getMermaid = async (): Promise<Mermaid> => {
-	if (!mer) {
-		mer = await import('mermaid');
-	}
-	return mer;
-};
diff --git a/src/routes/edit.svelte b/src/routes/edit.svelte
index 7b2e018c..09bbd97a 100644
--- a/src/routes/edit.svelte
+++ b/src/routes/edit.svelte
@@ -1,20 +1,17 @@
-<script context="module">
-	export const ssr = false;
-	// import mermaid from 'mermaid';
-</script>
-
 <script lang="ts">
 	import Editor from '$lib/Editor/index.svelte';
 	import View from '$lib/View/index.svelte';
 	import Card from '$lib/Card/index.svelte';
 	import Tabs from '$lib/Tabs/index.svelte';
+	import History from '$lib/History/index.svelte';
 	import { initURLSubscription, updateCode, updateConfig, codeStore } from '$lib/Util/state';
 	import { loadStateFromURL } from '$lib/Util/util';
 	import { errorStore } from '$lib/Util/error';
-	import { getMermaid } from '$lib/Util/mermaid';
 	import { onMount } from 'svelte';
 	import type monaco from 'monaco-editor';
+	import type { Mermaid } from 'mermaid';
 
+	const mermaid: Mermaid = (window.mermaid as unknown) as Mermaid;
 	let selectedMode = 'code';
 	const languageMap = {
 		code: 'mermaid',
@@ -49,7 +46,6 @@
 	];
 
 	const handleCodeUpdate = async (code: string): Promise<void> => {
-		const mermaid = await getMermaid();
 		mermaid.parse(code);
 		updateCode(code, false);
 	};
@@ -107,24 +103,25 @@
 <div class="flex">
 	<div class="w-2/5 h-screen flex flex-col gap-6">
 		<Card class="h-1/2">
-			<div slot="title">
-				<div class="flex">
-					<div class="flex"><Tabs on:select={tabSelectHandler} {tabs} /></div>
-					<div class="flex-grow" />
-					<div class="flex gap-x-4 text-white">
-						{#if !$codeStore.autoSync}
-							<button on:click={syncDiagram}>↻ Sync</button>
-						{/if}
-						<label for="autoSync">
-							<input type="checkbox" name="autoSync" bind:checked={$codeStore.autoSync} />
-							Auto
-						</label>
-					</div>
+			<div slot="title" class="flex">
+				<div class="flex"><Tabs on:select={tabSelectHandler} {tabs} /></div>
+				<div class="flex-grow" />
+				<div class="flex gap-x-4 text-white">
+					{#if !$codeStore.autoSync}
+						<button class="bg-blue-500 hover:bg-blue-700 rounded px-1" on:click={syncDiagram}
+							>↻ Sync</button
+						>
+					{/if}
+					<label for="autoSync">
+						<input type="checkbox" name="autoSync" bind:checked={$codeStore.autoSync} />
+						Auto sync
+					</label>
 				</div>
 			</div>
 
 			<Editor on:update={updateHandler} {language} {text} {errorMarkers} />
 		</Card>
+		<History />
 	</div>
 
 	<div class="w-3/5 h-3/5">
diff --git a/svelte.config.js b/svelte.config.js
index 4aee00f4..74f2f3f4 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -20,7 +20,8 @@ const config = {
 			optimizeDeps: {
 				include: ['mermaid']
 			}
-		}
+		},
+		ssr: false
 	}
 };
 
