fix(editor): Prevent duplicate values in preview for SQL editor (#9129)

packages/editor-ui/src/components/ExpressionEdit.vue

@@ -65,9 +65,10 @@
 							{{ $locale.baseText('expressionEdit.resultOfItem1') }}
 						</div>
 						<div :class="{ 'ph-no-capture': redactValues }">
-							<ExpressionEditorModalOutput
+							<ExpressionOutput
 								ref="expressionResult"
 								:segments="segments"
+								:extensions="theme"
 								data-test-id="expression-modal-output"
 							/>
 						</div>
@@ -82,7 +83,6 @@
 import { defineComponent } from 'vue';
 import { mapStores } from 'pinia';
 import ExpressionEditorModalInput from '@/components/ExpressionEditorModal/ExpressionEditorModalInput.vue';
-import ExpressionEditorModalOutput from '@/components/ExpressionEditorModal/ExpressionEditorModalOutput.vue';
 import VariableSelector from '@/components/VariableSelector.vue';
 
 import type { IVariableItemSelected } from '@/Interface';
@@ -96,12 +96,14 @@ import { createExpressionTelemetryPayload } from '@/utils/telemetryUtils';
 import { useDebounce } from '@/composables/useDebounce';
 
 import type { Segment } from '@/types/expressions';
+import ExpressionOutput from './InlineExpressionEditor/ExpressionOutput.vue';
+import { outputTheme } from './ExpressionEditorModal/theme';
 
 export default defineComponent({
 	name: 'ExpressionEdit',
 	components: {
 		ExpressionEditorModalInput,
-		ExpressionEditorModalOutput,
+		ExpressionOutput,
 		VariableSelector,
 	},
 	props: {
@@ -149,6 +151,7 @@ export default defineComponent({
 			latestValue: '',
 			segments: [] as Segment[],
 			expressionsDocsUrl: EXPRESSIONS_DOCS_URL,
+			theme: outputTheme(),
 		};
 	},
 	computed: {
@@ -160,11 +163,7 @@ export default defineComponent({
 			this.latestValue = this.modelValue;
 
 			const resolvedExpressionValue =
-				(
-					this.$refs.expressionResult as {
-						getValue: () => string;
-					}
-				)?.getValue() || '';
+				(this.$refs.expressionResult as InstanceType<typeof ExpressionOutput>)?.getValue() || '';
 			void this.externalHooks.run('expressionEdit.dialogVisibleChanged', {
 				dialogVisible: newValue,
 				parameter: this.parameter,

packages/editor-ui/src/components/ExpressionEditorModal/ExpressionEditorModalOutput.vue

@@ -1,101 +0,0 @@
-<template>
-	<div ref="root"></div>
-</template>
-
-<script lang="ts">
-import { EditorView } from '@codemirror/view';
-import { EditorState } from '@codemirror/state';
-import { defineComponent } from 'vue';
-import type { PropType } from 'vue';
-
-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 defineComponent({
-	name: 'ExpressionEditorModalOutput',
-	props: {
-		segments: {
-			type: Array as PropType<Segment[]>,
-			required: true,
-		},
-	},
-	data() {
-		return {
-			editor: null as EditorView | null,
-		};
-	},
-	computed: {
-		resolvedExpression(): string {
-			return this.segments.reduce((acc, segment) => {
-				acc += segment.kind === 'resolvable' ? segment.resolved : segment.plaintext;
-				return acc;
-			}, '');
-		},
-		plaintextSegments(): Plaintext[] {
-			return this.segments.filter((s): s is Plaintext => s.kind === 'plaintext');
-		},
-		resolvedSegments(): Resolved[] {
-			let cursor = 0;
-
-			return this.segments
-				.map((segment) => {
-					segment.from = cursor;
-
-					cursor +=
-						segment.kind === 'plaintext'
-							? segment.plaintext.length
-							: segment.resolved
-								? segment.resolved.toString().length
-								: 0;
-
-					segment.to = cursor;
-
-					return segment;
-				})
-				.filter((segment): segment is Resolved => segment.kind === 'resolvable');
-		},
-	},
-	watch: {
-		segments() {
-			if (!this.editor) return;
-
-			this.editor.dispatch({
-				changes: { from: 0, to: this.editor.state.doc.length, insert: this.resolvedExpression },
-			});
-
-			highlighter.addColor(this.editor, this.resolvedSegments);
-			highlighter.removeColor(this.editor, this.plaintextSegments);
-		},
-	},
-	mounted() {
-		const extensions = [
-			outputTheme(),
-			EditorState.readOnly.of(true),
-			EditorView.lineWrapping,
-			EditorView.editable.of(false),
-			EditorView.domEventHandlers({ scroll: forceParse }),
-		];
-
-		this.editor = new EditorView({
-			parent: this.$refs.root as HTMLDivElement,
-			state: EditorState.create({
-				doc: this.resolvedExpression,
-				extensions,
-			}),
-		});
-	},
-	beforeUnmount() {
-		this.editor?.destroy();
-	},
-	methods: {
-		getValue() {
-			return '=' + this.resolvedExpression;
-		},
-	},
-});
-</script>
-
-<style lang="scss"></style>

packages/editor-ui/src/components/InlineExpressionEditor/ExpressionOutput.vue

@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import { EditorState, type Extension } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
+
+import { useI18n } from '@/composables/useI18n';
+import { highlighter } from '@/plugins/codemirror/resolvableHighlighter';
+import type { Plaintext, Resolved, Segment } from '@/types/expressions';
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { forceParse } from '@/utils/forceParse';
+
+interface ExpressionOutputProps {
+	segments: Segment[];
+	extensions?: Extension[];
+}
+
+const props = withDefaults(defineProps<ExpressionOutputProps>(), { extensions: () => [] });
+
+const i18n = useI18n();
+
+const editor = ref<EditorView | null>(null);
+const root = ref<HTMLElement | null>(null);
+
+const resolvedExpression = computed(() => {
+	if (props.segments.length === 0) {
+		return i18n.baseText('parameterInput.emptyString');
+	}
+
+	return props.segments.reduce(
+		(acc, segment) => {
+			// skip duplicate segments
+			if (acc.cursor >= segment.to) return acc;
+
+			acc.resolved += segment.kind === 'resolvable' ? String(segment.resolved) : segment.plaintext;
+			acc.cursor = segment.to;
+
+			return acc;
+		},
+		{ resolved: '', cursor: 0 },
+	).resolved;
+});
+
+const plaintextSegments = computed<Plaintext[]>(() => {
+	return props.segments.filter((s): s is Plaintext => s.kind === 'plaintext');
+});
+
+const resolvedSegments = computed<Resolved[]>(() => {
+	if (props.segments.length === 0) {
+		const emptyExpression = resolvedExpression.value;
+		const emptySegment: Resolved = {
+			from: 0,
+			to: emptyExpression.length,
+			kind: 'resolvable',
+			error: null,
+			resolvable: '',
+			resolved: emptyExpression,
+			state: 'pending',
+		};
+		return [emptySegment];
+	}
+
+	let cursor = 0;
+
+	return props.segments
+		.map((segment) => {
+			segment.from = cursor;
+			cursor +=
+				segment.kind === 'plaintext'
+					? segment.plaintext.length
+					: segment.resolved
+						? (segment.resolved as string | number | boolean).toString().length
+						: 0;
+			segment.to = cursor;
+			return segment;
+		})
+		.filter((segment): segment is Resolved => segment.kind === 'resolvable');
+});
+
+watch(
+	() => props.segments,
+	() => {
+		if (!editor.value) return;
+
+		editor.value.dispatch({
+			changes: { from: 0, to: editor.value.state.doc.length, insert: resolvedExpression.value },
+		});
+
+		highlighter.addColor(editor.value as EditorView, resolvedSegments.value);
+		highlighter.removeColor(editor.value as EditorView, plaintextSegments.value);
+	},
+);
+
+onMounted(() => {
+	editor.value = new EditorView({
+		parent: root.value as HTMLElement,
+		state: EditorState.create({
+			doc: resolvedExpression.value,
+			extensions: [
+				EditorState.readOnly.of(true),
+				EditorView.lineWrapping,
+				EditorView.editable.of(false),
+				EditorView.domEventHandlers({ scroll: forceParse }),
+				...props.extensions,
+			],
+		}),
+	});
+});
+
+onBeforeUnmount(() => {
+	editor.value?.destroy();
+});
+
+defineExpose({ getValue: () => '=' + resolvedExpression.value });
+</script>
+
+<template>
+	<div ref="root" data-test-id="expression-output"></div>
+</template>

packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorOutput.vue

@@ -1,13 +1,11 @@
 <script setup lang="ts">
-import { EditorView } from '@codemirror/view';
-import { EditorState, type SelectionRange } from '@codemirror/state';
+import type { EditorState, SelectionRange } from '@codemirror/state';
 
 import { useI18n } from '@/composables/useI18n';
-import type { Plaintext, Resolved, Segment } from '@/types/expressions';
-import { highlighter } from '@/plugins/codemirror/resolvableHighlighter';
-import { computed, onMounted, onBeforeUnmount, ref, watch } from 'vue';
-import { outputTheme } from './theme';
+import type { Segment } from '@/types/expressions';
+import ExpressionOutput from './ExpressionOutput.vue';
 import InlineExpressionTip from './InlineExpressionTip.vue';
+import { outputTheme } from './theme';
 
 interface InlineExpressionEditorOutputProps {
 	segments: Segment[];
@@ -15,13 +13,11 @@ interface InlineExpressionEditorOutputProps {
 	unresolvedExpression?: string;
 	editorState?: EditorState;
 	selection?: SelectionRange;
-	isReadOnly?: boolean;
 	visible?: boolean;
 	noInputData?: boolean;
 }
 
-const props = withDefaults(defineProps<InlineExpressionEditorOutputProps>(), {
-	readOnly: false,
+withDefaults(defineProps<InlineExpressionEditorOutputProps>(), {
 	visible: false,
 	noInputData: false,
 	editorState: undefined,
@@ -30,84 +26,7 @@ const props = withDefaults(defineProps<InlineExpressionEditorOutputProps>(), {
 });
 
 const i18n = useI18n();
-
-const editor = ref<EditorView | null>(null);
-const root = ref<HTMLElement | null>(null);
-
-const resolvedExpression = computed(() => {
-	if (props.segments.length === 0) {
-		return i18n.baseText('parameterInput.emptyString');
-	}
-
-	return props.segments.reduce((acc, segment) => {
-		acc += segment.kind === 'resolvable' ? (segment.resolved as string) : segment.plaintext;
-		return acc;
-	}, '');
-});
-
-const plaintextSegments = computed<Plaintext[]>(() => {
-	return props.segments.filter((s): s is Plaintext => s.kind === 'plaintext');
-});
-
-const resolvedSegments = computed<Resolved[]>(() => {
-	if (props.segments.length === 0) {
-		const emptyExpression = resolvedExpression.value;
-		const emptySegment: Resolved = {
-			from: 0,
-			to: emptyExpression.length,
-			kind: 'resolvable',
-			error: null,
-			resolvable: '',
-			resolved: emptyExpression,
-			state: 'pending',
-		};
-		return [emptySegment];
-	}
-
-	let cursor = 0;
-
-	return props.segments
-		.map((segment) => {
-			segment.from = cursor;
-			cursor +=
-				segment.kind === 'plaintext'
-					? segment.plaintext.length
-					: segment.resolved
-						? (segment.resolved as string | number | boolean).toString().length
-						: 0;
-			segment.to = cursor;
-			return segment;
-		})
-		.filter((segment): segment is Resolved => segment.kind === 'resolvable');
-});
-
-watch(
-	() => props.segments,
-	() => {
-		if (!editor.value) return;
-
-		editor.value.dispatch({
-			changes: { from: 0, to: editor.value.state.doc.length, insert: resolvedExpression.value },
-		});
-
-		highlighter.addColor(editor.value as EditorView, resolvedSegments.value);
-		highlighter.removeColor(editor.value as EditorView, plaintextSegments.value);
-	},
-);
-
-onMounted(() => {
-	editor.value = new EditorView({
-		parent: root.value as HTMLElement,
-		state: EditorState.create({
-			doc: resolvedExpression.value,
-			extensions: [outputTheme(), EditorState.readOnly.of(true), EditorView.lineWrapping],
-		}),
-	});
-});
-
-onBeforeUnmount(() => {
-	editor.value?.destroy();
-});
+const theme = outputTheme();
 </script>
 
 <template>
@@ -116,7 +35,11 @@ onBeforeUnmount(() => {
 			{{ i18n.baseText('parameterInput.resultForItem') }} {{ hoveringItemNumber }}
 		</n8n-text>
 		<n8n-text :class="$style.body">
-			<div ref="root" data-test-id="inline-expression-editor-output"></div>
+			<ExpressionOutput
+				data-test-id="inline-expression-editor-output"
+				:segments="segments"
+				:extensions="theme"
+			></ExpressionOutput>
 		</n8n-text>
 		<div :class="$style.footer">
 			<InlineExpressionTip

packages/editor-ui/src/components/InlineExpressionEditor/__tests__/InlineExpressionEditorOutput.test.ts

@@ -0,0 +1,100 @@
+import { renderComponent } from '@/__tests__/render';
+import { createTestingPinia } from '@pinia/testing';
+import InlineExpressionEditorOutput from '../InlineExpressionEditorOutput.vue';
+
+describe('InlineExpressionEditorOutput.vue', () => {
+	test('should render duplicate segments correctly', async () => {
+		const { getByTestId } = renderComponent(InlineExpressionEditorOutput, {
+			pinia: createTestingPinia(),
+			props: {
+				hoveringItemNumber: 0,
+				segments: [
+					{
+						from: 0,
+						to: 5,
+						plaintext: '[1,2]',
+						kind: 'plaintext',
+					},
+					{
+						from: 0,
+						to: 1,
+						plaintext: '[',
+						kind: 'plaintext',
+					},
+					{
+						from: 1,
+						to: 2,
+						plaintext: '1',
+						kind: 'plaintext',
+					},
+					{
+						from: 2,
+						to: 3,
+						plaintext: ',',
+						kind: 'plaintext',
+					},
+					{
+						from: 3,
+						to: 4,
+						plaintext: '2',
+						kind: 'plaintext',
+					},
+					{
+						from: 4,
+						to: 5,
+						plaintext: ']',
+						kind: 'plaintext',
+					},
+				],
+			},
+		});
+		expect(getByTestId('inline-expression-editor-output')).toHaveTextContent('[1,2]');
+	});
+
+	test('should render segments with resolved expressions', () => {
+		const { getByTestId } = renderComponent(InlineExpressionEditorOutput, {
+			pinia: createTestingPinia(),
+			props: {
+				hoveringItemNumber: 0,
+				segments: [
+					{
+						kind: 'plaintext',
+						from: 0,
+						to: 6,
+						plaintext: 'before>',
+					},
+					{
+						kind: 'plaintext',
+						from: 6,
+						to: 7,
+						plaintext: ' ',
+					},
+					{
+						kind: 'resolvable',
+						from: 7,
+						to: 17,
+						resolvable: '{{ $now }}',
+						resolved: '[Object: "2024-04-18T09:03:26.651-04:00"]',
+						state: 'valid',
+						error: null,
+					},
+					{
+						kind: 'plaintext',
+						from: 17,
+						to: 18,
+						plaintext: ' ',
+					},
+					{
+						kind: 'plaintext',
+						from: 18,
+						to: 24,
+						plaintext: '<after',
+					},
+				],
+			},
+		});
+		expect(getByTestId('inline-expression-editor-output')).toHaveTextContent(
+			'before> [Object: "2024-04-18T09:03:26.651-04:00"] <after',
+		);
+	});
+});

packages/editor-ui/src/components/SqlEditor/SqlEditor.vue

@@ -140,7 +140,7 @@ const {
 	editorRef: sqlEditor,
 	editorValue,
 	extensions,
-	skipSegments: ['Statement', 'CompositeIdentifier', 'Parens'],
+	skipSegments: ['Statement', 'CompositeIdentifier', 'Parens', 'Brackets'],
 	isReadOnly: props.isReadOnly,
 });
 const ndvStore = useNDVStore();