fix(editor): Force parse on long expressions (#5009)

⚡ Force parse on long expressions
n8n-io · Dec 22, 2022 · 22fcc8f · 22fcc8f
1 parent c738aa5
commit 22fcc8f
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 1 deletion.
diff --git a/packages/editor-ui/src/components/ExpressionEditorModal/ExpressionEditorModalInput.vue b/packages/editor-ui/src/components/ExpressionEditorModal/ExpressionEditorModalInput.vue
@@ -16,6 +16,7 @@ import { highlighter } from '@/plugins/codemirror/resolvableHighlighter';
 import { inputTheme } from './theme';
 
 import type { IVariableItemSelected } from '@/Interface';
+import { forceParse } from '@/utils/forceParse';
 
 export default mixins(expressionManager, workflowHelpers).extend({
 	name: 'ExpressionEditorModalInput',
@@ -40,6 +41,7 @@ export default mixins(expressionManager, workflowHelpers).extend({
 			doubleBraceHandler(),
 			EditorView.lineWrapping,
 			EditorState.readOnly.of(this.isReadOnly),
+			EditorView.domEventHandlers({ scroll: forceParse }),
 			EditorView.updateListener.of((viewUpdate) => {
 				if (!this.editor || !viewUpdate.docChanged) return;
 

diff --git a/packages/editor-ui/src/components/ExpressionEditorModal/ExpressionEditorModalOutput.vue b/packages/editor-ui/src/components/ExpressionEditorModal/ExpressionEditorModalOutput.vue
@@ -11,6 +11,7 @@ import { highlighter } from '@/plugins/codemirror/resolvableHighlighter';
 import { outputTheme } from './theme';
 
 import type { Plaintext, Resolved, Segment } from '@/types/expressions';
+import { forceParse } from '@/utils/forceParse';
 
 export default Vue.extend({
 	name: 'ExpressionEditorModalOutput',
@@ -37,7 +38,12 @@ export default Vue.extend({
 		};
 	},
 	mounted() {
-		const extensions = [outputTheme(), EditorState.readOnly.of(true), EditorView.lineWrapping];
+		const extensions = [
+			outputTheme(),
+			EditorState.readOnly.of(true),
+			EditorView.lineWrapping,
+			EditorView.domEventHandlers({ scroll: forceParse }),
+		];
 
 		this.editor = new EditorView({
 			parent: this.$refs.root as HTMLDivElement,

diff --git a/packages/editor-ui/src/utils/forceParse.ts b/packages/editor-ui/src/utils/forceParse.ts
@@ -0,0 +1,14 @@
+import { EditorView } from '@codemirror/view';
+
+/**
+ * Simulate user action to force parser to catch up during scroll.
+ */
+export function forceParse(_: Event, view: EditorView) {
+	view.dispatch({
+		changes: { from: view.viewport.to, insert: '_' },
+	});
+
+	view.dispatch({
+		changes: { from: view.viewport.to - 1, to: view.viewport.to, insert: '' },
+	});
+}