refactor(editor): Update Code node editor for native Python runner (#18538)

packages/frontend/editor-ui/src/components/CodeNodeEditor/CodeNodeEditor.vue

@@ -21,12 +21,14 @@ import { useSettingsStore } from '@/stores/settings.store';
 import { dropInCodeEditor } from '@/plugins/codemirror/dragAndDrop';
 import type { TargetNodeParameterContext } from '@/Interface';
 
+export type CodeNodeLanguageOption = CodeNodeEditorLanguage | 'pythonNative';
+
 type Props = {
 	mode: CodeExecutionMode;
 	modelValue: string;
 	aiButtonEnabled?: boolean;
 	fillParent?: boolean;
-	language?: CodeNodeEditorLanguage;
+	language?: CodeNodeLanguageOption;
 	isReadOnly?: boolean;
 	rows?: number;
 	id?: string;
@@ -63,7 +65,7 @@ const settingsStore = useSettingsStore();
 
 const linter = useLinter(
 	() => props.mode,
-	() => props.language,
+	() => (props.language === 'pythonNative' ? 'python' : props.language),
 );
 const extensions = computed(() => [linter.value]);
 const placeholder = computed(() => CODE_PLACEHOLDERS[props.language]?.[props.mode] ?? '');

packages/frontend/editor-ui/src/components/CodeNodeEditor/completer.ts

@@ -24,7 +24,20 @@ export const useCompleter = (
 	mode: MaybeRefOrGetter<CodeExecutionMode>,
 	editor: MaybeRefOrGetter<EditorView | null>,
 ) => {
-	function autocompletionExtension(language: 'javaScript' | 'python'): Extension {
+	function autocompletionExtension(language: 'javaScript' | 'python' | 'pythonNative'): Extension {
+		if (language === 'pythonNative') {
+			const completions = (context: CompletionContext): CompletionResult | null => {
+				const word = context.matchBefore(/\w*/);
+				if (!word) return null;
+
+				const label = toValue(mode) === 'runOnceForEachItem' ? '_item' : '_items';
+
+				return { from: word.from, options: [{ label, type: 'variable' }] };
+			};
+
+			return autocompletion({ icons: false, override: [completions] });
+		}
+
 		// Base completions
 		const { baseCompletions, itemCompletions, nodeSelectorCompletions } = useBaseCompletions(
 			toValue(mode),

packages/frontend/editor-ui/src/components/CodeNodeEditor/constants.ts

@@ -1,6 +1,7 @@
 import { STICKY_NODE_TYPE } from '@/constants';
 import type { Diagnostic } from '@codemirror/lint';
-import type { CodeExecutionMode, CodeNodeEditorLanguage } from 'n8n-workflow';
+import type { CodeExecutionMode } from 'n8n-workflow';
+import type { CodeNodeLanguageOption } from './CodeNodeEditor.vue';
 
 export const NODE_TYPES_EXCLUDED_FROM_AUTOCOMPLETION = [STICKY_NODE_TYPE];
 
@@ -36,7 +37,7 @@ export const DEFAULT_LINTER_DELAY_IN_MS = 500;
 export const OFFSET_FOR_SCRIPT_WRAPPER = 'module.exports = async function() {'.length;
 
 export const CODE_PLACEHOLDERS: Partial<
-	Record<CodeNodeEditorLanguage, Record<CodeExecutionMode, string>>
+	Record<CodeNodeLanguageOption, Record<CodeExecutionMode, string>>
 > = {
 	javaScript: {
 		runOnceForAllItems: `
@@ -63,4 +64,15 @@ return _input.all()`.trim(),
 _input.item.json.myNewField = 1
 return _input.item`.trim(),
 	},
+	pythonNative: {
+		runOnceForAllItems: `
+# Loop over input items and add a new field called 'my_new_field' to the JSON of each one
+for item in _items:
+  item["json"]["my_new_field"] = 1
+return _items`.trim(),
+		runOnceForEachItem: `
+# Add a new field called 'my_new_field' to the JSON of the item
+_item["json"]["my_new_field"] = 1
+return _item`.trim(),
+	},
 };

packages/frontend/editor-ui/src/components/ParameterInput.vue

@@ -11,7 +11,6 @@ import type {
 } from '@/Interface';
 import type {
 	CodeExecutionMode,
-	CodeNodeEditorLanguage,
 	EditorType,
 	IDataObject,
 	ILoadOptions,
@@ -24,6 +23,7 @@ import type {
 } from 'n8n-workflow';
 import { CREDENTIAL_EMPTY_VALUE, isResourceLocatorValue, NodeHelpers } from 'n8n-workflow';
 
+import type { CodeNodeLanguageOption } from '@/components/CodeNodeEditor/CodeNodeEditor.vue';
 import CodeNodeEditor from '@/components/CodeNodeEditor/CodeNodeEditor.vue';
 import CredentialsSelect from '@/components/CredentialsSelect.vue';
 import ExpressionEditModal from '@/components/ExpressionEditModal.vue';
@@ -259,10 +259,12 @@ const editorIsReadOnly = computed<boolean>(() => {
 	return getTypeOption<boolean>('editorIsReadOnly') ?? false;
 });
 
-const editorLanguage = computed<CodeNodeEditorLanguage>(() => {
-	if (editorType.value === 'json' || props.parameter.type === 'json')
-		return 'json' as CodeNodeEditorLanguage;
-	return getTypeOption<CodeNodeEditorLanguage>('editorLanguage') ?? 'javaScript';
+const editorLanguage = computed<CodeNodeLanguageOption>(() => {
+	if (editorType.value === 'json' || props.parameter.type === 'json') return 'json';
+
+	if (node.value?.parameters?.language === 'pythonNative') return 'pythonNative';
+
+	return getTypeOption<CodeNodeLanguageOption>('editorLanguage') ?? 'javaScript';
 });
 
 const codeEditorMode = computed<CodeExecutionMode>(() => {