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/util.ts

@@ -22,3 +22,5 @@ export const initHandler = async (): Promise<void> => {
 	await initAnalytics();
 	analytics?.page();
 };
+
+export const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;

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 { initHandler, isMac, 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 ({isMac ? 'Cmd' : 'Ctrl'} + Enter)"
 								data-cy="sync"
 								on:click={syncDiagram}><i class="fas fa-sync" /></button>
 						{/if}