chore: Update favicon

* 'sidv/mindmap' of https://github.com/mermaid-js/mermaid-live-editor:
  Update Browserslist

package.json

@@ -5,6 +5,7 @@
 	"license": "MIT",
 	"scripts": {
 		"dev": "vite dev",
+		"dev:force": "MERMAID_LOCAL=true yarn dev --force",
 		"dev:test": "yarn dev",
 		"build": "vite build",
 		"preview": "vite preview",
@@ -26,7 +27,6 @@
 		"@sveltejs/kit": "1.0.0-next.511",
 		"@testing-library/jest-dom": "5.16.5",
 		"@testing-library/svelte": "3.2.2",
-		"@types/mermaid": "9.1.0",
 		"@types/pako": "2.0.0",
 		"@types/uuid": "8.3.4",
 		"@typescript-eslint/eslint-plugin": "5.39.0",
@@ -69,7 +69,7 @@
 		"analytics-plugin-plausible": "0.0.6",
 		"daisyui": "2.31.0",
 		"js-base64": "3.7.2",
-		"mermaid": "9.1.7",
+		"mermaid": "9.2.0-rc6",
 		"moment": "2.29.4",
 		"monaco-editor": "0.34.0",
 		"monaco-mermaid": "1.0.6",

src/app.html

@@ -11,7 +11,9 @@
 		<meta
 			name="description"
 			content="Simplify documentation and avoid heavy tools. Open source Visio Alternative. Commonly used for explaining your code! Mermaid is a simple markdown-like script language for generating charts from text via javascript." />
-		<link rel="icon" type="image/png" href="%sveltekit.assets%/favicon.png" />
+		<link rel="icon" type="image/png" href="%sveltekit.assets%/favicon.svg" />
+		<link rel="mask-icon" href="%sveltekit.assets%/favicon.svg" color="#000000" />
+		<meta name="theme-color" content="#6366F1" />
 		<link rel="manifest" href="%sveltekit.assets%/manifest.json" />
 		<link
 			rel="stylesheet"
@@ -28,8 +30,8 @@
 		<script>
 			var require = {
 				paths: {
-					vs: "https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.0/min/vs",
-				},
+					vs: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.0/min/vs'
+				}
 			};
 		</script>
 		<script

src/env.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+	readonly MERMAID_RENDERER_URL: string;
+	readonly MERMAID_KROKI_RENDERER_URL: string;
+	readonly MERMAID_CDN_URL: string;
+	readonly MERMAID_BASE_URL: string;
+	readonly MERMAID_LOCAL: boolean;
+	// more env variables...
+}
+
+interface ImportMeta {
+	readonly env: ImportMetaEnv;
+}

src/lib/components/actions.svelte

@@ -1,12 +1,13 @@
 <script lang="ts">
 	import { browser } from '$app/environment';
 	import Card from '$lib/components/card/card.svelte';
-	import { krokiRendererUrl, rendererUrl } from '$lib/util/env';
+	import { env } from '$lib/util/env';
 	import { pakoSerde } from '$lib/util/serde';
 	import { stateStore } from '$lib/util/state';
 	import { logEvent } from '$lib/util/stats';
 	import { toBase64 } from 'js-base64';
 	import moment from 'moment';
+	const { krokiRendererUrl, rendererUrl } = env;
 
 	type Exporter = (context: CanvasRenderingContext2D, image: HTMLImageElement) => () => void;
 

src/lib/components/editor.svelte

@@ -53,15 +53,15 @@
 	};
 
 	const loadMonaco = async () => {
+		console.log('Loading Monaco...');
 		let i = 0;
 		while (i++ < 500) {
-			try {
 			// @ts-ignore : This is a hack to handle a svelte-kit error when importing monaco.
 			Monaco = window.monaco;
+			if (Monaco !== undefined) {
 				return;
-			} catch {
-				await new Promise((r) => setTimeout(r, 100));
 			}
+			await new Promise((r) => setTimeout(r, 100));
 		}
 		alert('Loading Monaco Editor failed. Please try refreshing the page.');
 	};

src/lib/components/view.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
 	import { inputStateStore, stateStore, updateCodeStore } from '$lib/util/state';
 	import { onMount } from 'svelte';
-	import mermaid from 'mermaid';
 	import panzoom from 'svg-pan-zoom';
 	import type { State, ValidatedState } from '$lib/types';
 	import { logEvent } from '$lib/util/stats';
 	import { cmdKey } from '$lib/util/util';
+	import { render as renderDiagram } from '$lib/util/mermaid';
 
 	let code = '';
 	let config = '';
@@ -50,7 +50,7 @@
 		});
 	};
 
-	const handleStateChange = (state: ValidatedState) => {
+	const handleStateChange = async (state: ValidatedState) => {
 		if (state.error !== undefined) {
 			error = true;
 			return;
@@ -72,16 +72,23 @@
 				panZoomEnabled = state.panZoom;
 				const scroll = view.parentElement.scrollTop;
 				delete container.dataset.processed;
-				mermaid.initialize(Object.assign({}, JSON.parse(state.mermaid)));
-				mermaid.render('graph-div', code, (svgCode) => {
+				await renderDiagram(
+					Object.assign({}, JSON.parse(state.mermaid)),
+					code,
+					'graph-div',
+					(svgCode, bindFunctions) => {
 						if (svgCode.length > 0) {
 							handlePanZoom(state);
 							container.innerHTML = svgCode;
 							const graphDiv = document.getElementById('graph-div');
 							graphDiv.setAttribute('height', '100%');
 							graphDiv.style.maxWidth = '100%';
+							if (bindFunctions) {
+								bindFunctions(graphDiv);
 							}
-				});
+						}
+					}
+				);
 				view.parentElement.scrollTop = scroll;
 				error = false;
 			} else if (manualUpdate) {
@@ -94,9 +101,10 @@
 			error = true;
 		}
 	};
+
 	onMount(() => {
-		stateStore.subscribe((state) => {
-			handleStateChange(state);
+		stateStore.subscribe(async (state) => {
+			await handleStateChange(state);
 		});
 		window.addEventListener('resize', () => {
 			if ($stateStore.panZoom && pzoom) {

src/lib/util/env.ts

@@ -1,4 +1,9 @@
-export const rendererUrl: string =
-	(import.meta.env.MERMAID_RENDERER_URL as string) ?? 'https://mermaid.ink';
-export const krokiRendererUrl: string =
-	(import.meta.env.MERMAID_KROKI_RENDERER_URL as string) ?? 'https://kroki.io';
+export const env = {
+	rendererUrl: import.meta.env.MERMAID_RENDERER_URL ?? 'https://mermaid.ink',
+	krokiRendererUrl: import.meta.env.MERMAID_KROKI_RENDERER_URL ?? 'https://kroki.io',
+	mermaidCDNUrl: import.meta.env.MERMAID_CDN_URL ?? 'https://unpkg.com/@mermaid-js',
+	mermaidBaseURL: import.meta.env.MERMAID_BASE_URL ?? 'http://localhost:9000',
+	useLocalMermaid: import.meta.env.MERMAID_LOCAL ?? false,
+	isDev: import.meta.env.DEV,
+	baseURL: import.meta.env.BASE_URL
+};

src/lib/util/mermaid.ts

@@ -0,0 +1,47 @@
+import mermaid from 'mermaid';
+// We need to export MermaidConfig and all related types from mermaid.
+import type { MermaidConfig } from 'mermaid/dist/config.type';
+import { env } from './env';
+const { mermaidBaseURL, mermaidCDNUrl, useLocalMermaid } = env;
+
+const getDiagramURL = (name: string, version: string): string => {
+	if (useLocalMermaid) {
+		return `${mermaidBaseURL}/${name}-detector.esm.mjs`;
+	}
+	return `${mermaidCDNUrl}/${name}@${version}/dist/${name}-detector.esm.mjs`;
+};
+
+console.log(mermaid);
+const initialize = mermaid.initializeAsync({
+	logLevel: 0,
+	lazyLoadedDiagrams: [getDiagramURL('mermaid-mindmap', '9.2.0-rc4')],
+	loadExternalDiagramsAtStartup: true
+});
+
+export const init = async () => {
+	await initialize;
+};
+
+export const render = async (
+	config: MermaidConfig,
+	code: string,
+	id: string,
+	callback: Parameters<typeof mermaid.render>[2]
+): Promise<void> => {
+	await init();
+	// Should be able to call this multiple times without any issues.
+	// await mermaid.initialize({
+	// 	...config,
+	// 	lazyLoadedDiagrams: [
+	// 		// We should make SRI mandatory for all lazy-loaded diagrams.
+	// 		'https://unpkg.com/@mermaid-js/mermaid-mindmap@9.2.0-rc2/dist/mermaid-mindmap-detector.esm.mjs'
+	// 	]
+	// });
+	console.log('Rendering', code);
+	await mermaid.mermaidAPI.renderAsync(id, code, callback);
+};
+
+export const parse = async (code: string): Promise<boolean> => {
+	await init();
+	return mermaid.parseAsync(code);
+};

src/lib/util/state.ts

@@ -3,11 +3,13 @@ import { persist, localStorage } from './persist';
 import { saveStatistics, countLines } from './stats';
 import { serializeState, deserializeState } from './serde';
 import { cmdKey } from './util';
-import mermaid from 'mermaid';
+import { parse, init } from './mermaid';
 
 import type { Readable } from 'svelte/store';
 import type { MarkerData, State, ValidatedState } from '$lib/types';
 
+void init();
+
 export const defaultState: State = {
 	code: `graph TD
     A[Christmas] -->|Get money| B(Go shopping)
@@ -42,7 +44,11 @@ const urlParseFailedState = `graph TD
 export const inputStateStore = persist(writable(defaultState), localStorage(), 'codeStore');
 
 // All internal reads should be done via stateStore, but it should not be persisted/shared externally.
-export const stateStore: Readable<ValidatedState> = derived([inputStateStore], ([state]) => {
+export const stateStore: Readable<ValidatedState> = derived(
+	[inputStateStore],
+	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+	// @ts-ignore
+	async ([state], set) => {
 		const processed: ValidatedState = {
 			...state,
 			serialized: '',
@@ -54,7 +60,7 @@ export const stateStore: Readable<ValidatedState> = derived([inputStateStore], (
 		// No changes should be done to fields part of `state`.
 		try {
 			processed.serialized = serializeState(state);
-		mermaid.parse(state.code);
+			await parse(state.code);
 			JSON.parse(state.mermaid);
 		} catch (e) {
 			processed.error = e;
@@ -75,8 +81,16 @@ export const stateStore: Readable<ValidatedState> = derived([inputStateStore], (
 				}
 			}
 		}
-	return processed;
-});
+		set(processed);
+	},
+	{
+		...get(inputStateStore),
+		serialized: '',
+		errorMarkers: [],
+		error: undefined,
+		editorMode: get(inputStateStore).editorMode ?? 'code'
+	}
+);
 
 export const loadState = (data: string): void => {
 	let state: State;

static/favicon.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 491 491" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <path d="M490.16,84.61C490.16,37.912 452.248,0 405.55,0L84.61,0C37.912,0 0,37.912 0,84.61L0,405.55C0,452.248 37.912,490.16 84.61,490.16L405.55,490.16C452.248,490.16 490.16,452.248 490.16,405.55L490.16,84.61Z" style="fill:rgb(255,54,112);"/>
+    <path d="M407.48,111.18C335.587,108.103 269.573,152.338 245.08,220C220.587,152.338 154.573,108.103 82.68,111.18C80.285,168.229 107.577,222.632 154.74,254.82C178.908,271.419 193.35,298.951 193.27,328.27L193.27,379.13L296.9,379.13L296.9,328.27C296.816,298.953 311.255,271.42 335.42,254.82C382.596,222.644 409.892,168.233 407.48,111.18Z" style="fill:white;fill-rule:nonzero;"/>
+</svg>

static/manifest.json

@@ -3,12 +3,7 @@
 	"name": "Mermaid Live Editor",
 	"icons": [
 		{
-			"src": "/icon-192.png",
-			"type": "image/png",
-			"sizes": "192x192"
-		},
-		{
-			"src": "/icon-512.png",
+			"src": "/favicon.png",
 			"type": "image/png",
 			"sizes": "512x512"
 		}

yarn.lock

@@ -410,11 +410,6 @@
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.11.tgz#d421b6c527a3037f7c84433fd2c4229e016863d3"
   integrity sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==
 
-"@types/mermaid@9.1.0":
-  version "9.1.0"
-  resolved "https://registry.yarnpkg.com/@types/mermaid/-/mermaid-9.1.0.tgz#e9ba511d8a6793749d6be84f86325f0f58553154"
-  integrity sha512-rc8QqhveKAY7PouzY/p8ljS+eBSNCv7o79L97RSub/Ic2SQ34ph1Ng3s8wFLWVjvaEt6RLOWtSCsgYWd95NY8A==
-
 "@types/node@*":
   version "15.0.2"
   resolved "https://registry.npmjs.org/@types/node/-/node-15.0.2.tgz"
@@ -1024,9 +1019,9 @@ caniuse-api@^3.0.0:
     lodash.uniq "^4.5.0"
 
 caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001370, caniuse-lite@^1.0.30001400, caniuse-lite@^1.0.30001407:
-  version "1.0.30001419"
-  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001419.tgz"
-  integrity sha512-aFO1r+g6R7TW+PNQxKzjITwLOyDhVRLjW0LcwS/HCZGUUKTGNp9+IwLC4xyDSZBygVL/mxaFR3HIV6wEKQuSzw==
+  version "1.0.30001420"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001420.tgz"
+  integrity sha512-OnyeJ9ascFA9roEj72ok2Ikp7PHJTKubtEJIQ/VK3fdsS50q4KWy+Z5X0A1/GswEItKX0ctAp8n4SYDE7wTu6A==
 
 caseless@~0.12.0:
   version "0.12.0"
@@ -2733,6 +2728,11 @@ extsprintf@^1.2.0:
   resolved "https://registry.npmjs.org/extsprintf/-/extsprintf-1.4.0.tgz"
   integrity sha1-4mifjzVvrWLMplo6kcXfX5VRaS8=
 
+fast-clone@^1.5.13:
+  version "1.5.13"
+  resolved "https://registry.yarnpkg.com/fast-clone/-/fast-clone-1.5.13.tgz#7fe17542ae1c872e71bf80d177d00c11f51c2ea7"
+  integrity sha512-0ez7coyFBQFjZtId+RJqJ+EQs61w9xARfqjqK0AD9vIUkSxWD4HvPt80+5evebZ1tTnv1GYKrPTipx7kOW5ipA==
+
 fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   version "3.1.3"
   resolved "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz"
@@ -3665,20 +3665,24 @@ merge2@^1.3.0, merge2@^1.4.1:
   resolved "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz"
   integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
 
-mermaid@9.1.7:
-  version "9.1.7"
-  resolved "https://registry.yarnpkg.com/mermaid/-/mermaid-9.1.7.tgz#e24de9b2d36c8cb25a09d72ffce966941b24bd6e"
-  integrity sha512-MRVHXy5FLjnUQUG7YS3UN9jEN6FXCJbFCXVGJQjVIbiR6Vhw0j/6pLIjqsiah9xoHmQU6DEaKOvB3S1g/1nBPA==
+mermaid@9.2.0-rc6:
+  version "9.2.0-rc6"
+  resolved "https://registry.yarnpkg.com/mermaid/-/mermaid-9.2.0-rc6.tgz#8c8ab4403c5bb9eca73cb8f1aba6fbd00fd8ede9"
+  integrity sha512-zrbaufHxlWs/i81BZePSh3PtQ/FpS3koY3cX9MS2bclchLqXrzO6wJ5S31Tl95j+7fMzV02HFu3sexSRfJOkhQ==
   dependencies:
     "@braintree/sanitize-url" "^6.0.0"
     d3 "^7.0.0"
     dagre "^0.8.5"
     dagre-d3 "^0.6.4"
     dompurify "2.4.0"
+    fast-clone "^1.5.13"
     graphlib "^2.1.8"
     khroma "^2.0.0"
-    moment-mini "2.24.0"
-    stylis "^4.0.10"
+    lodash "^4.17.21"
+    moment-mini "^2.24.0"
+    non-layered-tidy-tree-layout "^2.0.2"
+    stylis "^4.1.2"
+    uuid "^9.0.0"
 
 micromatch@^4.0.4, micromatch@^4.0.5:
   version "4.0.5"
@@ -3739,10 +3743,10 @@ mkdirp@^0.5.1, mkdirp@~0.5.1:
   dependencies:
     minimist "^1.2.5"
 
-moment-mini@2.24.0:
-  version "2.24.0"
-  resolved "https://registry.yarnpkg.com/moment-mini/-/moment-mini-2.24.0.tgz#fa68d98f7fe93ae65bf1262f6abb5fb6983d8d18"
-  integrity sha512-9ARkWHBs+6YJIvrIp0Ik5tyTTtP9PoV0Ssu2Ocq5y9v8+NOOpWiRshAp8c4rZVWTOe+157on/5G+zj5pwIQFEQ==
+moment-mini@^2.24.0:
+  version "2.29.4"
+  resolved "https://registry.yarnpkg.com/moment-mini/-/moment-mini-2.29.4.tgz#cbbcdc58ce1b267506f28ea6668dbe060a32758f"
+  integrity sha512-uhXpYwHFeiTbY9KSgPPRoo1nt8OxNVdMVoTBYHfSEKeRkIkwGpO+gERmhuhBtzfaeOyTkykSrm2+noJBgqt3Hg==
 
 moment@2.29.4:
   version "2.29.4"
@@ -3812,6 +3816,11 @@ node-releases@^2.0.6:
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.6.tgz#8a7088c63a55e493845683ebf3c828d8c51c5503"
   integrity sha512-PiVXnNuFm5+iYkLBNeq5211hvO38y63T0i2KKh2KnUs3RpzJ+JtODFjkD8yjLwnDkTYF1eKXheUwdssR+NRZdg==
 
+non-layered-tidy-tree-layout@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/non-layered-tidy-tree-layout/-/non-layered-tidy-tree-layout-2.0.2.tgz#57d35d13c356643fc296a55fb11ac15e74da7804"
+  integrity sha512-gkXMxRzUH+PB0ax9dUN0yYF0S25BqeAYqhgMaLUFmpXLEk7Fcu8f4emJuOAY0V8kjDICxROIKsTAKsV/v355xw==
+
 nopt@~4.0.1:
   version "4.0.3"
   resolved "https://registry.npmjs.org/nopt/-/nopt-4.0.3.tgz"
@@ -4906,10 +4915,10 @@ stylehacks@^5.1.0:
     browserslist "^4.16.6"
     postcss-selector-parser "^6.0.4"
 
-stylis@^4.0.10:
-  version "4.0.10"
-  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.0.10.tgz#446512d1097197ab3f02fb3c258358c3f7a14240"
-  integrity sha512-m3k+dk7QeJw660eIKRRn3xPF6uuvHs/FFzjX3HQ5ove0qYsiygoAhwn5a3IYKaZPo5LrYD0rfVmtv1gNY1uYwg==
+stylis@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.1.2.tgz#870b3c1c2275f51b702bb3da9e94eedad87bba41"
+  integrity sha512-Nn2CCrG2ZaFziDxaZPN43CXqn+j7tcdjPFCkRBkFue8QYXC2HdEwnw5TCBo4yQZ2WxKYeSi0fdoOrtEqgDrXbA==
 
 supports-color@^2.0.0:
   version "2.0.0"
@@ -5232,7 +5241,7 @@ util-deprecate@^1.0.2:
   resolved "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz"
   integrity sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=
 
-uuid@9.0.0:
+uuid@9.0.0, uuid@^9.0.0:
   version "9.0.0"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-9.0.0.tgz#592f550650024a38ceb0c562f2f6aa435761efb5"
   integrity sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg==