Update tailwind.config.cjs

.eslintrc.cjs

@@ -4,7 +4,7 @@ module.exports = {
 	extends: [
 		'eslint:recommended',
 		'plugin:@typescript-eslint/recommended',
-		'plugin:@typescript-eslint/recommended-requiring-type-checking',
+		// 'plugin:@typescript-eslint/recommended-requiring-type-checking',
 		'prettier'
 	],
 	plugins: ['svelte3', 'tailwindcss', '@typescript-eslint', 'es'],

.vscode/settings.json

@@ -1,4 +0,0 @@
-{
-	"editor.formatOnSave": true,
-	"cSpell.words": ["pako", "Serde", "serdes"]
-}

Dockerfile

@@ -6,7 +6,7 @@
 # Stop               : press ctrl + c 
 #                                     or 
 #                                        docker stop mermaid-live-editor
-FROM node:17.3.1 as mermaid-live-editor-builder 
+FROM node:17.2.0 as mermaid-live-editor-builder 
 COPY --chown=node:node . /home
 WORKDIR /home
 RUN yarn install

README.md

@@ -32,11 +32,6 @@ docker run --publish 8000:80 ghcr.io/mermaid-js/mermaid-live-editor
 When building, Set the Environment variable MERMAID_RENDERER_URL to the rendering service.
 Default is `https://mermaid.ink`
 
-### To configure Kroki Instance URL
-
-When building, Set the Environment variable MERMAID_KROKI_RENDERER_URL to your Kroki instance.
-Default is `https://kroki.io`
-
 ### Development
 
 ```bash

cypress/integration/loadSite.spec.ts

@@ -60,21 +60,20 @@ describe('Site Loads', () => {
 		cy.getLocalStorage('codeStore').snapshot();
 	});
 
-	// Disabled temporarily. Should be enabled after the issue is fixed in Mermaid.
-	// it('should prevent setting the "securityLevel" option via URL', () => {
-	// 	const b64State = toBase64(
-	// 		`{"code":"graph TD\\nA[\\"<img src='https://via.placeholder.com/64' width=64 />\\"]","mermaid":"{\\"securityLevel\\": \\"loose\\", \\"theme\\": \\"forest\\"}","updateEditor":true,"autoSync":true,"updateDiagram":true}`,
-	// 		true
-	// 	);
-	// 	cy.on('window:confirm', () => true);
-	// 	cy.visit(`/edit#${b64State}`);
-	// 	cy.contains('Config').click();
-	// 	cy.contains('forest');
-	// 	cy.contains('securityLevel').should('not.exist');
-	// 	cy.get('#view').find('img').should('not.exist');
-	// 	cy.get('#view').contains('<img');
-	// 	cy.get('#view').contains(`src='https://via.placeholder.com/64'`);
-	// });
+	it('should prevent setting the "securityLevel" option via URL', () => {
+		const b64State = toBase64(
+			`{"code":"graph TD\\nA[\\"<img src='https://via.placeholder.com/64' width=64 />\\"]","mermaid":"{\\"securityLevel\\": \\"loose\\", \\"theme\\": \\"forest\\"}","updateEditor":true,"autoSync":true,"updateDiagram":true}`,
+			true
+		);
+		cy.on('window:confirm', () => true);
+		cy.visit(`/edit#${b64State}`);
+		cy.contains('Config').click();
+		cy.contains('forest');
+		cy.contains('securityLevel').should('not.exist');
+		cy.get('#view').find('img').should('not.exist');
+		cy.get('#view').contains('<img');
+		cy.get('#view').contains(`src='https://via.placeholder.com/64'`);
+	});
 
 	it('should allow persisting "securityLevel" using confirm dialogue', () => {
 		const b64State = toBase64(
@@ -93,31 +92,4 @@ describe('Site Loads', () => {
 		cy.visit('/#/edit/eyJjb2RlIjoiZ3JhcGggVERcbiAg');
 		cy.contains('Please Click here to Raise an issue in github.');
 	});
-
-	it('should load uncompressed URL', () => {
-		cy.visit(
-			'/edit/#eyJjb2RlIjoiZ3JhcGggVERcbiAgICBBW05ldyBZZWFyXSAtLT58R2V0IG1vbmV5fCBCKEdvIHNob3BwaW5nKVxuICAgIEIgLS0-IEN7TGV0IG1lIHRoaW5rfVxuICAgIEMgLS0-fE9uZXwgRFtMYXB0b3BdXG4gICAgQyAtLT58VHdvfCBFW2lQaG9uZV1cbiAgICBDIC0tPnxUaHJlZXwgRltmYTpmYS1jYXIgQ2FyXSIsIm1lcm1haWQiOiJ7XG4gIFwidGhlbWVcIjogXCJkZWZhdWx0XCJcbn0iLCJ1cGRhdGVFZGl0b3IiOmZhbHNlLCJhdXRvU3luYyI6dHJ1ZSwidXBkYXRlRGlhZ3JhbSI6ZmFsc2V9'
-		);
-		cy.contains('New Year');
-		cy.visit(
-			'/edit#eyJjb2RlIjoiY2xhc3NEaWFncmFtXG4gICAgQW5pbWFsIDx8LS0gRHVja1xuICAgIEFuaW1hbCA8fC0tIEZpc2hcbiAgICBBbmltYWwgPHwtLSBaZWJyYVxuICAgIEFuaW1hbCA6ICtpbnQgYWdlXG4gICAgQW5pbWFsIDogK1N0cmluZyBnZW5kZXJcbiAgICBBbmltYWw6ICtpc01hbW1hbCgpXG4gICAgQW5pbWFsOiArbWF0ZSgpXG4gICAgY2xhc3MgRHVja3tcbiAgICAgICtTdHJpbmcgYmVha0NvbG9yXG4gICAgICArc3dpbSgpXG4gICAgICArcXVhY2soKVxuICAgIH1cbiAgICBjbGFzcyBGaXNoe1xuICAgICAgLWludCBzaXplSW5GZWV0XG4gICAgICAtY2FuRWF0KClcbiAgICB9XG4gICAgY2xhc3MgWmVicmF7XG4gICAgICArYm9vbCBpc193aWxkXG4gICAgICArcnVuKClcbiAgICB9XG4gICAgICAgICAgICAiLCJtZXJtYWlkIjoie1xuICBcInRoZW1lXCI6IFwiZGFya1wiXG59IiwidXBkYXRlRWRpdG9yIjpmYWxzZSwiYXV0b1N5bmMiOnRydWUsInVwZGF0ZURpYWdyYW0iOmZhbHNlfQ'
-		);
-		cy.contains('Animal');
-		cy.visit(
-			'/edit/#base64:eyJjb2RlIjoiZ3JhcGggVERcbiAgICBBW05ldyBZZWFyXSAtLT58R2V0IG1vbmV5fCBCKEdvIHNob3BwaW5nKVxuICAgIEIgLS0-IEN7TGV0IG1lIHRoaW5rfVxuICAgIEMgLS0-fE9uZXwgRFtMYXB0b3BdXG4gICAgQyAtLT58VHdvfCBFW2lQaG9uZV1cbiAgICBDIC0tPnxUaHJlZXwgRltmYTpmYS1jYXIgQ2FyXSIsIm1lcm1haWQiOiJ7XG4gIFwidGhlbWVcIjogXCJkZWZhdWx0XCJcbn0iLCJ1cGRhdGVFZGl0b3IiOmZhbHNlLCJhdXRvU3luYyI6dHJ1ZSwidXBkYXRlRGlhZ3JhbSI6ZmFsc2V9'
-		);
-		cy.contains('New Year');
-	});
-
-	it('should load compressed URL', () => {
-		cy.visit(
-			'/edit#pako:eNpVkM2KwkAQhF-l6dMK5gVyEDRxvYi7sF6WjIcm0zqDzg_jBJEk725Hd2G3Tw31VVFUj23QjCWeEkUD-1p5kFs2O77BN1M6QFEshg1ncMHzfYDV2ybA1YQYrT_NXvhqgqDqtxPGkI315_ElVU__h-cB6mZLMYd4-Kvsb2GAdWM_jcT_V0xicb03RyqPVLSUoJI-OEfHyZHV0rqfDAqzYccKS3k1pbNC5Ufhuqgp81rbHBJKxuXKc6Quh6-7b7HMqeNfqLYkC7gfanwAlW1ZvQ'
-		);
-		cy.contains('New Year');
-		cy.visit(
-			'/edit#pako:eNptkU1PwzAMhv9K5BOI9Q9EXBDbJA477YYqITcxndV8QD40weh_Jy1rGR0-OY_tV2_sEyivCSQogzGuGduAtnaixINji0bcf1WVWGfVXdMtx8M1faYm4B8sxR27JLClJd6nwK4VLTlN4bI4jMQd2pLe3C4KFhNNcLQ92jv9ADGLNoTdozc-zIV4ZDsNlud7RtVN7_5Sb_jYrFcN3iN_0pPbEqUZK3QbTP_Ojyv4NdR4bwTHlyMbPcOQ3WJ2CliBpWCRdbnLqFJDOpClGmRJNYauhtr1pS-_6bKMjebkA8hXNJFWgDn5_YdTIFPINDWdb3vu6r8BaWOZRQ'
-		);
-		cy.reload();
-		cy.contains('Animal');
-	});
 });

cypress/snapshots.js

@@ -16,7 +16,7 @@ module.exports = {
       "1": "{\"code\":\"graph TD\\n    A[Party] -->|Get money| B(Go shopping!!)\\n    \",\"mermaid\":\"{\\n  \\\"theme\\\": \\\"forest\\\",\\n  \\\"test\\\": \\\"hello world\\\"\\n}\",\"updateEditor\":false,\"autoSync\":true,\"updateDiagram\":true,\"loader\":{\"type\":\"files\",\"config\":{\"codeURL\":\"https://gist.githubusercontent.com/sidharthv96/6268a23e673a533dcb198f241fd7012a/raw/4eb03887e6a41397e80bdcdbf94017c498f8f1e2/code.mmd\",\"configURL\":\"https://gist.githubusercontent.com/sidharthv96/6268a23e673a533dcb198f241fd7012a/raw/4eb03887e6a41397e80bdcdbf94017c498f8f1e2/config.json\"}}}"
     }
   },
-  "__version": "9.2.0",
+  "__version": "8.5.0",
   "Auto sync tests": {
     "should dim diagram when code is edited": {
       "1": "{\"code\":\"graph TD\\n    A[Christmas] -->|Get money| B(Go shopping)\\n    B --> C{Let me think}\\n    C -->|One| D[Laptop]\\n    C -->|Two| E[iPhone]\\n    C -->|Three| F[fa:fa-car Car]\\n    C --> Test\",\"mermaid\":\"{\\n  \\\"theme\\\": \\\"default\\\"\\n}\",\"updateEditor\":false,\"autoSync\":false,\"updateDiagram\":false}"

package.json

@@ -15,16 +15,15 @@
 	},
 	"devDependencies": {
 		"@cypress/snapshot": "^2.1.7",
-		"@sveltejs/adapter-static": "1.0.0-next.26",
-		"@sveltejs/kit": "1.0.0-next.232",
+		"@sveltejs/adapter-static": "1.0.0-next.22",
+		"@sveltejs/kit": "1.0.0-next.202",
 		"@types/mermaid": "^8.2.7",
-		"@types/pako": "^1.0.3",
 		"@typescript-eslint/eslint-plugin": "^4.33.0",
 		"@typescript-eslint/parser": "^4.33.0",
-		"autoprefixer": "^10.4.2",
+		"autoprefixer": "^10.4.0",
 		"chai": "^4.3.4",
-		"cssnano": "^5.0.15",
-		"cypress": "9.3.1",
+		"cssnano": "^5.0.13",
+		"cypress": "9.1.1",
 		"cypress-localstorage-commands": "^1.6.1",
 		"eslint": "^7.32.0",
 		"eslint-config-prettier": "^8.1.0",
@@ -32,19 +31,19 @@
 		"eslint-plugin-es": "^4.1.0",
 		"eslint-plugin-mocha": "^10.0.3",
 		"eslint-plugin-postcss-modules": "^2.0.0",
-		"eslint-plugin-svelte3": "^3.4.0",
-		"eslint-plugin-tailwindcss": "^3.3.0",
+		"eslint-plugin-svelte3": "^3.2.1",
+		"eslint-plugin-tailwindcss": "^1.17.2",
 		"husky": "^7.0.4",
-		"lint-staged": "^12.2.1",
-		"mocha": "^9.1.4",
-		"node-html-parser": "^5.2.0",
+		"lint-staged": "^12.1.2",
+		"mocha": "^9.1.3",
+		"node-html-parser": "^5.1.0",
 		"postcss": "^8.4.5",
-		"postcss-load-config": "^3.1.1",
+		"postcss-load-config": "^3.1.0",
 		"prettier": "~2.5.1",
-		"prettier-plugin-svelte": "^2.6.0",
-		"svelte": "^3.46.2",
-		"svelte-preprocess": "^4.10.2",
-		"tailwindcss": "^3.0.13",
+		"prettier-plugin-svelte": "^2.5.1",
+		"svelte": "^3.44.3",
+		"svelte-preprocess": "^4.10.0",
+		"tailwindcss": "^3.0.5",
 		"tslib": "^2.3.1",
 		"typescript": "^4.5.4"
 	},
@@ -52,13 +51,12 @@
 	"dependencies": {
 		"@analytics/google-analytics": "^0.5.3",
 		"@macfja/svelte-persistent-store": "^1.2.0",
-		"analytics": "^0.7.21",
-		"daisyui": "1.24.3",
+		"analytics": "^0.7.19",
+		"daisyui": "1.16.5",
 		"js-base64": "^3.7.2",
-		"mermaid": "8.13.9",
+		"mermaid": "8.13.5",
 		"moment": "^2.29.1",
 		"monaco-editor": "^0.31.1",
-		"pako": "2.0.4",
 		"random-word-slugs": "^0.1.6"
 	},
 	"lint-staged": {

src/hooks.ts

@@ -1,9 +0,0 @@
-import type { Handle } from '@sveltejs/kit/types/hooks';
-
-export const handle: Handle = async ({ request, resolve }) => {
-	const response = await resolve(request, {
-		ssr: false
-	});
-
-	return response;
-};

src/lib/components/actions.svelte

@@ -2,9 +2,8 @@
 	import { browser } from '$app/env';
 
 	import Card from '$lib/components/card/card.svelte';
-	import { krokiRendererUrl, rendererUrl } from '$lib/util/env';
-	import { pakoSerde } from '$lib/util/serde';
-	import { serializedState, codeStore } from '$lib/util/state';
+	import { rendererUrl } from '$lib/util/env';
+	import { base64State, codeStore } from '$lib/util/state';
 	import { toBase64 } from 'js-base64';
 	import moment from 'moment';
 
@@ -18,7 +17,7 @@
 		}
 		const svgString = svg.outerHTML
 			.replaceAll('<br>', '<br/>')
-			.replaceAll(/<img([^>]*)>/g, (m, g: string) => `<img ${g} />`);
+			.replaceAll(/<img([^>]*)>/g, (m, g) => `<img ${g} />`);
 		return toBase64(svgString);
 	};
 
@@ -79,7 +78,7 @@
 			canvas.toBlob((blob) => {
 				try {
 					// @ts-ignore: https://github.com/microsoft/TypeScript-DOM-lib-generator/pull/1004/files
-					void navigator.clipboard.write([
+					navigator.clipboard.write([
 						/* eslint-disable no-undef */
 						// @ts-ignore: https://github.com/microsoft/TypeScript/issues/43821
 						new ClipboardItem({
@@ -109,7 +108,7 @@
 	};
 
 	const onCopyMarkdown = () => {
-		(document.getElementById('markdown') as HTMLInputElement).select();
+		document.getElementById('markdown').select();
 		document.execCommand('Copy');
 	};
 
@@ -130,7 +129,6 @@
 
 	let iUrl: string;
 	let svgUrl: string;
-	let krokiUrl: string;
 	let mdCode: string;
 	let imagemodeselected = 'auto';
 	let userimagesize = 1080;
@@ -139,10 +137,14 @@
 	if (browser && ['mermaid.live', 'netlify'].some((path) => window.location.host.includes(path))) {
 		isNetlify = true;
 	}
-	serializedState.subscribe((encodedState: string) => {
-		iUrl = `${rendererUrl}/img/${encodedState}`;
-		svgUrl = `${rendererUrl}/svg/${encodedState}`;
-		krokiUrl = `${krokiRendererUrl}/mermaid/svg/${pakoSerde.serialize($codeStore.code)}`;
+	base64State.subscribe((encodedState: string) => {
+		const stateCopy = JSON.parse(JSON.stringify($codeStore));
+		if (typeof stateCopy.mermaid === 'string') {
+			stateCopy.mermaid = JSON.parse(stateCopy.mermaid);
+		}
+		const b64Code = toBase64(JSON.stringify(stateCopy), true);
+		iUrl = `${rendererUrl}/img/${b64Code}`;
+		svgUrl = `${rendererUrl}/svg/${b64Code}`;
 		mdCode = `[![](${iUrl})](${window.location.protocol}//${window.location.host}${window.location.pathname}#${encodedState})`;
 	});
 </script>
@@ -166,9 +168,6 @@
 		<button class="action-btn flex-auto">
 			<a target="_blank" href={svgUrl}><i class="fas fa-external-link-alt mr-2" /> SVG</a>
 		</button>
-		<button class="action-btn flex-auto">
-			<a target="_blank" href={krokiUrl}><i class="fas fa-external-link-alt mr-2" /> Kroki</a>
-		</button>
 
 		<div class="flex gap-2 items-center">
 			PNG size

src/lib/components/preset.svelte

@@ -69,6 +69,24 @@
           ORDER ||--|{ ORDER-ITEM : includes
           PRODUCT-CATEGORY ||--|{ PRODUCT : contains
           PRODUCT ||--o{ ORDER-ITEM : "ordered in"
+            `,
+		'Git Graph': `gitGraph:
+options
+{
+    "nodeSpacing": 150,
+    "nodeRadius": 10
+}
+end
+commit
+branch newbranch
+checkout newbranch
+commit
+commit
+checkout master
+commit
+commit
+merge newbranch
+
             `,
 		'User Journey': `  journey
     title My working day

src/lib/util/env.ts

@@ -1,4 +1 @@
-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 rendererUrl = import.meta.env.MERMAID_RENDERER_URL ?? 'https://mermaid.ink';

src/lib/util/fileLoaders/gist.ts

@@ -5,108 +5,14 @@ import type { State } from '$lib/types';
 import { defaultState } from '../state';
 import { addHistoryEntry } from '../../components/history/history';
 
-export interface GistResponse {
-	url: string;
-	forks_url: string;
-	commits_url: string;
-	id: string;
-	node_id: string;
-	git_pull_url: string;
-	git_push_url: string;
-	html_url: string;
-	files: Files;
-	public: boolean;
-	created_at: string;
-	updated_at: string;
-	description: string;
-	comments: number;
-	user: any;
-	comments_url: string;
-	owner: Owner;
-	fork_of: any;
-	forks: any[];
-	history: History[];
-	truncated: boolean;
-}
-
-export interface Files {
-	[key: string]: File;
-}
-
-export interface File {
-	filename: string;
-	type: string;
-	language: any;
-	raw_url: string;
-	size: number;
-	truncated: boolean;
-	content: string;
-}
-
-export interface Owner {
-	login: string;
-	id: number;
-	node_id: string;
-	avatar_url: string;
-	gravatar_id: string;
-	url: string;
-	html_url: string;
-	followers_url: string;
-	following_url: string;
-	gists_url: string;
-	starred_url: string;
-	subscriptions_url: string;
-	organizations_url: string;
-	repos_url: string;
-	events_url: string;
-	received_events_url: string;
-	type: string;
-	site_admin: boolean;
-}
-
-export interface History {
-	user: User;
-	version: string;
-	committed_at: string;
-	change_status: ChangeStatus;
-	url: string;
-}
-
-export interface User {
-	login: string;
-	id: number;
-	node_id: string;
-	avatar_url: string;
-	gravatar_id: string;
-	url: string;
-	html_url: string;
-	followers_url: string;
-	following_url: string;
-	gists_url: string;
-	starred_url: string;
-	subscriptions_url: string;
-	organizations_url: string;
-	repos_url: string;
-	events_url: string;
-	received_events_url: string;
-	type: string;
-	site_admin: boolean;
-}
-
-export interface ChangeStatus {
-	total: number;
-	additions: number;
-	deletions: number;
-}
-
 const codeFileName = 'code.mmd';
 const configFileName = 'config.json';
 
-const isValidGist = (files: Files): boolean => {
+const isValidGist = (files: any): boolean => {
 	return codeFileName in files;
 };
 
-const getFileContent = async (file: File): Promise<string> => {
+const getFileContent = async (file: any): Promise<string> => {
 	if (file.truncated) {
 		return await (await fetch(file.raw_url)).text();
 	}
@@ -126,9 +32,9 @@ const getGistData = async (gistURL: string): Promise<GistData> => {
 	// eslint-disable-next-line @typescript-eslint/no-unused-vars
 	const [_, __, gistID, revisionID] = gistURL.split('github.com').pop().split('/');
 	// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-	const { html_url, files, history } = (await (
+	const { html_url, files, history } = await (
 		await fetch(`https://api.github.com/gists/${gistID}${revisionID ? '/' + revisionID : ''}`)
-	).json()) as GistResponse;
+	).json();
 	if (isValidGist(files)) {
 		const code = await getFileContent(files[codeFileName]);
 		let config: string;
@@ -142,7 +48,7 @@ const getGistData = async (gistURL: string): Promise<GistData> => {
 			config,
 			author: currentItem.user.login,
 			time: new Date(currentItem.committed_at).getTime(),
-			version: currentItem.version.slice(-7)
+			version: (currentItem.version as string).slice(-7)
 		};
 	} else {
 		throw 'Invalid gist provided';

src/lib/util/serde.ts

@@ -1,61 +0,0 @@
-import { deflate, inflate } from 'pako';
-import { toUint8Array, fromUint8Array, toBase64, fromBase64 } from 'js-base64';
-import type { State } from '$lib/types';
-
-interface Serde {
-	serialize: (state: string) => string;
-	deserialize: (state: string) => string;
-}
-
-const base64Serde: Serde = {
-	serialize: (state: string): string => {
-		return toBase64(state, true);
-	},
-	deserialize: (state: string): string => {
-		return fromBase64(state);
-	}
-};
-
-export const pakoSerde: Serde = {
-	serialize: (state: string): string => {
-		const data = new TextEncoder().encode(state);
-		const compressed = deflate(data, { level: 9 });
-		return fromUint8Array(compressed, true);
-	},
-	deserialize: (state: string): string => {
-		const data = toUint8Array(state);
-		return inflate(data, { to: 'string' });
-	}
-};
-
-const serdes: { [key: string]: Serde } = {
-	base64: base64Serde,
-	pako: pakoSerde
-};
-
-type SerdeType = keyof typeof serdes;
-
-export const serializeState = (state: State): string => {
-	const json = JSON.stringify(state);
-	const defaultSerde: SerdeType = 'pako';
-	const serialized = serdes[defaultSerde].serialize(json);
-	return `${defaultSerde}:${serialized}`;
-};
-
-export const deserializeState = (state: string): State => {
-	let type: SerdeType, serialized: string;
-	if (state.includes(':')) {
-		let tempType: string;
-		[tempType, serialized] = state.split(':');
-		if (tempType in serdes) {
-			type = tempType;
-		} else {
-			throw new Error(`Unknown serde type: ${tempType}`);
-		}
-	} else {
-		type = 'base64';
-		serialized = state;
-	}
-	const json = serdes[type].deserialize(serialized);
-	return JSON.parse(json) as State;
-};

src/lib/util/state.ts

@@ -1,9 +1,9 @@
 import { writable, get, derived } from 'svelte/store';
 import type { Readable } from 'svelte/store';
+import { toBase64, fromBase64 } from 'js-base64';
 import { persist, localStorage } from '@macfja/svelte-persistent-store';
 import type { State } from '$lib/types';
 import { saveStatistics } from './stats';
-import { serializeState, deserializeState } from './serde';
 
 export const defaultState: State = {
 	code: `graph TD
@@ -37,16 +37,17 @@ const urlParseFailedState = `graph TD
     click D href "https://github.com/mermaid-js/mermaid-live-editor/issues/new?assignees=&labels=bug&template=bug_report.md&title=Broken%20link" "Raise issue"`;
 
 export const codeStore = persist(writable(defaultState), localStorage(), 'codeStore');
-export const serializedState: Readable<string> = derived([codeStore], ([code], set) => {
-	set(serializeState(code));
+export const base64State: Readable<string> = derived([codeStore], ([code], set) => {
+	set(toBase64(JSON.stringify(code), true));
 });
 
 export const loadState = (data: string): void => {
 	let state: State;
-	console.log('Loading', data);
 	try {
-		state = deserializeState(data);
-		const mermaidConfig: { [key: string]: string } =
+		const stateStr = fromBase64(data);
+		console.log(`Trying to load state: ${stateStr}`);
+		state = JSON.parse(stateStr);
+		const mermaidConfig =
 			typeof state.mermaid === 'string' ? JSON.parse(state.mermaid) : state.mermaid;
 		if (
 			mermaidConfig.securityLevel &&
@@ -115,7 +116,7 @@ export const toggleDarkTheme = (dark: boolean): void => {
 };
 
 export const initURLSubscription = (): void => {
-	serializedState.subscribe((state: string) => {
+	base64State.subscribe((state: string) => {
 		history.replaceState(undefined, undefined, `#${state}`);
 	});
 };

src/routes/edit.svelte

@@ -6,7 +6,7 @@
 	import View from '$lib/components/view.svelte';
 	import Card from '$lib/components/card/card.svelte';
 	import History from '$lib/components/history/history.svelte';
-	import { updateCode, updateConfig, codeStore, serializedState } from '$lib/util/state';
+	import { updateCode, updateConfig, codeStore, base64State } from '$lib/util/state';
 	import { initHandler, syncDiagram } from '$lib/util/util';
 	import { errorStore } from '$lib/util/error';
 	import { onMount } from 'svelte';
@@ -15,7 +15,7 @@
 	import type { EditorUpdateEvent, State, Tab } from '$lib/types';
 	import { base } from '$app/paths';
 
-	serializedState; // Weird fix for error > serializedState is not defined. Treeshaking?
+	base64State; // Weird fix for error > base64State is not defined. Treeshaking?
 	let selectedMode = 'code';
 	const languageMap = {
 		code: 'mermaid',
@@ -82,7 +82,7 @@
 					startLineNumber: e.hash.loc.first_line,
 					startColumn: e.hash.loc.first_column,
 					endLineNumber: e.hash.loc.last_line,
-					endColumn: (e.hash.loc.last_column as number) + 1,
+					endColumn: e.hash.loc.last_column + 1,
 					message: e.str
 				};
 				errorMarkers.push(marker);
@@ -96,7 +96,7 @@
 	};
 
 	const viewDiagram = () => {
-		window.open(`${base}/view#${$serializedState}`, '_blank').focus();
+		window.open(`${base}/view#${$base64State}`, '_blank').focus();
 	};
 
 	onMount(async () => {

svelte.config.js

@@ -19,6 +19,7 @@ const config = {
 					base: `/mermaid-live-editor${process.env['BETA'] ? '/beta' : ''}`
 			  }
 			: {},
+		ssr: false,
 		// hydrate the <div id="svelte"> element in src/app.html
 		target: '#svelte',
 		trailingSlash: 'ignore',

tailwind.config.cjs

@@ -1,4 +1,5 @@
 module.exports = {
+	mode: 'jit',
 	plugins: [require('daisyui')],
 	content: ['./src/**/*.{html,js,svelte,ts}'],
 	theme: {

tsconfig.json

@@ -2,7 +2,7 @@
 	"compilerOptions": {
 		"moduleResolution": "node",
 		"module": "es2020",
-		"lib": ["es2020", "ESNext", "DOM.Iterable", "DOM"],
+		"lib": ["es2020", "ESNext", "DOM.Iterable"],
 		"target": "es2019",
 		/**
 			svelte-preprocess cannot figure out whether you have a value or a type, so tell TypeScript
@@ -33,7 +33,6 @@
 		"src/**/*.svelte",
 		"cypress/**/*.ts",
 		"cypress/**/*.js",
-		"static/**/*.js",
-		"src/pako.mts"
+		"static/**/*.js"
 	]
 }