mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-01-12 13:27:31 -08:00
Code Issues Actions Packages 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 { codeNodeEditorTheme } from '../CodeNodeEditor/theme';
import type { Range, Section } from './types'; import type { Range, Section } from './types';
import { nonTakenRanges } from './utils'; import { nonTakenRanges } from './utils';
import { isEqual } from 'lodash-es';
import { import {
autocompleteKeyMap, autocompleteKeyMap,
enterKeyMap, enterKeyMap,
@ -86,16 +85,6 @@ export default defineComponent({
editorState: null as EditorState | null, 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: { computed: {
doc(): string { doc(): string {
return this.editor.state.doc.toString(); return this.editor.state.doc.toString();
@ -144,6 +133,10 @@ export default defineComponent({
// Force segments value update by keeping track of editor state // Force segments value update by keeping track of editor state
this.editorState = this.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'; } from '@/plugins/codemirror/keymap';
import { n8nAutocompletion, n8nLang } from '@/plugins/codemirror/n8nLang'; import { n8nAutocompletion, n8nLang } from '@/plugins/codemirror/n8nLang';
import { highlighter } from '@/plugins/codemirror/resolvableHighlighter'; import { highlighter } from '@/plugins/codemirror/resolvableHighlighter';
import { isEqual } from 'lodash-es';
import { createEventBus, type EventBus } from 'n8n-design-system/utils'; import { createEventBus, type EventBus } from 'n8n-design-system/utils';
import type { IDataObject } from 'n8n-workflow'; import type { IDataObject } from 'n8n-workflow';
import { inputTheme } from './theme'; 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() { mounted() {
const extensions = [ const extensions = [
@ -122,6 +110,13 @@ export default defineComponent({
// Force segments value update by keeping track of editor state // Force segments value update by keeping track of editor state
this.editorState = this.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(() => { setTimeout(() => {
try { try {

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

@ -48,7 +48,6 @@ import {
} from '@n8n/codemirror-lang-sql'; } from '@n8n/codemirror-lang-sql';
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import { codeNodeEditorTheme } from '../CodeNodeEditor/theme'; import { codeNodeEditorTheme } from '../CodeNodeEditor/theme';
import { isEqual } from 'lodash-es';
import { import {
autocompleteKeyMap, autocompleteKeyMap,
enterKeyMap, enterKeyMap,
@ -182,22 +181,16 @@ export default defineComponent({
// Force segments value update by keeping track of editor state // Force segments value update by keeping track of editor state
this.editorState = this.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; 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() { mounted() {
if (!this.isReadOnly) codeNodeEditorEventBus.on('error-line-number', this.highlightLine); if (!this.isReadOnly) codeNodeEditorEventBus.on('error-line-number', this.highlightLine);