Fix race condition

package.json

@@ -4,7 +4,7 @@
 	"type": "module",
 	"license": "MIT",
 	"scripts": {
-		"dev": "vite dev",
+		"dev": "MERMAID_DISABLE_DEBOUNCE=true vite dev",
 		"build": "vite build",
 		"preview": "vite preview",
 		"lint": "prettier --check --cache --plugin-search-dir=. .;eslint --ignore-path .gitignore .",

src/lib/components/editor.svelte

@@ -2,11 +2,12 @@
 	import type { EditorMode } from '$lib/types';
 	import { stateStore, updateCode, updateConfig } from '$lib/util/state';
 	import { themeStore } from '$lib/util/theme';
-	import { debounceEnabled, syncDiagram } from '$lib/util/util';
+	import { syncDiagram } from '$lib/util/util';
 	import type monaco from 'monaco-editor';
 	import { onMount } from 'svelte';
 	import initEditor from 'monaco-mermaid';
 	import { logEvent } from '$lib/util/stats';
+	import { debounceEnabled } from '$lib/util/env';
 
 	let divEl: HTMLDivElement = null;
 	let editor: monaco.editor.IStandaloneCodeEditor;
@@ -19,7 +20,6 @@
 		overviewRulerLanes: 0
 	};
 	let text = '';
-	let mode: EditorMode | undefined = undefined;
 
 	stateStore.subscribe(({ errorMarkers, editorMode, code, mermaid }) => {
 		if (!editor) return;
@@ -32,10 +32,9 @@
 		}
 
 		// Update editor mode if it's different
-		if (mode !== editorMode) {
-			const language = editorMode === 'code' ? 'mermaid' : 'json';
+		const language = editorMode === 'code' ? 'mermaid' : 'json';
+		if (editor.getModel().getLanguageId() !== language) {
 			Monaco?.editor.setModelLanguage(editor.getModel(), language);
-			mode = editorMode;
 		}
 
 		// Display errors if present
@@ -62,6 +61,7 @@
 	let debounce: { [key: string]: number } = {};
 	const updateHandler = (newText: string) => {
 		text = newText;
+		const mode = $stateStore.editorMode;
 		if (debounceEnabled) {
 			clearTimeout(debounce[mode]);
 			debounce[mode] = window.setTimeout(() => {
@@ -90,7 +90,7 @@
 		await loadMonaco(); // Fix https://github.com/mermaid-js/mermaid-live-editor/issues/175
 		initEditor(Monaco);
 		editor = Monaco.editor.create(divEl, editorOptions);
-		editor.onDidChangeModelContent((e) => {
+		editor.onDidChangeModelContent(() => {
 			updateHandler(editor.getValue());
 		});
 		editor.addAction({

src/lib/types.d.ts

@@ -40,6 +40,7 @@ export interface State {
 }
 
 export interface ValidatedState extends State {
+	editorMode: EditorMode;
 	error: unknown;
 	errorMarkers: MarkerData[];
 	serialized: string;

src/lib/util/env.ts

@@ -2,3 +2,4 @@ export const rendererUrl: string =
 	(import.meta.env.MERMAID_RENDERER_URL as string) ?? 'https://mermaid.ink';
 export const krokiRendererUrl: string =
 	(import.meta.env.MERMAID_KROKI_RENDERER_URL as string) ?? 'https://kroki.io';
+export const debounceEnabled: boolean = import.meta.env.MERMAID_DISABLE_DEBOUNCE !== 'true';

src/lib/util/state.ts

@@ -48,8 +48,10 @@ export const stateStore: Readable<ValidatedState> = derived([inputStateStore], (
 		...state,
 		serialized: '',
 		errorMarkers: [],
-		error: undefined
+		error: undefined,
+		editorMode: state.editorMode ?? 'code'
 	};
+
 	// No changes should be done to fields part of `state`.
 	try {
 		processed.serialized = serializeState(state);
@@ -107,6 +109,7 @@ export const loadState = (data: string): void => {
 
 export const updateCodeStore = (newState: Partial<State>): void => {
 	inputStateStore.update((state) => {
+		// console.log({ newState, state });
 		return { ...state, ...newState };
 	});
 };

src/lib/util/util.ts

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

src/routes/edit/+page.svelte

@@ -55,7 +55,7 @@
 	let docURL = docURLBase;
 	let activeTabID = 'code';
 	stateStore.subscribe(({ code, editorMode }: ValidatedState) => {
-		activeTabID = editorMode ?? 'code';
+		activeTabID = editorMode;
 		const codeTypeMatch = /([\S]+)[\s\n]/.exec(code);
 		if (codeTypeMatch && codeTypeMatch.length > 1) {
 			const docKey = codeTypeMatch[1];