n8n-io/n8n
1
1
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-09-11 13:15:28 +03:00
Code Issues Projects Releases Wiki Activity

fix(editor): Improve expression editor performance by removing watchers (#8900)

Browse Source
This commit is contained in:
Elias Meire 2024-03-15 15:14:20 +01:00 committed by GitHub
parent a92d8bfc6e
commit a5261d6ebb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 15 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
packages/editor-ui/src/components/HtmlEditor/HtmlEditor.vue
View File

@ -41,7 +41,6 @@ import { highlighter } from '@/plugins/codemirror/resolvableHighlighter';
import { codeNodeEditorTheme } from '../CodeNodeEditor/theme';
import type { Range, Section } from './types';
import { nonTakenRanges } from './utils';
import { isEqual } from 'lodash-es';
import {
autocompleteKeyMap,
enterKeyMap,
@ -86,16 +85,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();
@ -144,6 +133,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());
}),
];
},

19
packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorInput.vue
View File

@ -21,7 +21,6 @@ import {
} from '@/plugins/codemirror/keymap';
import { n8nAutocompletion, n8nLang } from '@/plugins/codemirror/n8nLang';
import { highlighter } from '@/plugins/codemirror/resolvableHighlighter';
import { isEqual } from 'lodash-es';
import { createEventBus, type EventBus } from 'n8n-design-system/utils';
import type { IDataObject } from 'n8n-workflow';
import { inputTheme } from './theme';
@ -83,17 +82,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 = [
@ -122,6 +110,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 {

15
packages/editor-ui/src/components/SqlEditor/SqlEditor.vue
View File

@ -48,7 +48,6 @@ import {
} from '@n8n/codemirror-lang-sql';
import { defineComponent } from 'vue';
import { codeNodeEditorTheme } from '../CodeNodeEditor/theme';
import { isEqual } from 'lodash-es';
import {
autocompleteKeyMap,
enterKeyMap,
@ -182,22 +181,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);