Fix import

chore(deps-dev): bump tailwindcss from 3.1.6 to 3.1.8

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

@@ -10,7 +10,13 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
-      - run: ./bin/update-monaco
+      - uses: actions/setup-node@v2
+        with:
+          node-version: 18
+      - name: Update monaco version
+        run: |
+          yarn install
+          node ./bin/update-monaco.js
       - name: Commit changes
         uses: EndBug/add-and-commit@v9
         with:

Dockerfile

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

bin/update-monaco

@@ -1,12 +0,0 @@
-#!/bin/bash
-
-monacoVersion="$(jq -r '.dependencies."monaco-editor"' package.json)"
-monacoVersion="${monacoVersion:1}"
-
-if [[ $(uname) == "Darwin" ]]; 
-then
-    sed -i '' -E "s/monaco-editor\/[^/]*/monaco-editor\/$monacoVersion/g" ./src/app.html
-else
-    sed -i'' -E "s/monaco-editor\/[^/]*/monaco-editor\/$monacoVersion/g" ./src/app.html
-fi
-

bin/update-monaco.js

@@ -0,0 +1,45 @@
+import fs from 'fs';
+import path from 'path';
+import { parse } from 'node-html-parser';
+import prettier from 'prettier';
+
+// parse monaco version out of package.json
+const packageJson = JSON.parse(fs.readFileSync('package.json'));
+const monacoVersion = packageJson.dependencies['monaco-editor'].replace('^', '');
+
+// fetch monaco sri info from cdnjs api
+const cdnjsAPIResp = await fetch(
+	`https://api.cdnjs.com/libraries/monaco-editor/${monacoVersion}?fields=sri`
+);
+if (cdnjsAPIResp.ok) {
+	const respJson = await cdnjsAPIResp.json();
+	const htmlPath = path.join('src', 'app.html');
+	const appHtml = fs
+		.readFileSync(htmlPath, 'utf8')
+		// update monaco version of every asset in app.html
+		.replaceAll(/[0-9.]+\/min\/vs/g, `${monacoVersion}/min/vs`);
+	const root = parse(appHtml);
+	const updateIntegrity = (tag, attr) => {
+		for (const node of root
+			.getElementsByTagName(tag)
+			.filter((node) => node.getAttribute(attr)?.includes('monaco-editor'))) {
+			const file = node.getAttribute(attr).split(`${monacoVersion}/`)[1];
+			node.setAttribute('integrity', respJson.sri[file]);
+		}
+	};
+
+	updateIntegrity('script', 'src');
+	updateIntegrity('link', 'href');
+
+	fs.writeFileSync(
+		htmlPath,
+		prettier.format(root.toString(), {
+			singleQuote: false,
+			parser: 'html',
+			bracketSameLine: true,
+			useTabs: true
+		})
+	);
+} else {
+	throw Error('Unable to fetch monaco sri data from cdnjs api.');
+}

cypress/e2e/diagramUpdate.spec.ts

@@ -21,6 +21,15 @@ describe('Auto sync tests', () => {
 		cy.getLocalStorage('codeStore').snapshot();
 	});
 
+	it('should update diagram when shortcut is used', () => {
+		cy.contains('Auto sync').click();
+		cy.get('#view').should('not.have.class', 'outOfSync');
+		getEditor().type('  C --> Test');
+		cy.get('#view').should('have.class', 'outOfSync');
+		getEditor().type(`{${cmd}}{enter}`);
+		cy.get('#view').should('not.have.class', 'outOfSync');
+	});
+
 	it('should show/hide sync button with auto sync', () => {
 		cy.get('[data-cy=sync]').should('not.exist');
 		cy.contains('Auto sync').click();

cypress/e2e/loadSite.spec.ts

@@ -78,7 +78,7 @@ describe('Site Loads', () => {
 
 	it('should allow persisting "securityLevel" using confirm dialogue', () => {
 		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}`,
+			`{"code":"graph TD\\nA[\\"<img src='https://dummyimage.com/64' width=64/>\\"]","mermaid":"{\\"securityLevel\\": \\"loose\\", \\"theme\\": \\"forest\\"}","updateEditor":true,"autoSync":true,"updateDiagram":true}`,
 			true
 		);
 		cy.on('window:confirm', () => false);

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": "10.3.0",
+  "__version": "10.4.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

@@ -4,7 +4,7 @@
 	"type": "module",
 	"license": "MIT",
 	"scripts": {
-		"dev": "vite dev --host 0.0.0.0",
+		"dev": "vite dev",
 		"build": "vite build",
 		"preview": "vite preview",
 		"lint": "prettier --check --cache --plugin-search-dir=. .;eslint --ignore-path .gitignore .",
@@ -21,23 +21,23 @@
 	},
 	"devDependencies": {
 		"@cypress/snapshot": "2.1.7",
-		"@sveltejs/adapter-static": "1.0.0-next.34",
-		"@sveltejs/kit": "1.0.0-next.359",
-		"@testing-library/jest-dom": "5.16.4",
+		"@sveltejs/adapter-static": "1.0.0-next.39",
+		"@sveltejs/kit": "1.0.0-next.405",
+		"@testing-library/jest-dom": "5.16.5",
 		"@testing-library/svelte": "3.1.3",
 		"@types/mermaid": "8.2.9",
 		"@types/pako": "1.0.3",
-		"@typescript-eslint/eslint-plugin": "5.30.5",
-		"@typescript-eslint/parser": "5.30.5",
-		"@vitest/ui": "0.17.0",
-		"autoprefixer": "10.4.7",
-		"c8": "7.11.3",
+		"@typescript-eslint/eslint-plugin": "5.33.0",
+		"@typescript-eslint/parser": "5.33.0",
+		"@vitest/ui": "0.21.1",
+		"autoprefixer": "10.4.8",
+		"c8": "7.12.0",
 		"chai": "4.3.6",
 		"cssnano": "5.1.12",
 		"cy-verify-downloads": "0.1.8",
-		"cypress": "10.3.0",
-		"cypress-localstorage-commands": "2.1.0",
-		"eslint": "8.19.0",
+		"cypress": "10.4.0",
+		"cypress-localstorage-commands": "2.2.0",
+		"eslint": "8.21.0",
 		"eslint-config-prettier": "8.5.0",
 		"eslint-plugin-cypress": "2.12.1",
 		"eslint-plugin-es": "4.1.0",
@@ -49,28 +49,28 @@
 		"jsdom": "20.0.0",
 		"lint-staged": "13.0.3",
 		"node-html-parser": "5.3.3",
-		"postcss": "8.4.14",
+		"postcss": "8.4.16",
 		"postcss-load-config": "4.0.1",
 		"prettier": "2.7.1",
 		"prettier-plugin-svelte": "2.7.0",
-		"svelte": "3.48.0",
+		"svelte": "3.49.0",
 		"svelte-preprocess": "4.10.7",
-		"tailwindcss": "3.1.4",
+		"tailwindcss": "3.1.8",
 		"tslib": "2.4.0",
 		"typescript": "4.7.4",
-		"vite": "2.9.13",
-		"vitest": "0.17.0",
-		"vitest-svelte-kit": "0.0.6"
+		"vite": "3.0.5",
+		"vitest": "0.21.1",
+		"vitest-svelte-kit": "0.0.7"
 	},
 	"dependencies": {
-		"@analytics/google-analytics": "0.5.3",
+		"@analytics/google-analytics": "1.0.3",
 		"@macfja/svelte-persistent-store": "1.3.0",
 		"analytics": "0.8.1",
-		"daisyui": "2.17.0",
+		"daisyui": "2.22.0",
 		"js-base64": "3.7.2",
-		"mermaid": "9.1.3",
+		"mermaid": "9.1.5",
 		"moment": "2.29.4",
-		"monaco-editor": "0.33.0",
+		"monaco-editor": "0.34.0",
 		"monaco-mermaid": "1.0.6",
 		"pako": "2.0.4",
 		"random-word-slugs": "0.1.6"
@@ -82,7 +82,7 @@
 		]
 	},
 	"volta": {
-		"node": "16.15.0",
+		"node": "18.5.0",
 		"yarn": "1.22.10"
 	},
 	"engines": {

src/app.html

@@ -15,30 +15,38 @@
 		<link rel="manifest" href="%sveltekit.assets%/manifest.json" />
 		<link
 			rel="stylesheet"
-			href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" />
+			href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
+			integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w=="
+			crossorigin="anonymous"
+			referrerpolicy="no-referrer" />
 		<link
 			rel="stylesheet"
-			href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.33.0/min/vs/editor/editor.main.min.css"
+			href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.0/min/vs/editor/editor.main.min.css"
+			integrity="sha512-iQEIc0rsSDujsfjtD+lfyJ1W23Bh/lbgriubKDAym6VlEIDRj9rrbSIyJRyshOrl8s0yRcQ0+gyrZfSLyjJGWQ=="
 			crossorigin="anonymous"
 			referrerpolicy="no-referrer" />
 		<script>
 			var require = {
-				paths: { vs: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.33.0/min/vs' }
+				paths: {
+					vs: "https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.0/min/vs",
+				},
 			};
 		</script>
 		<script
-			src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.33.0/min/vs/loader.min.js"
+			src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.0/min/vs/loader.min.js"
+			integrity="sha512-6bIYsGqvLpAiEBXPdRQeFf5cueeBECtAKJjIHer3BhBZNTV3WLcLA8Tm3pDfxUwTMIS+kAZwTUvJ1IrMdX8C5w=="
 			crossorigin="anonymous"
 			referrerpolicy="no-referrer"></script>
 		<script
-			src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.33.0/min/vs/editor/editor.main.nls.min.js"
+			src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.0/min/vs/editor/editor.main.nls.min.js"
+			integrity="sha512-CCv+DKWw+yZhxf4Z+ExT6HC5G+3S45TeMTYcJyYbdrv4BpK2vyALJ4FoVR/KGWDIPu7w4tNCOC9MJQIkYPR5FA=="
 			crossorigin="anonymous"
 			referrerpolicy="no-referrer"></script>
 		<script
-			src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.33.0/min/vs/editor/editor.main.js"
+			src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.0/min/vs/editor/editor.main.js"
+			integrity="sha512-TTPQbVI87mnVMV+1KbkKJ8vdQ4QqqbKyuTtJ9wQD8CqnwQLSQgXH7MWOQ88VO7pRzxWhqI1vYDeEV651sAH4ig=="
 			crossorigin="anonymous"
 			referrerpolicy="no-referrer"></script>
-
 		%sveltekit.head%
 	</head>
 	<body>

src/lib/components/editor.svelte

@@ -2,6 +2,7 @@
 	import type { EditorEvents } from '$lib/types';
 	import { stateStore } from '$lib/util/state';
 	import { themeStore } from '$lib/util/theme';
+	import { syncDiagram } from '$lib/util/util';
 	import type monaco from 'monaco-editor';
 	import { createEventDispatcher, onMount } from 'svelte';
 	import initEditor from 'monaco-mermaid';
@@ -66,6 +67,14 @@
 				text
 			});
 		});
+		editor.addAction({
+			id: 'mermaid-render-diagram',
+			label: 'Render Diagram',
+			keybindings: [Monaco.KeyMod.CtrlCmd | Monaco.KeyCode.Enter],
+			run: function () {
+				syncDiagram();
+			}
+		});
 		Monaco?.editor.setTheme($themeStore.isDark ? 'mermaid-dark' : 'mermaid');
 		const resizeObserver = new ResizeObserver((entries) => {
 			editor.layout({

src/lib/util/fileLoaders/loader.ts

@@ -7,7 +7,7 @@ const loaders: Record<string, Loader> = {
 
 export const loadDataFromUrl = async (): Promise<void> => {
 	const searchParams = new URLSearchParams(window.location.search);
-	let state: State = defaultState;
+	let state: Partial<State> = defaultState;
 	let code: string, config: string;
 	let loaded = false;
 	const codeURL: string = searchParams.get('code');
@@ -48,7 +48,7 @@ export const loadDataFromUrl = async (): Promise<void> => {
 					configURL
 				}
 			}
-		} as State;
+		};
 	}
 	loaded &&
 		updateCodeStore({

src/lib/util/state.ts

@@ -2,6 +2,7 @@ import { writable, get, derived } from 'svelte/store';
 import { persist, localStorage } from '@macfja/svelte-persistent-store';
 import { saveStatistics } from './stats';
 import { serializeState, deserializeState } from './serde';
+import { cmdKey } from './util';
 import mermaid from 'mermaid';
 
 import type { Readable } from 'svelte/store';
@@ -104,7 +105,7 @@ export const loadState = (data: string): void => {
 	updateCodeStore({ ...state, updateEditor: true });
 };
 
-export const updateCodeStore = (newState: State): void => {
+export const updateCodeStore = (newState: Partial<State>): void => {
 	inputStateStore.update((state) => {
 		return { ...state, ...newState };
 	});
@@ -120,13 +121,13 @@ export const updateCode = (
 
 	if (lines > 50 && !prompted && get(stateStore).autoSync) {
 		const turnOff = confirm(
-			'Long diagram detected. Turn off Auto Sync? Click the sync logo to manually sync.'
+			`Long diagram detected. Turn off Auto Sync? Use ${cmdKey} + Enter or click the sync logo to manually sync.`
 		);
 		prompted = true;
 		if (turnOff) {
 			updateCodeStore({
 				autoSync: false
-			} as State);
+			});
 		}
 	}
 

src/lib/util/util.ts

@@ -1,4 +1,3 @@
-import type { State } from '$lib/types';
 import { initURLSubscription, loadState, updateCodeStore } from './state';
 import { analytics, initAnalytics } from './stats';
 import { loadDataFromUrl } from './fileLoaders/loader';
@@ -11,7 +10,7 @@ export const loadStateFromURL = (): void => {
 export const syncDiagram = (): void => {
 	updateCodeStore({
 		updateDiagram: true
-	} as State);
+	});
 };
 
 export const initHandler = async (): Promise<void> => {
@@ -22,3 +21,6 @@ export const initHandler = async (): Promise<void> => {
 	await initAnalytics();
 	analytics?.page();
 };
+
+export const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
+export const cmdKey = isMac ? 'Cmd' : 'Ctrl';

src/routes/[fallback]/manifest.json.ts

@@ -1,2 +1,2 @@
-import { get as manifestGet } from '../manifest.json';
-export const get = manifestGet;
+import { GET as manifestGet } from '../manifest.json';
+export const GET = manifestGet;

src/routes/edit.svelte

@@ -7,7 +7,7 @@
 	import Card from '$lib/components/card/card.svelte';
 	import History from '$lib/components/history/history.svelte';
 	import { updateCode, updateConfig, inputStateStore, stateStore } from '$lib/util/state';
-	import { initHandler, syncDiagram } from '$lib/util/util';
+	import { cmdKey, initHandler, syncDiagram } from '$lib/util/util';
 	import { onMount } from 'svelte';
 	import type { EditorUpdateEvent, State, Tab, DocConfig } from '$lib/types';
 	import { base } from '$app/paths';
@@ -111,10 +111,6 @@
 		}
 	};
 
-	const viewDiagram = () => {
-		window.open(`${base}/view#${$stateStore.serialized}`, '_blank').focus();
-	};
-
 	onMount(async () => {
 		await initHandler();
 		const resizer = document.getElementById('resizeHandler');
@@ -158,7 +154,7 @@
 						{#if !$stateStore.autoSync}
 							<button
 								class="btn btn-secondary btn-xs mr-1"
-								title="Sync Diagram"
+								title="Sync Diagram ({cmdKey} + Enter)"
 								data-cy="sync"
 								on:click={syncDiagram}><i class="fas fa-sync" /></button>
 						{/if}
@@ -181,11 +177,13 @@
 		<div id="resizeHandler" class="hidden md:block" />
 		<div class="flex-1 flex flex-col overflow-hidden">
 			<Card title="Diagram" isCloseable={false}>
-				<button
+				<a
+					href={`${base}/view#${$stateStore.serialized}`}
+					target="_blank"
 					slot="actions"
 					class="btn btn-secondary btn-xs"
 					title="View diagram in new page"
-					on:click|stopPropagation={() => viewDiagram()}><i class="far fa-eye mr-1" />View</button>
+					><i class="fas fa-external-link-alt mr-1" />Full screen</a>
 
 				<div class="flex-1 overflow-auto">
 					<View />

src/routes/manifest.json.ts

@@ -1,5 +1,5 @@
 import { base } from '$app/paths';
-export const get = (): { body: unknown } => {
+export const GET = (): { body: unknown } => {
 	return {
 		body: {
 			short_name: 'Mermaid',

vite.config.js

@@ -7,6 +7,14 @@ const config = {
 	ssr: {
 		noExternal: ['@macfja/svelte-persistent-store']
 	},
+	server: {
+		port: 3000,
+		host: true
+	},
+	preview: {
+		port: 3000,
+		host: true
+	},
 	test: {
 		environment: 'jsdom',
 		// in-source testing