Merge pull request #954 from mermaid-js/sidv/renderShortcut

fix #914 Add render diagram keyboard shortcut

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();

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/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';
@@ -154,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}