Merge pull request mermaid-js#571 from mermaid-js/develop

Develop

Dockerfile

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

README.md

@@ -32,6 +32,11 @@ 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

package.json

@@ -15,48 +15,49 @@
 	},
 	"devDependencies": {
 		"@cypress/snapshot": "^2.1.7",
-		"@sveltejs/adapter-static": "1.0.0-next.22",
-		"@sveltejs/kit": "1.0.0-next.202",
+		"@sveltejs/adapter-static": "1.0.0-next.26",
+		"@sveltejs/kit": "1.0.0-next.232",
 		"@types/mermaid": "^8.2.7",
 		"@typescript-eslint/eslint-plugin": "^4.33.0",
 		"@typescript-eslint/parser": "^4.33.0",
 		"autoprefixer": "^10.4.0",
 		"chai": "^4.3.4",
 		"cssnano": "^5.0.14",
-		"cypress": "9.1.1",
+		"cypress": "9.2.0",
 		"cypress-localstorage-commands": "^1.6.1",
 		"eslint": "^7.32.0",
 		"eslint-config-prettier": "^8.1.0",
 		"eslint-plugin-cypress": "^2.12.1",
 		"eslint-plugin-es": "^4.1.0",
 		"eslint-plugin-mocha": "^10.0.3",
 		"eslint-plugin-postcss-modules": "^2.0.0",
-		"eslint-plugin-svelte3": "^3.2.1",
+		"eslint-plugin-svelte3": "^3.4.0",
 		"eslint-plugin-tailwindcss": "^1.17.2",
 		"husky": "^7.0.4",
-		"lint-staged": "^12.1.4",
+		"lint-staged": "^12.2.0",
 		"mocha": "^9.1.3",
-		"node-html-parser": "^5.1.0",
+		"node-html-parser": "^5.2.0",
 		"postcss": "^8.4.5",
-		"postcss-load-config": "^3.1.0",
+		"postcss-load-config": "^3.1.1",
 		"prettier": "~2.5.1",
-		"prettier-plugin-svelte": "^2.5.1",
-		"svelte": "^3.44.3",
-		"svelte-preprocess": "^4.10.1",
-		"tailwindcss": "^3.0.7",
+		"prettier-plugin-svelte": "^2.6.0",
+		"svelte": "^3.46.2",
+		"svelte-preprocess": "^4.10.2",
+		"tailwindcss": "^3.0.13",
 		"tslib": "^2.3.1",
 		"typescript": "^4.5.4"
 	},
 	"type": "module",
 	"dependencies": {
 		"@analytics/google-analytics": "^0.5.3",
 		"@macfja/svelte-persistent-store": "^1.2.0",
-		"analytics": "^0.7.19",
-		"daisyui": "1.19.0",
+		"analytics": "^0.7.21",
+		"daisyui": "1.21.0",
 		"js-base64": "^3.7.2",
 		"mermaid": "8.13.8",
 		"moment": "^2.29.1",
 		"monaco-editor": "^0.31.1",
+		"pako": "1.0.10",
 		"random-word-slugs": "^0.1.6"
 	},
 	"lint-staged": {

src/hooks.ts

@@ -0,0 +1,9 @@
+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,10 +2,11 @@
 	import { browser } from '$app/env';
 
 	import Card from '$lib/components/card/card.svelte';
-	import { rendererUrl } from '$lib/util/env';
+	import { rendererUrl, krokiRendererUrl } from '$lib/util/env';
 	import { base64State, codeStore } from '$lib/util/state';
-	import { toBase64 } from 'js-base64';
+	import { toBase64, btoa as jsbtoa } from 'js-base64';
 	import moment from 'moment';
+	import pako from 'pako';
 
 	type Exporter = (context: CanvasRenderingContext2D, image: HTMLImageElement) => () => void;
 
@@ -127,6 +128,31 @@
 		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 mdCode: string;
@@ -168,6 +194,9 @@
 		<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>
 
 		<div class="flex gap-2 items-center">
 			PNG size

src/lib/util/env.ts

@@ -1 +1,2 @@
 export const rendererUrl = import.meta.env.MERMAID_RENDERER_URL ?? 'https://mermaid.ink';
+export const krokiRendererUrl = import.meta.env.MERMAID_KROKI_RENDERER_URL ?? 'https://kroki.io';

svelte.config.js

@@ -19,7 +19,6 @@ 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,5 +1,4 @@
 module.exports = {
-	mode: 'jit',
 	plugins: [require('daisyui')],
 	content: ['./src/**/*.{html,js,svelte,ts}'],
 	theme: {