From 1505a5e496af3224845dca2eb2a4ed3641702ebe Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Fri, 12 Aug 2022 23:20:08 +0530
Subject: [PATCH] Fix editor binding

---
 cypress/e2e/diagramUpdate.spec.ts | 12 ++++++------
 src/lib/components/editor.svelte  | 17 ++++++++++-------
 src/routes/edit.svelte            | 10 +++++++++-
 3 files changed, 25 insertions(+), 14 deletions(-)

diff --git a/cypress/e2e/diagramUpdate.spec.ts b/cypress/e2e/diagramUpdate.spec.ts
index 63726d1b..10eec9cb 100644
--- a/cypress/e2e/diagramUpdate.spec.ts
+++ b/cypress/e2e/diagramUpdate.spec.ts
@@ -1,12 +1,12 @@
 describe('Auto sync tests', () => {
-	const cmd = Cypress.platform === 'darwin' ? 'meta' : 'ctrl';
+	const cmd = `{${Cypress.platform === 'darwin' ? 'meta' : 'ctrl'}}`;
 	const getEditor = ({ bottom = true, newline = false } = {}) =>
 		cy
 			.get('#editor textarea:first')
 			.click()
 			.focused()
-			.type(`${bottom ? '{pageDown}' : `{${cmd}}`}`)
-			.type(`${newline ? '{enter}' : `{${cmd}}`}`);
+			.type(`${bottom ? '{pageDown}' : cmd}`)
+			.type(`${newline ? '{enter}' : cmd}`);
 
 	beforeEach(() => {
 		cy.clearLocalStorage();
@@ -26,7 +26,7 @@ describe('Auto sync tests', () => {
 		cy.get('#view').should('not.have.class', 'outOfSync');
 		getEditor().type('  C --> Test');
 		cy.get('#view').should('have.class', 'outOfSync');
-		getEditor().type(`{${cmd}}{enter}`);
+		getEditor().type(`${cmd}{enter}`);
 		cy.get('#view').should('not.have.class', 'outOfSync');
 	});
 
@@ -52,10 +52,10 @@ describe('Auto sync tests', () => {
 	});
 
 	it('supports commenting code out/in', () => {
-		getEditor().type(`{uparrow}{${cmd}}/`);
+		getEditor().type(`{uparrow}${cmd}/`);
 		cy.get('#view').contains('Car').should('not.exist');
 
-		getEditor().type(`{uparrow}{${cmd}}/`);
+		getEditor().type(`{uparrow}${cmd}/`);
 		cy.get('#view').contains('Car').should('exist');
 	});
 
diff --git a/src/lib/components/editor.svelte b/src/lib/components/editor.svelte
index 999f7ded..e9299a5e 100644
--- a/src/lib/components/editor.svelte
+++ b/src/lib/components/editor.svelte
@@ -24,15 +24,18 @@
 	};
 	let oldText = text;
 	$: editor && Monaco?.editor.setModelLanguage(editor.getModel(), language);
-	$: {
-		if (text !== oldText) {
+
+	const handleTextUpdate = (newText: string) => {
+		if (newText !== oldText) {
 			if ($stateStore.updateEditor) {
-				editor?.setValue(text);
+				editor?.setValue(newText);
 			}
-			oldText = text;
+			oldText = newText;
 		}
 		editor && Monaco?.editor.setModelMarkers(editor.getModel(), 'test', $stateStore.errorMarkers);
-	}
+	};
+
+	$: handleTextUpdate(text);
 
 	themeStore.subscribe(({ isDark }) => {
 		editor && Monaco?.editor.setTheme(isDark ? 'mermaid-dark' : 'mermaid');
@@ -62,9 +65,9 @@
 		initEditor(Monaco);
 		editor = Monaco.editor.create(divEl, editorOptions);
 		editor.onDidChangeModelContent(() => {
-			text = editor.getValue();
+			oldText = editor.getValue();
 			dispatch('update', {
-				text
+				text: oldText
 			});
 		});
 		editor.addAction({
diff --git a/src/routes/edit.svelte b/src/routes/edit.svelte
index 03e3dc83..47ea7d2b 100644
--- a/src/routes/edit.svelte
+++ b/src/routes/edit.svelte
@@ -63,7 +63,15 @@
 	let text = '';
 	let docURL = docURLBase;
 	let language: Languages = 'mermaid';
+	const handleModeUpdate = (mode: Modes) => {
+		if (mode === 'code') {
+			text = $stateStore.code;
+		} else {
+			text = $stateStore.mermaid;
+		}
+	};
 	$: language = languageMap[selectedMode];
+	$: handleModeUpdate(selectedMode);
 
 	stateStore.subscribe((state: State) => {
 		if (state.updateEditor) {
@@ -162,7 +170,7 @@
 					</div>
 				</div>
 
-				<Editor on:update={updateHandler} {language} bind:text />
+				<Editor on:update={updateHandler} {language} {text} />
 			</Card>
 
 			<div class="-mt-2">