fix(editor): Improve expression editor performance by removing watche…

…rs (#8900)
n8n-io · Mar 15, 2024 · 788d790 · 788d790
1 parent d605854
commit 788d790
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 31 deletions.
diff --git a/packages/editor-ui/src/components/HtmlEditor/HtmlEditor.vue b/packages/editor-ui/src/components/HtmlEditor/HtmlEditor.vue
@@ -80,16 +80,6 @@ export default defineComponent({
 			editorState: null as EditorState | null,
 		};
 	},
-	watch: {
-		displayableSegments(segments, newSegments) {
-			if (isEqual(segments, newSegments)) return;
-
-			highlighter.removeColor(this.editor, this.plaintextSegments);
-			highlighter.addColor(this.editor, this.resolvableSegments);
-
-			this.$emit('update:modelValue', this.editor?.state.doc.toString());
-		},
-	},
 	computed: {
 		doc(): string {
 			return this.editor.state.doc.toString();
@@ -139,6 +129,10 @@ export default defineComponent({
 
 					// Force segments value update by keeping track of editor state
 					this.editorState = this.editor.state;
+					highlighter.removeColor(this.editor, this.plaintextSegments);
+					highlighter.addColor(this.editor, this.resolvableSegments);
+
+					this.$emit('update:modelValue', this.editor?.state.doc.toString());
 				}),
 			];
 		},

diff --git a/packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorInput.vue b/packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorInput.vue
@@ -67,17 +67,6 @@ export default defineComponent({
 				},
 			});
 		},
-		displayableSegments(segments, newSegments) {
-			if (isEqual(segments, newSegments)) return;
-
-			highlighter.removeColor(this.editor, this.plaintextSegments);
-			highlighter.addColor(this.editor, this.resolvableSegments);
-
-			this.$emit('change', {
-				value: this.unresolvedExpression,
-				segments: this.displayableSegments,
-			});
-		},
 	},
 	mounted() {
 		const extensions = [
@@ -115,6 +104,13 @@ export default defineComponent({
 
 				// Force segments value update by keeping track of editor state
 				this.editorState = this.editor.state;
+				highlighter.removeColor(this.editor, this.plaintextSegments);
+				highlighter.addColor(this.editor, this.resolvableSegments);
+
+				this.$emit('change', {
+					value: this.unresolvedExpression,
+					segments: this.displayableSegments,
+				});
 
 				setTimeout(() => {
 					try {

diff --git a/packages/editor-ui/src/components/SqlEditor/SqlEditor.vue b/packages/editor-ui/src/components/SqlEditor/SqlEditor.vue
@@ -176,22 +176,16 @@ export default defineComponent({
 
 						// Force segments value update by keeping track of editor state
 						this.editorState = this.editor.state;
+						highlighter.removeColor(this.editor, this.plaintextSegments);
+						highlighter.addColor(this.editor, this.resolvableSegments);
+
+						this.$emit('update:modelValue', this.editor?.state.doc.toString());
 					}),
 				);
 			}
 			return extensions;
 		},
 	},
-	watch: {
-		displayableSegments(segments, newSegments) {
-			if (isEqual(segments, newSegments)) return;
-
-			highlighter.removeColor(this.editor, this.plaintextSegments);
-			highlighter.addColor(this.editor, this.resolvableSegments);
-
-			this.$emit('update:modelValue', this.editor?.state.doc.toString());
-		},
-	},
 	mounted() {
 		if (!this.isReadOnly) codeNodeEditorEventBus.on('error-line-number', this.highlightLine);