From 972eae880b38620891d49bae48d951c5418eeaa2 Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Mon, 26 Jun 2023 17:20:56 +0300
Subject: [PATCH] fix: fix expression editor bug causing code mirror to no
 longer be reactive

---
 .../N8nRadioButtons/RadioButton.vue           |  2 --
 .../N8nRadioButtons/RadioButtons.vue          |  2 +-
 .../src/components/N8nTooltip/Tooltip.vue     | 24 +++++++------------
 .../ExpressionEditorModalInput.vue            |  3 +++
 .../components/ExpressionParameterInput.vue   |  2 +-
 .../src/components/HtmlEditor/HtmlEditor.vue  |  3 +++
 .../InlineExpressionEditorInput.vue           |  6 ++++-
 .../src/components/ParameterInput.vue         | 10 +++++---
 .../src/components/ParameterInputExpanded.vue |  2 +-
 .../src/components/ParameterInputFull.vue     |  4 +++-
 .../src/components/ParameterInputWrapper.vue  | 16 +------------
 .../src/components/ParameterOptions.vue       | 11 +++++----
 packages/editor-ui/src/components/RunData.vue |  9 ++++---
 .../src/components/SqlEditor/SqlEditor.vue    |  4 ++++
 .../editor-ui/src/mixins/expressionManager.ts | 11 +++++----
 packages/editor-ui/src/views/NodeView.vue     | 14 +++++------
 packages/editor-ui/vite.config.ts             |  4 ++--
 17 files changed, 62 insertions(+), 65 deletions(-)

diff --git a/packages/design-system/src/components/N8nRadioButtons/RadioButton.vue b/packages/design-system/src/components/N8nRadioButtons/RadioButton.vue
index 221be4b48f..f20979b8e1 100644
--- a/packages/design-system/src/components/N8nRadioButtons/RadioButton.vue
+++ b/packages/design-system/src/components/N8nRadioButtons/RadioButton.vue
@@ -9,7 +9,6 @@
 		}"
 		aria-checked="true"
 	>
-		<input type="radio" tabindex="-1" autocomplete="off" :class="$style.input" :value="value" />
 		<div
 			:class="{
 				[$style.button]: true,
@@ -18,7 +17,6 @@
 				[$style.disabled]: disabled,
 			}"
 			:data-test-id="`radio-button-${value}`"
-			@click="$emit('click')"
 		>
 			{{ label }}
 		</div>
diff --git a/packages/design-system/src/components/N8nRadioButtons/RadioButtons.vue b/packages/design-system/src/components/N8nRadioButtons/RadioButtons.vue
index 78aaa19923..4ff7d63e91 100644
--- a/packages/design-system/src/components/N8nRadioButtons/RadioButtons.vue
+++ b/packages/design-system/src/components/N8nRadioButtons/RadioButtons.vue
@@ -10,7 +10,7 @@
 			:active="modelValue === option.value"
 			:size="size"
 			:disabled="disabled || option.disabled"
-			@click="() => onClick(option)"
+			@click.prevent.stop="onClick(option)"
 		/>
 	</div>
 </template>
diff --git a/packages/design-system/src/components/N8nTooltip/Tooltip.vue b/packages/design-system/src/components/N8nTooltip/Tooltip.vue
index c47d945c2c..8e665d53ef 100644
--- a/packages/design-system/src/components/N8nTooltip/Tooltip.vue
+++ b/packages/design-system/src/components/N8nTooltip/Tooltip.vue
@@ -1,21 +1,15 @@
 <template>
 	<el-tooltip v-bind="{ ...$props, ...$attrs }">
-		<template v-for="(_, slotName) in $slots" #[slotName]>
-			<slot :name="slotName" />
-			<div
-				:key="slotName"
-				v-if="slotName === 'content' && buttons.length"
-				:class="$style.buttons"
-				:style="{ justifyContent: justifyButtons }"
-			>
-				<n8n-button
-					v-for="button in buttons"
-					:key="button.attrs.label"
-					v-bind="button.attrs"
-					v-on="button.listeners"
-				/>
-			</div>
+		<template #content>
+			<n8n-button
+				v-for="button in buttons"
+				:key="button.attrs.label"
+				v-bind="button.attrs"
+				v-on="button.listeners"
+			/>
+			<slot name="content"></slot>
 		</template>
+		<slot />
 	</el-tooltip>
 </template>
 
diff --git a/packages/editor-ui/src/components/ExpressionEditorModal/ExpressionEditorModalInput.vue b/packages/editor-ui/src/components/ExpressionEditorModal/ExpressionEditorModalInput.vue
index 4c7303b99c..12292ebcc9 100644
--- a/packages/editor-ui/src/components/ExpressionEditorModal/ExpressionEditorModalInput.vue
+++ b/packages/editor-ui/src/components/ExpressionEditorModal/ExpressionEditorModalInput.vue
@@ -69,6 +69,8 @@ export default defineComponent({
 			EditorView.updateListener.of((viewUpdate) => {
 				if (!this.editor || !viewUpdate.docChanged) return;
 
+				this.editorState = this.editor.state;
+
 				highlighter.removeColor(this.editor, this.plaintextSegments);
 				highlighter.addColor(this.editor, this.resolvableSegments);
 
@@ -94,6 +96,7 @@ export default defineComponent({
 			}),
 		});
 
+		this.editorState = this.editor.state;
 		this.editor.focus();
 
 		highlighter.addColor(this.editor, this.resolvableSegments);
diff --git a/packages/editor-ui/src/components/ExpressionParameterInput.vue b/packages/editor-ui/src/components/ExpressionParameterInput.vue
index 02b15c28a6..8567f95123 100644
--- a/packages/editor-ui/src/components/ExpressionParameterInput.vue
+++ b/packages/editor-ui/src/components/ExpressionParameterInput.vue
@@ -22,7 +22,7 @@
 				:path="path"
 				@focus="onFocus"
 				@blur="onBlur"
-				@update="onChange"
+				@change="onChange"
 				ref="inlineInput"
 			/>
 			<n8n-icon
diff --git a/packages/editor-ui/src/components/HtmlEditor/HtmlEditor.vue b/packages/editor-ui/src/components/HtmlEditor/HtmlEditor.vue
index d018b1e178..095d219a5f 100644
--- a/packages/editor-ui/src/components/HtmlEditor/HtmlEditor.vue
+++ b/packages/editor-ui/src/components/HtmlEditor/HtmlEditor.vue
@@ -106,6 +106,8 @@ export default defineComponent({
 				EditorView.updateListener.of((viewUpdate: ViewUpdate) => {
 					if (!viewUpdate.docChanged) return;
 
+					this.editorState = this.editor.state;
+
 					this.getHighlighter()?.removeColor(this.editor, this.htmlSegments);
 					this.getHighlighter()?.addColor(this.editor, this.resolvableSegments);
 
@@ -270,6 +272,7 @@ export default defineComponent({
 		const state = EditorState.create({ doc, extensions: this.extensions });
 
 		this.editor = new EditorView({ parent: this.root(), state });
+		this.editorState = this.editor.state;
 
 		this.getHighlighter()?.addColor(this.editor, this.resolvableSegments);
 	},
diff --git a/packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorInput.vue b/packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorInput.vue
index 8987354c31..762b7b305f 100644
--- a/packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorInput.vue
+++ b/packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorInput.vue
@@ -114,6 +114,9 @@ export default defineComponent({
 			EditorView.updateListener.of((viewUpdate) => {
 				if (!this.editor || !viewUpdate.docChanged) return;
 
+				// 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);
 
@@ -137,10 +140,11 @@ export default defineComponent({
 				extensions,
 			}),
 		});
+		this.editorState = this.editor.state;
 
 		highlighter.addColor(this.editor, this.resolvableSegments);
 
-		this.$emit('update', {
+		this.$emit('change', {
 			value: this.unresolvedExpression,
 			segments: this.displayableSegments,
 		});
diff --git a/packages/editor-ui/src/components/ParameterInput.vue b/packages/editor-ui/src/components/ParameterInput.vue
index 1b84edc4fa..2b58cd2378 100644
--- a/packages/editor-ui/src/components/ParameterInput.vue
+++ b/packages/editor-ui/src/components/ParameterInput.vue
@@ -133,14 +133,14 @@
 
 				<n8n-input
 					v-else
-					v-model="tempValue"
+					:modelValue="tempValue"
 					ref="inputField"
 					class="input-with-opener"
 					:size="inputSize"
 					:type="getStringInputType"
 					:rows="getArgument('rows')"
 					:disabled="isReadOnly"
-					@update:modelValue="onTextInputChange($event) && valueChanged($event)"
+					@update:modelValue="onUpdateTextInput"
 					@keydown.stop
 					@focus="setFocus"
 					@blur="onBlur"
@@ -220,7 +220,7 @@
 				:min="getArgument('minValue')"
 				:precision="getArgument('numberPrecision')"
 				:disabled="isReadOnly"
-				@update:modelValue="onTextInputChange($event) && valueChanged($event)"
+				@update:modelValue="onUpdateTextInput"
 				@focus="setFocus"
 				@blur="onBlur"
 				@keydown.stop
@@ -1022,6 +1022,10 @@ export default defineComponent({
 		valueChangedDebounced(value: NodeParameterValueType | {} | Date) {
 			void this.callDebounced('valueChanged', { debounceTime: 100 }, value);
 		},
+		onUpdateTextInput(value: string) {
+			this.valueChanged(value);
+			this.onTextInputChange(value);
+		},
 		valueChanged(value: NodeParameterValueType | {} | Date) {
 			if (this.parameter.name === 'nodeCredentialType') {
 				this.activeCredentialType = value as string;
diff --git a/packages/editor-ui/src/components/ParameterInputExpanded.vue b/packages/editor-ui/src/components/ParameterInputExpanded.vue
index c22de12296..fb9621a26c 100644
--- a/packages/editor-ui/src/components/ParameterInputExpanded.vue
+++ b/packages/editor-ui/src/components/ParameterInputExpanded.vue
@@ -11,7 +11,7 @@
 		<template #options>
 			<parameter-options
 				:parameter="parameter"
-				:modelValue="value"
+				:value="value"
 				:isReadOnly="false"
 				:showOptions="true"
 				:isValueExpression="isValueExpression"
diff --git a/packages/editor-ui/src/components/ParameterInputFull.vue b/packages/editor-ui/src/components/ParameterInputFull.vue
index f3b0c097ed..9b5c5b6c24 100644
--- a/packages/editor-ui/src/components/ParameterInputFull.vue
+++ b/packages/editor-ui/src/components/ParameterInputFull.vue
@@ -12,7 +12,7 @@
 			<parameter-options
 				v-if="displayOptions"
 				:parameter="parameter"
-				:modelValue="value"
+				:value="value"
 				:isReadOnly="isReadOnly"
 				:showOptions="displayOptions"
 				:showExpressionSelector="showExpressionSelector"
@@ -234,12 +234,14 @@ export default defineComponent({
 			this.menuExpanded = expanded;
 		},
 		optionSelected(command: string) {
+			console.log('optionSelected', command);
 			this.eventBus.emit('optionSelected', command);
 		},
 		valueChanged(parameterData: IUpdateInformation) {
 			this.$emit('update', parameterData);
 		},
 		onTextInput(parameterData: IUpdateInformation) {
+			console.log('onTextInput', parameterData);
 			if (isValueExpression(this.parameter, parameterData.value)) {
 				this.eventBus.emit('optionSelected', 'addExpression');
 			}
diff --git a/packages/editor-ui/src/components/ParameterInputWrapper.vue b/packages/editor-ui/src/components/ParameterInputWrapper.vue
index 59e18b166c..957b144509 100644
--- a/packages/editor-ui/src/components/ParameterInputWrapper.vue
+++ b/packages/editor-ui/src/components/ParameterInputWrapper.vue
@@ -18,7 +18,7 @@
 			:expressionEvaluated="expressionValueComputed"
 			:label="label"
 			:data-test-id="`parameter-input-${parameter.name}`"
-			:event-bus="internalEventBus"
+			:event-bus="eventBus"
 			@focus="onFocus"
 			@blur="onBlur"
 			@drop="onDrop"
@@ -72,17 +72,6 @@ export default defineComponent({
 		ParameterInput,
 		InputHint,
 	},
-	data() {
-		return {
-			internalEventBus: createEventBus(),
-		};
-	},
-	mounted() {
-		this.eventBus.on('optionSelected', this.optionSelected);
-	},
-	beforeUnmount() {
-		this.eventBus.off('optionSelected', this.optionSelected);
-	},
 	props: {
 		isReadOnly: {
 			type: Boolean,
@@ -231,9 +220,6 @@ export default defineComponent({
 		onDrop(data: string) {
 			this.$emit('drop', data);
 		},
-		optionSelected(command: string) {
-			this.internalEventBus.emit('optionSelected', command);
-		},
 		onValueChanged(parameterData: IUpdateInformation) {
 			this.$emit('update', parameterData);
 		},
diff --git a/packages/editor-ui/src/components/ParameterOptions.vue b/packages/editor-ui/src/components/ParameterOptions.vue
index 5f18f3d151..b396e6b1a2 100644
--- a/packages/editor-ui/src/components/ParameterOptions.vue
+++ b/packages/editor-ui/src/components/ParameterOptions.vue
@@ -55,7 +55,7 @@ export default defineComponent({
 		isReadOnly: {
 			type: Boolean,
 		},
-		modelValue: {
+		value: {
 			type: [Object, String, Number, Boolean, Array] as PropType<NodeParameterValueType>,
 		},
 		showOptions: {
@@ -88,10 +88,10 @@ export default defineComponent({
 	},
 	computed: {
 		isDefault(): boolean {
-			return this.parameter.default === this.modelValue;
+			return this.parameter.default === this.value;
 		},
 		isValueExpression(): boolean {
-			return isValueExpression(this.parameter, this.modelValue);
+			return isValueExpression(this.parameter, this.value);
 		},
 		isHtmlEditor(): boolean {
 			return this.getArgument('editor') === 'htmlEditor';
@@ -153,8 +153,8 @@ export default defineComponent({
 			if (
 				this.hasRemoteMethod ||
 				(this.parameter.type === 'resourceLocator' &&
-					isResourceLocatorValue(this.modelValue) &&
-					this.modelValue.mode === 'list')
+					isResourceLocatorValue(this.value) &&
+					this.value.mode === 'list')
 			) {
 				return [
 					{
@@ -173,6 +173,7 @@ export default defineComponent({
 			this.$emit('menu-expanded', visible);
 		},
 		onViewSelected(selected: string) {
+			console.log('onViewSelected', selected);
 			if (selected === 'expression') {
 				this.$emit(
 					'update:modelValue',
diff --git a/packages/editor-ui/src/components/RunData.vue b/packages/editor-ui/src/components/RunData.vue
index fd1d773804..5c2971db02 100644
--- a/packages/editor-ui/src/components/RunData.vue
+++ b/packages/editor-ui/src/components/RunData.vue
@@ -146,11 +146,10 @@
 				></n8n-option>
 			</n8n-select>
 
-			<n8n-tooltip
-				placement="right"
-				v-if="canLinkRuns"
-				:content="$locale.baseText(linkedRuns ? 'runData.unlinking.hint' : 'runData.linking.hint')"
-			>
+			<n8n-tooltip placement="right" v-if="canLinkRuns">
+				<template #content>
+					{{ $locale.baseText(linkedRuns ? 'runData.unlinking.hint' : 'runData.linking.hint') }}
+				</template>
 				<n8n-icon-button
 					v-if="linkedRuns"
 					icon="unlink"
diff --git a/packages/editor-ui/src/components/SqlEditor/SqlEditor.vue b/packages/editor-ui/src/components/SqlEditor/SqlEditor.vue
index bed7d9a2ca..cbfb0e2a6d 100644
--- a/packages/editor-ui/src/components/SqlEditor/SqlEditor.vue
+++ b/packages/editor-ui/src/components/SqlEditor/SqlEditor.vue
@@ -24,6 +24,7 @@ import {
 	highlightActiveLineGutter,
 	keymap,
 	lineNumbers,
+	ViewUpdate,
 } from '@codemirror/view';
 import {
 	MSSQL,
@@ -167,6 +168,8 @@ export default defineComponent({
 					EditorView.updateListener.of((viewUpdate: ViewUpdate) => {
 						if (!viewUpdate.docChanged || !this.editor) return;
 
+						this.editorState = this.editor.state;
+
 						highlighter.removeColor(this.editor as EditorView, this.plaintextSegments);
 						highlighter.addColor(this.editor as EditorView, this.resolvableSegments);
 
@@ -182,6 +185,7 @@ export default defineComponent({
 
 		const state = EditorState.create({ doc: this.modelValue, extensions: this.extensions });
 		this.editor = new EditorView({ parent: this.$refs.sqlEditor as HTMLDivElement, state });
+		this.editorState = this.editor.state;
 		highlighter.addColor(this.editor as EditorView, this.resolvableSegments);
 	},
 	methods: {
diff --git a/packages/editor-ui/src/mixins/expressionManager.ts b/packages/editor-ui/src/mixins/expressionManager.ts
index f0cf517e50..adf6d0fd63 100644
--- a/packages/editor-ui/src/mixins/expressionManager.ts
+++ b/packages/editor-ui/src/mixins/expressionManager.ts
@@ -24,6 +24,7 @@ export const expressionManager = defineComponent({
 		return {
 			editor: {} as EditorView,
 			skipSegments: [] as string[],
+			editorState: undefined,
 		};
 	},
 	watch: {
@@ -72,24 +73,24 @@ export const expressionManager = defineComponent({
 		},
 
 		segments(): Segment[] {
-			if (!this.editor?.state) return [];
+			if (!this.editorState || !this.editorState) return [];
 
 			const rawSegments: RawSegment[] = [];
 
 			const fullTree = ensureSyntaxTree(
-				this.editor.state,
-				this.editor.state.doc.length,
+				this.editorState,
+				this.editorState.doc.length,
 				EXPRESSION_EDITOR_PARSER_TIMEOUT,
 			);
 
 			if (fullTree === null) {
-				throw new Error(`Failed to parse expression: ${this.editor.state.doc.toString()}`);
+				throw new Error(`Failed to parse expression: ${this.editorValue}`);
 			}
 
 			const skipSegments = ['Program', 'Script', 'Document', ...this.skipSegments];
 
 			fullTree.cursor().iterate((node) => {
-				const text = this.editor.state.sliceDoc(node.from, node.to);
+				const text = this.editorState.sliceDoc(node.from, node.to);
 
 				if (skipSegments.includes(node.type.name)) return;
 
diff --git a/packages/editor-ui/src/views/NodeView.vue b/packages/editor-ui/src/views/NodeView.vue
index 3479980e9f..baedfaefc9 100644
--- a/packages/editor-ui/src/views/NodeView.vue
+++ b/packages/editor-ui/src/views/NodeView.vue
@@ -630,14 +630,6 @@ export default defineComponent({
 			NODE_CREATOR_OPEN_SOURCES,
 		};
 	},
-	beforeUnmount() {
-		this.resetWorkspace();
-		// Make sure the event listeners get removed again else we
-		// could add up with them registered multiple times
-		document.removeEventListener('keydown', this.keyDown);
-		document.removeEventListener('keyup', this.keyUp);
-		this.unregisterCustomAction('showNodeCreator');
-	},
 	methods: {
 		showTriggerMissingToltip(isVisible: boolean) {
 			this.showTriggerMissingTooltip = isVisible;
@@ -3961,6 +3953,12 @@ export default defineComponent({
 		nodeViewEventBus.off('saveWorkflow', this.saveCurrentWorkflowExternal);
 	},
 	beforeUnmount() {
+		// Make sure the event listeners get removed again else we
+		// could add up with them registered multiple times
+		document.removeEventListener('keydown', this.keyDown);
+		document.removeEventListener('keyup', this.keyUp);
+		this.unregisterCustomAction('showNodeCreator');
+
 		this.resetWorkspace();
 		this.instance.unbind();
 		this.instance.destroy();
diff --git a/packages/editor-ui/vite.config.ts b/packages/editor-ui/vite.config.ts
index 2f5b8db082..9ec24c11f5 100644
--- a/packages/editor-ui/vite.config.ts
+++ b/packages/editor-ui/vite.config.ts
@@ -89,8 +89,8 @@ export default mergeConfig(
 	defineConfig({
 		define: {
 			// This causes test to fail but is required for actually running it
-			...(NODE_ENV !== 'test' ? { global: 'globalThis' } : {}),
-			...(NODE_ENV === 'development' ? { process: { env: {} } } : {}),
+			// ...(NODE_ENV !== 'test' ? { 'global': 'globalThis' } : {}),
+			...(NODE_ENV === 'development' ? { 'process.env': {} } : {}),
 			BASE_PATH: `'${publicPath}'`,
 		},
 		plugins,