From f3b380db1a5ba9f200985a61fb58c7c3372755fc Mon Sep 17 00:00:00 2001
From: OlegIvaniv <me@olegivaniv.com>
Date: Tue, 15 Aug 2023 17:16:38 +0200
Subject: [PATCH] =?UTF-8?q?fix(editor):=20Fix=20code=20node=E2=80=99s=20co?=
 =?UTF-8?q?ntent=20property=20to=20be=20reactive=20(#6931)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Oleg Ivaniv <me@olegivaniv.com>
---
 .../CodeNodeEditor/CodeNodeEditor.vue         | 22 ++++++++++---------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/packages/editor-ui/src/components/CodeNodeEditor/CodeNodeEditor.vue b/packages/editor-ui/src/components/CodeNodeEditor/CodeNodeEditor.vue
index 9deed663d1d9c..77f2973eb28aa 100644
--- a/packages/editor-ui/src/components/CodeNodeEditor/CodeNodeEditor.vue
+++ b/packages/editor-ui/src/components/CodeNodeEditor/CodeNodeEditor.vue
@@ -83,12 +83,16 @@ export default defineComponent({
 		mode(newMode, previousMode: CodeExecutionMode) {
 			this.reloadLinter();
 
-			if (this.content.trim() === CODE_PLACEHOLDERS[this.language]?.[previousMode]) {
+			if (
+				this.getCurrentEditorContent().trim() === CODE_PLACEHOLDERS[this.language]?.[previousMode]
+			) {
 				this.refreshPlaceholder();
 			}
 		},
 		language(newLanguage, previousLanguage: CodeNodeEditorLanguage) {
-			if (this.content.trim() === CODE_PLACEHOLDERS[previousLanguage]?.[this.mode]) {
+			if (
+				this.getCurrentEditorContent().trim() === CODE_PLACEHOLDERS[previousLanguage]?.[this.mode]
+			) {
 				this.refreshPlaceholder();
 			}
 
@@ -100,11 +104,6 @@ export default defineComponent({
 	},
 	computed: {
 		...mapStores(useRootStore),
-		content(): string {
-			if (!this.editor) return '';
-
-			return this.editor.state.doc.toString();
-		},
 		placeholder(): string {
 			return CODE_PLACEHOLDERS[this.language]?.[this.mode] ?? '';
 		},
@@ -120,6 +119,9 @@ export default defineComponent({
 		},
 	},
 	methods: {
+		getCurrentEditorContent() {
+			return this.editor?.state.doc.toString() ?? '';
+		},
 		onMouseOver(event: MouseEvent) {
 			const fromElement = event.relatedTarget as HTMLElement;
 			const ref = this.$refs.codeNodeEditorContainer as HTMLDivElement | undefined;
@@ -151,7 +153,7 @@ export default defineComponent({
 			if (!this.editor) return;
 
 			this.editor.dispatch({
-				changes: { from: 0, to: this.content.length, insert: this.placeholder },
+				changes: { from: 0, to: this.getCurrentEditorContent().length, insert: this.placeholder },
 			});
 		},
 		highlightLine(line: number | 'final') {
@@ -159,7 +161,7 @@ export default defineComponent({
 
 			if (line === 'final') {
 				this.editor.dispatch({
-					selection: { anchor: this.content.length },
+					selection: { anchor: (this.modelValue ?? this.getCurrentEditorContent()).length },
 				});
 				return;
 			}
@@ -176,7 +178,7 @@ export default defineComponent({
 			try {
 				// @ts-ignore - undocumented fields
 				const { fromA, toB } = viewUpdate?.changedRanges[0];
-				const full = this.content.slice(fromA, toB);
+				const full = this.getCurrentEditorContent().slice(fromA, toB);
 				const lastDotIndex = full.lastIndexOf('.');
 
 				let context = null;