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

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',
+		);
+	});
+});