Merge pull request #607 from mermaid-js/develop

Develop

.github/workflows/update-browserlist.yml

@@ -9,7 +9,7 @@ jobs:
       - uses: actions/checkout@v2
       - run: npx browserslist@latest --update-db
       - name: Commit changes
-        uses: EndBug/add-and-commit@v7
+        uses: EndBug/add-and-commit@v8
         with:
           author_name: ${{ github.actor }}
           author_email: ${{ github.actor }}@users.noreply.github.com

.github/workflows/update-monaco-editor.yml

@@ -13,7 +13,7 @@ jobs:
       - uses: actions/checkout@v2
       - run: ./bin/update-monaco
       - name: Commit changes
-        uses: EndBug/add-and-commit@v7
+        uses: EndBug/add-and-commit@v8
         with:
           author_name: ${{ github.actor }}
           author_email: ${{ github.actor }}@users.noreply.github.com

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+	"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.4.0 as mermaid-live-editor-builder 
 COPY --chown=node:node . /home
 WORKDIR /home
 RUN yarn install

cypress/integration/loadSite.spec.ts

@@ -93,4 +93,31 @@ 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.1.1",
+  "__version": "9.2.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

@@ -16,8 +16,9 @@
 	"devDependencies": {
 		"@cypress/snapshot": "^2.1.7",
 		"@sveltejs/adapter-static": "1.0.0-next.26",
-		"@sveltejs/kit": "1.0.0-next.232",
+		"@sveltejs/kit": "1.0.0-next.236",
 		"@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",
@@ -34,7 +35,7 @@
 		"eslint-plugin-svelte3": "^3.4.0",
 		"eslint-plugin-tailwindcss": "^3.3.0",
 		"husky": "^7.0.4",
-		"lint-staged": "^12.2.1",
+		"lint-staged": "^12.2.2",
 		"mocha": "^9.1.4",
 		"node-html-parser": "^5.2.0",
 		"postcss": "^8.4.5",
@@ -45,7 +46,7 @@
 		"svelte-preprocess": "^4.10.2",
 		"tailwindcss": "^3.0.13",
 		"tslib": "^2.3.1",
-		"typescript": "^4.5.4"
+		"typescript": "^4.5.5"
 	},
 	"type": "module",
 	"dependencies": {
@@ -57,6 +58,7 @@
 		"mermaid": "8.13.9",
 		"moment": "^2.29.1",
 		"monaco-editor": "^0.31.1",
+		"monaco-mermaid": "^1.0.2",
 		"pako": "2.0.4",
 		"random-word-slugs": "^0.1.6"
 	},

src/hooks.ts

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

src/lib/components/actions.svelte

@@ -2,11 +2,11 @@
 	import { browser } from '$app/env';
 
 	import Card from '$lib/components/card/card.svelte';
-	import { rendererUrl, krokiRendererUrl } from '$lib/util/env';
-	import { base64State, codeStore } from '$lib/util/state';
-	import { toBase64, btoa as jsbtoa } from 'js-base64';
+	import { krokiRendererUrl, rendererUrl } from '$lib/util/env';
+	import { pakoSerde } from '$lib/util/serde';
+	import { serializedState, codeStore } from '$lib/util/state';
+	import { toBase64 } from 'js-base64';
 	import moment from 'moment';
-	import pako from 'pako';
 
 	type Exporter = (context: CanvasRenderingContext2D, image: HTMLImageElement) => () => void;
 
@@ -18,7 +18,7 @@
 		}
 		const svgString = svg.outerHTML
 			.replaceAll('<br>', '<br/>')
-			.replaceAll(/<img([^>]*)>/g, (m, g) => `<img ${g} />`);
+			.replaceAll(/<img([^>]*)>/g, (m, g: string) => `<img ${g} />`);
 		return toBase64(svgString);
 	};
 
@@ -79,7 +79,7 @@
 			canvas.toBlob((blob) => {
 				try {
 					// @ts-ignore: https://github.com/microsoft/TypeScript-DOM-lib-generator/pull/1004/files
-					navigator.clipboard.write([
+					void navigator.clipboard.write([
 						/* eslint-disable no-undef */
 						// @ts-ignore: https://github.com/microsoft/TypeScript/issues/43821
 						new ClipboardItem({
@@ -109,7 +109,7 @@
 	};
 
 	const onCopyMarkdown = () => {
-		document.getElementById('markdown').select();
+		(document.getElementById('markdown') as HTMLInputElement).select();
 		document.execCommand('Copy');
 	};
 
@@ -128,33 +128,9 @@
 		window.location.href = `${window.location.pathname}?gist=${gistURL}`;
 	};
 
-	const textEncode = (str) => {
-		if (window.TextEncoder) {
-			return new TextEncoder('utf-8').encode(str);
-		}
-		let utf8 = unescape(encodeURIComponent(str));
-		let result = new Uint8Array(utf8.length);
-		for (let i = 0; i < utf8.length; i++) {
-			result[i] = utf8.charCodeAt(i);
-		}
-		return result;
-	};
-
-	const onKrokiClick = () => {
-		const krokiCode = getKrokiCode($codeStore.code);
-		const krokiUrl = `${krokiRendererUrl}/mermaid/svg/${krokiCode}`;
-		return window.open(krokiUrl, '_blank');
-	};
-
-	const getKrokiCode = (source) => {
-		const data = textEncode(source);
-		const compressed = pako.deflate(data, { level: 9, to: 'string' });
-		let result = jsbtoa(compressed).replace(/\+/g, '-').replace(/\//g, '_');
-		return result;
-	};
-
 	let iUrl: string;
 	let svgUrl: string;
+	let krokiUrl: string;
 	let mdCode: string;
 	let imagemodeselected = 'auto';
 	let userimagesize = 1080;
@@ -163,14 +139,10 @@
 	if (browser && ['mermaid.live', 'netlify'].some((path) => window.location.host.includes(path))) {
 		isNetlify = true;
 	}
-	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}`;
+	serializedState.subscribe((encodedState: string) => {
+		iUrl = `${rendererUrl}/img/${encodedState}`;
+		svgUrl = `${rendererUrl}/svg/${encodedState}`;
+		krokiUrl = `${krokiRendererUrl}/mermaid/svg/${pakoSerde.serialize($codeStore.code)}`;
 		mdCode = `[![](${iUrl})](${window.location.protocol}//${window.location.host}${window.location.pathname}#${encodedState})`;
 	});
 </script>
@@ -194,8 +166,8 @@
 		<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" on:click={onKrokiClick}>
-			<i class="fas fa-external-link-alt mr-2" /> Kroki
+		<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">

src/lib/components/editor/editor.svelte → src/lib/components/editor.svelte

@@ -4,7 +4,7 @@
 	import { themeStore } from '$lib/util/theme';
 	import type monaco from 'monaco-editor';
 	import { createEventDispatcher, onMount } from 'svelte';
-	import { initEditor } from './util';
+	import initEditor from 'monaco-mermaid';
 
 	let divEl: HTMLDivElement = null;
 	let editor: monaco.editor.IStandaloneCodeEditor;