fix: mermaid import

package.json

@@ -49,7 +49,7 @@
 		"@macfja/svelte-persistent-store": "^1.1.1",
 		"analytics": "^0.7.5",
 		"js-base64": "^3.6.1",
-		"mermaid": "^8.11.0",
+		"mermaid": "^8.11.1",
 		"moment": "^2.29.1",
 		"monaco-editor": "^0.25.2",
 		"random-word-slugs": "^0.0.2"

src/app.html

@@ -19,11 +19,6 @@
 			rel="stylesheet"
 			href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
 		/>
-		<script
-			src="https://cdn.jsdelivr.net/npm/mermaid@8.11.0/dist/mermaid.min.js"
-			integrity="sha256-sVAx+v/Q7v0Q2xm5vN7h5ccSna6gaLREhG9sF8pKT6I="
-			crossorigin="anonymous"
-		></script>
 		<link
 			rel="stylesheet"
 			href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.25.2/min/vs/editor/editor.main.min.css"

src/lib/components/view.svelte

@@ -3,9 +3,8 @@
 
 	import { codeStore } from '$lib/util/state';
 	import { onMount } from 'svelte';
-	import type { Mermaid } from 'mermaid';
+	import * as mermaid from 'mermaid';
 
-	const mermaid: Mermaid = window.mermaid as unknown as Mermaid;
 	let code = '';
 	let config = '';
 	let container: HTMLDivElement;

src/routes/edit.svelte

@@ -10,13 +10,11 @@
 	import { initHandler, syncDiagram } from '$lib/util/util';
 	import { errorStore } from '$lib/util/error';
 	import { onMount } from 'svelte';
+	import * as mermaid from 'mermaid';
 	import type monaco from 'monaco-editor';
-	import type { Mermaid } from 'mermaid';
 	import type { EditorUpdateEvent, State, Tab } from '$lib/types';
 	import { base } from '$app/paths';
 
-	const mermaid: Mermaid = window.mermaid as unknown as Mermaid;
-
 	let selectedMode = 'code';
 	const languageMap = {
 		code: 'mermaid',

svelte.config.js

@@ -10,7 +10,6 @@ const config = {
 			postcss: true
 		})
 	],
-
 	kit: {
 		adapter: adapter({
 			pages: `docs${process.env['BETA'] ? '/beta' : ''}`
@@ -23,7 +22,10 @@ const config = {
 		ssr: false,
 		// hydrate the <div id="svelte"> element in src/app.html
 		target: '#svelte',
-		trailingSlash: 'ignore'
+		trailingSlash: 'ignore',
+		vite: {
+			optimizeDeps: { include: ['mermaid'] }
+		}
 	}
 };