Merge branch 'develop' into revert-585-revert-478-develop

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,34 +15,34 @@
  },
  "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",
+ "autoprefixer": "^10.4.2",
  "chai": "^4.3.4",
- "cssnano": "^5.0.14",
- "cypress": "9.2.0",
+ "cssnano": "^5.0.15",
+ "cypress": "9.3.1",
  "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-tailwindcss": "^1.17.2",
+ "eslint-plugin-svelte3": "^3.4.0",
+ "eslint-plugin-tailwindcss": "^3.3.0",
  "husky": "^7.0.4",
- "lint-staged": "^12.1.4",
- "mocha": "^9.1.3",
+ "lint-staged": "^12.2.1",
+ "mocha": "^9.1.4",
  "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.46.1",
- "svelte-preprocess": "^4.10.1",
+ "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"
@@ -51,13 +51,14 @@
  "dependencies": {
  "@analytics/google-analytics": "^0.5.3",
  "@macfja/svelte-persistent-store": "^1.2.0",
- "analytics": "^0.7.19",
- "daisyui": "1.21.0",
+ "analytics": "^0.7.21",
+ "daisyui": "1.24.3",
  "js-base64": "^3.7.2",
- "mermaid": "8.13.8",
+ "mermaid": "8.13.9",
  "moment": "^2.29.1",
  "monaco-editor": "^0.31.1",
- "monaco-mermaid": "^1.0.1",
+ "monaco-mermaid": "^1.0.2",
+ "pako": "2.0.4",
  "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',