Add message in popup

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

@@ -11,7 +11,7 @@ export const loadStateFromURL = (): void => {
 export const syncDiagram = (): void => {
 	updateCodeStore({
 		updateDiagram: true
-	} as State);
+	});
 };
 
 export const initHandler = async (): Promise<void> => {
@@ -24,3 +24,4 @@ export const initHandler = async (): Promise<void> => {
 };
 
 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, isMac, 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 ({isMac ? 'Cmd' : 'Ctrl'} + Enter)"
+								title="Sync Diagram ({cmdKey} + Enter)"
 								data-cy="sync"
 								on:click={syncDiagram}><i class="fas fa-sync" /></button>
 						{/if}