fix(editor): Fix completion on $input.item. in Code node (#10800)

packages/editor-ui/src/components/CodeNodeEditor/completions/__tests__/itemField.completions.test.ts

@@ -0,0 +1,77 @@
+import { CompletionContext } from '@codemirror/autocomplete';
+import { EditorSelection, EditorState } from '@codemirror/state';
+import { useItemFieldCompletions } from '../itemField.completions';
+
+describe('inputMethodCompletions', () => {
+	test('should return completions for $input.item.|', () => {
+		const { inputMethodCompletions } = useItemFieldCompletions('javaScript');
+		expect(inputMethodCompletions(createContext('$input.item.|'))).toEqual({
+			from: 0,
+			options: [
+				{
+					info: expect.any(Function),
+					label: '$input.item.json',
+					type: 'variable',
+				},
+
+				{
+					info: expect.any(Function),
+					label: '$input.item.binary',
+					type: 'variable',
+				},
+			],
+		});
+	});
+
+	test('should return completions for $input.first().|', () => {
+		const { inputMethodCompletions } = useItemFieldCompletions('javaScript');
+		expect(inputMethodCompletions(createContext('$input.first().|'))).toEqual({
+			from: 0,
+			options: [
+				{
+					info: expect.any(Function),
+					label: '$input.first().json',
+					type: 'variable',
+				},
+
+				{
+					info: expect.any(Function),
+					label: '$input.first().binary',
+					type: 'variable',
+				},
+			],
+		});
+	});
+
+	test('should return completions for $input.all()[1].|', () => {
+		const { inputMethodCompletions } = useItemFieldCompletions('javaScript');
+		expect(inputMethodCompletions(createContext('$input.all()[1].|'))).toEqual({
+			from: 0,
+			options: [
+				{
+					info: expect.any(Function),
+					label: '$input.all()[1].json',
+					type: 'variable',
+				},
+
+				{
+					info: expect.any(Function),
+					label: '$input.all()[1].binary',
+					type: 'variable',
+				},
+			],
+		});
+	});
+});
+
+export function createContext(docWithCursor: string) {
+	const cursorPosition = docWithCursor.indexOf('|');
+
+	const doc = docWithCursor.slice(0, cursorPosition) + docWithCursor.slice(cursorPosition + 1);
+
+	return new CompletionContext(
+		EditorState.create({ doc, selection: EditorSelection.single(cursorPosition) }),
+		cursorPosition,
+		false,
+	);
+}

packages/editor-ui/src/components/CodeNodeEditor/completions/itemField.completions.ts

@@ -1,4 +1,4 @@
-import { addVarType, escape } from '../utils';
+import { addInfoRenderer, addVarType, escape } from '../utils';
 import type { Completion, CompletionContext, CompletionResult } from '@codemirror/autocomplete';
 import { useI18n } from '@/composables/useI18n';
 
@@ -54,7 +54,7 @@ export function useItemFieldCompletions(language: 'python' | 'javaScript') {
 		const patterns = {
 			first: new RegExp(`\\${prefix}input\\.first\\(\\)\\..*`),
 			last: new RegExp(`\\${prefix}input\\.last\\(\\)\\..*`),
-			item: new RegExp(`\\${prefix}item\\.first\\(\\)\\..*`),
+			item: new RegExp(`\\${prefix}input\\.item\\..*`),
 			all: /\$input\.all\(\)\[(?<index>\w+)\]\..*/,
 		};
 
@@ -94,7 +94,7 @@ export function useItemFieldCompletions(language: 'python' | 'javaScript') {
 
 			return {
 				from: preCursor.from,
-				options: options.map(addVarType),
+				options: options.map(addVarType).map(addInfoRenderer),
 			};
 		}