Disable debounce in localstorage

cypress/snapshots.js

@@ -7,13 +7,13 @@ module.exports = {
       "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]\",\"mermaid\":\"{\\n  \\\"theme\\\": \\\"default\\\"\\n}\",\"updateEditor\":false,\"autoSync\":true,\"updateDiagram\":true}"
     },
     "should load diagram from gist": {
-      "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\":\"gist\",\"config\":{\"url\":\"https://gist.github.com/sidharthv96/6268a23e673a533dcb198f241fd7012a\"}}}"
+      "1": "{\"code\":\"graph TD\\n    A[Party] -->|Get money| B(Go shopping!!)\\n    \",\"mermaid\":\"{\\n  \\\"theme\\\": \\\"forest\\\",\\n  \\\"test\\\": \\\"hello world\\\"\\n}\",\"updateEditor\":true,\"autoSync\":true,\"updateDiagram\":true,\"loader\":{\"type\":\"gist\",\"config\":{\"url\":\"https://gist.github.com/sidharthv96/6268a23e673a533dcb198f241fd7012a\"}}}"
     },
     "should load diagram from gist revision": {
-      "1": "{\"code\":\"graph TD\\n    A[Party] -->|Get money| B(Go shopping)\\n    \",\"mermaid\":\"{\\n  \\\"theme\\\": \\\"forest\\\",\\n  \\\"test\\\": \\\"hello\\\"\\n}\",\"updateEditor\":false,\"autoSync\":true,\"updateDiagram\":true,\"loader\":{\"type\":\"gist\",\"config\":{\"url\":\"https://gist.github.com/sidharthv96/6268a23e673a533dcb198f241fd7012a/ec9b4ab0e41e4ff6287326cd3cb47affd7851e19\"}}}"
+      "1": "{\"code\":\"graph TD\\n    A[Party] -->|Get money| B(Go shopping)\\n    \",\"mermaid\":\"{\\n  \\\"theme\\\": \\\"forest\\\",\\n  \\\"test\\\": \\\"hello\\\"\\n}\",\"updateEditor\":true,\"autoSync\":true,\"updateDiagram\":true,\"loader\":{\"type\":\"gist\",\"config\":{\"url\":\"https://gist.github.com/sidharthv96/6268a23e673a533dcb198f241fd7012a/ec9b4ab0e41e4ff6287326cd3cb47affd7851e19\"}}}"
     },
     "should load diagram from raw files": {
-      "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\"}}}"
+      "1": "{\"code\":\"graph TD\\n    A[Party] -->|Get money| B(Go shopping!!)\\n    \",\"mermaid\":\"{\\n  \\\"theme\\\": \\\"forest\\\",\\n  \\\"test\\\": \\\"hello world\\\"\\n}\",\"updateEditor\":true,\"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.4.0",

src/lib/components/view.svelte

@@ -70,7 +70,7 @@
 									pzoom.pan(pan);
 								}
 								hide = false;
-							}, 0);
+							}, 1);
 						}
 					});
 					view.parentElement.scrollTop = scroll;

src/lib/util/util.ts

@@ -25,4 +25,4 @@ export const initHandler = async (): Promise<void> => {
 export const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
 export const cmdKey = isMac ? 'Cmd' : 'Ctrl';
 
-export const debounceMultiplier = window.localStorage.getItem('noDebounce') === 'true' ? 0 : 1;
+export const debounceEnabled = window.localStorage.getItem('noDebounce') !== 'true';

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 { cmdKey, debounceMultiplier, initHandler, syncDiagram } from '$lib/util/util';
+	import { cmdKey, debounceEnabled, initHandler, syncDiagram } from '$lib/util/util';
 	import { onMount } from 'svelte';
 	import type { EditorUpdateEvent, State, Tab, DocConfig } from '$lib/types';
 	import { base } from '$app/paths';
@@ -101,19 +101,27 @@
 		}
 	];
 
+	const handleUpdate = (text: string) => {
+		if (selectedMode === 'code') {
+			updateCode(text, {
+				updateEditor: false
+			});
+		} else {
+			updateConfig(text, false);
+		}
+	};
+
 	let debounce: { [key: string]: number } = {};
-	const updateHandler = (message: CustomEvent<EditorUpdateEvent>) => {
+	const updateHandler = ({ detail: { text } }: CustomEvent<EditorUpdateEvent>) => {
-		clearTimeout(debounce[selectedMode]);
+		console.log({ debounceEnabled });
-		debounce[selectedMode] = window.setTimeout(() => {
+		if (debounceEnabled) {
-			const code = message.detail.text;
+			clearTimeout(debounce[selectedMode]);
-			if (selectedMode === 'code') {
+			debounce[selectedMode] = window.setTimeout(() => {
-				updateCode(code, {
+				handleUpdate(text);
-					updateEditor: false
+			}, 300);
-				});
+		} else {
-			} else {
+			handleUpdate(text);
-				updateConfig(code, false);
+		}
-			}
-		}, 300 * debounceMultiplier);
 	};
 
 	onMount(async () => {