From 788d7907b2629c73f4e556fd42fb636e4d1eae77 Mon Sep 17 00:00:00 2001 From: Elias Meire Date: Fri, 15 Mar 2024 15:14:20 +0100 Subject: [PATCH] fix(editor): Improve expression editor performance by removing watchers (#8900) --- .../src/components/HtmlEditor/HtmlEditor.vue | 14 ++++---------- .../InlineExpressionEditorInput.vue | 18 +++++++----------- .../src/components/SqlEditor/SqlEditor.vue | 14 ++++---------- 3 files changed, 15 insertions(+), 31 deletions(-) diff --git a/packages/editor-ui/src/components/HtmlEditor/HtmlEditor.vue b/packages/editor-ui/src/components/HtmlEditor/HtmlEditor.vue index 01d4ea5a5cb90..192bf0bed7034 100644 --- 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 index 63190abb0b696..8db4d45187d77 100644 --- 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 index 087f853747c68..b0937bfbfecca 100644 --- 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);