feat(Code Node): Add Python support

packages/editor-ui/package.json

@@ -30,6 +30,7 @@
     "@codemirror/commands": "^6.1.0",
     "@codemirror/lang-javascript": "^6.1.2",
     "@codemirror/lang-json": "^6.0.1",
+    "@codemirror/lang-python": "^6.1.2",
     "@codemirror/lang-sql": "^6.4.1",
     "@codemirror/language": "^6.2.1",
     "@codemirror/lint": "^6.0.0",

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

@@ -1,6 +1,6 @@
 <template>
 	<div
-		:class="['code-node-editor', $style['code-node-editor-container']]"
+		:class="['code-node-editor', $style['code-node-editor-container'], language]"
 		@mouseover="onMouseOver"
 		@mouseout="onMouseOut"
 		ref="codeNodeEditorContainer"
@@ -23,50 +23,42 @@ import type { PropType } from 'vue';
 import { mapStores } from 'pinia';
 import mixins from 'vue-typed-mixins';
 
+import type { LanguageSupport } from '@codemirror/language';
 import type { Extension } from '@codemirror/state';
 import { Compartment, EditorState } from '@codemirror/state';
 import type { ViewUpdate } from '@codemirror/view';
 import { EditorView } from '@codemirror/view';
 import { javascript } from '@codemirror/lang-javascript';
 import { json } from '@codemirror/lang-json';
+import { python } from '@codemirror/lang-python';
+import type { CodeExecutionMode, CodeNodeEditorLanguage } from 'n8n-workflow';
+import { CODE_EXECUTION_MODES, CODE_LANGUAGES } from 'n8n-workflow';
 
-import { readOnlyEditorExtensions, writableEditorExtensions } from './baseExtensions';
-import { linterExtension } from './linter';
-import { completerExtension } from './completer';
-import { codeNodeEditorTheme } from './theme';
 import { workflowHelpers } from '@/mixins/workflowHelpers'; // for json field completions
 import { ASK_AI_MODAL_KEY, CODE_NODE_TYPE } from '@/constants';
 import { codeNodeEditorEventBus } from '@/event-bus';
-import {
-	ALL_ITEMS_PLACEHOLDER,
-	CODE_LANGUAGES,
-	CODE_MODES,
-	EACH_ITEM_PLACEHOLDER,
-} from './constants';
 import { useRootStore } from '@/stores/n8nRootStore';
-import Modal from '../Modal.vue';
 import { useSettingsStore } from '@/stores/settings';
-import type { CodeLanguage, CodeMode } from './types';
+import Modal from '@/components/Modal.vue';
 
-const placeholders: Partial<Record<CodeLanguage, Record<CodeMode, string>>> = {
-	javaScript: {
-		runOnceForAllItems: ALL_ITEMS_PLACEHOLDER,
-		runOnceForEachItem: EACH_ITEM_PLACEHOLDER,
-	},
-};
+import { readOnlyEditorExtensions, writableEditorExtensions } from './baseExtensions';
+import { CODE_PLACEHOLDERS } from './constants';
+import { linterExtension } from './linter';
+import { completerExtension } from './completer';
+import { codeNodeEditorTheme } from './theme';
 
 export default mixins(linterExtension, completerExtension, workflowHelpers).extend({
 	name: 'code-node-editor',
 	components: { Modal },
 	props: {
 		mode: {
-			type: String as PropType<CodeMode>,
-			validator: (value: CodeMode): boolean => CODE_MODES.includes(value),
+			type: String as PropType<CodeExecutionMode>,
+			validator: (value: CodeExecutionMode): boolean => CODE_EXECUTION_MODES.includes(value),
 		},
 		language: {
-			type: String as PropType<CodeLanguage>,
-			default: 'javaScript' as CodeLanguage,
-			validator: (value: CodeLanguage): boolean => CODE_LANGUAGES.includes(value),
+			type: String as PropType<CodeNodeEditorLanguage>,
+			default: 'javaScript' as CodeNodeEditorLanguage,
+			validator: (value: CodeNodeEditorLanguage): boolean => CODE_LANGUAGES.includes(value),
 		},
 		isReadOnly: {
 			type: Boolean,
@@ -79,19 +71,30 @@ export default mixins(linterExtension, completerExtension, workflowHelpers).exte
 	data() {
 		return {
 			editor: null as EditorView | null,
+			languageCompartment: new Compartment(),
 			linterCompartment: new Compartment(),
 			isEditorHovered: false,
 			isEditorFocused: false,
 		};
 	},
 	watch: {
-		mode(newMode, previousMode: CodeMode) {
+		mode(newMode, previousMode: CodeExecutionMode) {
 			this.reloadLinter();
 
-			if (this.content.trim() === placeholders[this.language]?.[previousMode]) {
+			if (this.content.trim() === CODE_PLACEHOLDERS[this.language]?.[previousMode]) {
 				this.refreshPlaceholder();
 			}
 		},
+		language(newLanguage, previousLanguage: CodeNodeEditorLanguage) {
+			if (this.content.trim() === CODE_PLACEHOLDERS[previousLanguage]?.[this.mode]) {
+				this.refreshPlaceholder();
+			}
+
+			const [languageSupport] = this.languageExtensions;
+			this.editor?.dispatch({
+				effects: this.languageCompartment.reconfigure(languageSupport),
+			});
+		},
 	},
 	computed: {
 		...mapStores(useRootStore),
@@ -104,7 +107,17 @@ export default mixins(linterExtension, completerExtension, workflowHelpers).exte
 			return this.editor.state.doc.toString();
 		},
 		placeholder(): string {
-			return placeholders[this.language]?.[this.mode] ?? '';
+			return CODE_PLACEHOLDERS[this.language]?.[this.mode] ?? '';
+		},
+		languageExtensions(): [LanguageSupport, ...Extension[]] {
+			switch (this.language) {
+				case 'json':
+					return [json()];
+				case 'javaScript':
+					return [javascript(), this.autocompletionExtension('javaScript')];
+				case 'python':
+					return [python(), this.autocompletionExtension('python')];
+			}
 		},
 	},
 	methods: {
@@ -178,6 +191,7 @@ export default mixins(linterExtension, completerExtension, workflowHelpers).exte
 					insertedText = full.slice(lastDotIndex + 1);
 				}
 
+				// TODO: Still has to get updated for Python and JSON
 				this.$telemetry.track('User autocompleted code', {
 					instance_id: this.rootStore.instanceId,
 					node_type: CODE_NODE_TYPE,
@@ -234,14 +248,8 @@ export default mixins(linterExtension, completerExtension, workflowHelpers).exte
 			);
 		}
 
-		switch (language) {
-			case 'json':
-				extensions.push(json());
-				break;
-			case 'javaScript':
-				extensions.push(javascript(), this.autocompletionExtension());
-				break;
-		}
+		const [languageSupport, ...otherExtensions] = this.languageExtensions;
+		extensions.push(this.languageCompartment.of(languageSupport), ...otherExtensions);
 
 		const state = EditorState.create({
 			doc: this.value || this.placeholder,

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

@@ -33,16 +33,20 @@ export const completerExtension = mixins(
 	jsonFieldCompletions,
 ).extend({
 	methods: {
-		autocompletionExtension(): Extension {
+		autocompletionExtension(language: 'javaScript' | 'python'): Extension {
+			const completions = [];
+			if (language === 'javaScript') {
+				completions.push(jsSnippets, localCompletionSource);
+			}
+
 			return autocompletion({
 				compareCompletions: (a: Completion, b: Completion) => {
 					if (/\.json$|id$|id['"]\]$/.test(a.label)) return 0;
 
 					return a.label.localeCompare(b.label);
 				},
 				override: [
-					jsSnippets,
-					localCompletionSource,
+					...completions,
 
 					// core
 					this.itemCompletions,

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

@@ -7,7 +7,7 @@ import type { CodeNodeEditorMixin } from '../types';
 import { mapStores } from 'pinia';
 import { useWorkflowsStore } from '@/stores/workflows';
 
-function getAutocompletableNodeNames(nodes: INodeUi[]) {
+function getAutoCompletableNodeNames(nodes: INodeUi[]) {
 	return nodes
 		.filter((node: INodeUi) => !NODE_TYPES_EXCLUDED_FROM_AUTOCOMPLETION.includes(node.type))
 		.map((node: INodeUi) => node.name);
@@ -49,64 +49,65 @@ export const baseCompletions = (Vue as CodeNodeEditorMixin).extend({
 		 * - Complete `$` to `$json $binary $itemIndex` in single-item mode.
 		 */
 		baseCompletions(context: CompletionContext): CompletionResult | null {
-			const preCursor = context.matchBefore(/\$\w*/);
+			const prefix = this.language === 'python' ? '_' : '$';
+			const preCursor = context.matchBefore(new RegExp(`\\${prefix}\\w*`));
 
 			if (!preCursor || (preCursor.from === preCursor.to && !context.explicit)) return null;
 
 			const TOP_LEVEL_COMPLETIONS_IN_BOTH_MODES: Completion[] = [
 				{
-					label: '$execution',
+					label: `${prefix}execution`,
 					info: this.$locale.baseText('codeNodeEditor.completer.$execution'),
 				},
-				{ label: '$input', info: this.$locale.baseText('codeNodeEditor.completer.$input') },
+				{ label: `${prefix}input`, info: this.$locale.baseText('codeNodeEditor.completer.$input') },
 				{
-					label: '$prevNode',
+					label: `${prefix}prevNode`,
 					info: this.$locale.baseText('codeNodeEditor.completer.$prevNode'),
 				},
 				{
-					label: '$workflow',
+					label: `${prefix}workflow`,
 					info: this.$locale.baseText('codeNodeEditor.completer.$workflow'),
 				},
 				{
-					label: '$vars',
+					label: `${prefix}vars`,
 					info: this.$locale.baseText('codeNodeEditor.completer.$vars'),
 				},
 				{
-					label: '$now',
+					label: `${prefix}now`,
 					info: this.$locale.baseText('codeNodeEditor.completer.$now'),
 				},
 				{
-					label: '$today',
+					label: `${prefix}today`,
 					info: this.$locale.baseText('codeNodeEditor.completer.$today'),
 				},
 				{
-					label: '$jmespath()',
+					label: `${prefix}jmespath()`,
 					info: this.$locale.baseText('codeNodeEditor.completer.$jmespath'),
 				},
 				{
-					label: '$if()',
+					label: `${prefix}if()`,
 					info: this.$locale.baseText('codeNodeEditor.completer.$if'),
 				},
 				{
-					label: '$min()',
+					label: `${prefix}min()`,
 					info: this.$locale.baseText('codeNodeEditor.completer.$min'),
 				},
 				{
-					label: '$max()',
+					label: `${prefix}max()`,
 					info: this.$locale.baseText('codeNodeEditor.completer.$max'),
 				},
 				{
-					label: '$runIndex',
+					label: `${prefix}runIndex`,
 					info: this.$locale.baseText('codeNodeEditor.completer.$runIndex'),
 				},
 			];
 
 			const options: Completion[] = TOP_LEVEL_COMPLETIONS_IN_BOTH_MODES.map(addVarType);
 
 			options.push(
-				...getAutocompletableNodeNames(this.workflowsStore.allNodes).map((nodeName) => {
+				...getAutoCompletableNodeNames(this.workflowsStore.allNodes).map((nodeName) => {
 					return {
-						label: `$('${nodeName}')`,
+						label: `${prefix}('${nodeName}')`,
 						type: 'variable',
 						info: this.$locale.baseText('codeNodeEditor.completer.$()', {
 							interpolate: { nodeName },
@@ -117,10 +118,10 @@ export const baseCompletions = (Vue as CodeNodeEditorMixin).extend({
 
 			if (this.mode === 'runOnceForEachItem') {
 				const TOP_LEVEL_COMPLETIONS_IN_SINGLE_ITEM_MODE = [
-					{ label: '$json' },
-					{ label: '$binary' },
+					{ label: `${prefix}json` },
+					{ label: `${prefix}binary` },
 					{
-						label: '$itemIndex',
+						label: `${prefix}itemIndex`,
 						info: this.$locale.baseText('codeNodeEditor.completer.$itemIndex'),
 					},
 				];
@@ -138,14 +139,15 @@ export const baseCompletions = (Vue as CodeNodeEditorMixin).extend({
 		 * Complete `$(` to `$('nodeName')`.
 		 */
 		nodeSelectorCompletions(context: CompletionContext): CompletionResult | null {
-			const preCursor = context.matchBefore(/\$\(.*/);
+			const prefix = this.language === 'python' ? '_' : '$';
+			const preCursor = context.matchBefore(new RegExp(`\\${prefix}\\(.*`));
 
 			if (!preCursor || (preCursor.from === preCursor.to && !context.explicit)) return null;
 
-			const options: Completion[] = getAutocompletableNodeNames(this.workflowsStore.allNodes).map(
+			const options: Completion[] = getAutoCompletableNodeNames(this.workflowsStore.allNodes).map(
 				(nodeName) => {
 					return {
-						label: `$('${nodeName}')`,
+						label: `${prefix}('${nodeName}')`,
 						type: 'variable',
 						info: this.$locale.baseText('codeNodeEditor.completer.$()', {
 							interpolate: { nodeName },

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

@@ -50,10 +50,11 @@ export const itemFieldCompletions = (Vue as CodeNodeEditorMixin).extend({
 		 * - Complete `$input.item.` to `.json .binary`.
 		 */
 		inputMethodCompletions(context: CompletionContext): CompletionResult | null {
+			const prefix = this.language === 'python' ? '_' : '$';
 			const patterns = {
-				first: /\$input\.first\(\)\..*/,
-				last: /\$input\.last\(\)\..*/,
-				item: /\$input\.item\..*/,
+				first: new RegExp(`\\${prefix}input\\.first\\(\\)\\..*`),
+				last: new RegExp(`\\${prefix}input\\.last\\(\\)\\..*`),
+				item: new RegExp(`\\${prefix}item\\.first\\(\\)\\..*`),
 				all: /\$input\.all\(\)\[(?<index>\w+)\]\..*/,
 			};
 
@@ -64,11 +65,11 @@ export const itemFieldCompletions = (Vue as CodeNodeEditorMixin).extend({
 
 				let replacementBase = '';
 
-				if (name === 'item') replacementBase = '$input.item';
+				if (name === 'item') replacementBase = `${prefix}input.item`;
 
-				if (name === 'first') replacementBase = '$input.first()';
+				if (name === 'first') replacementBase = `${prefix}input.first()`;
 
-				if (name === 'last') replacementBase = '$input.last()';
+				if (name === 'last') replacementBase = `${prefix}input.last()`;
 
 				if (name === 'all') {
 					const match = preCursor.text.match(regex);
@@ -77,7 +78,7 @@ export const itemFieldCompletions = (Vue as CodeNodeEditorMixin).extend({
 
 					const { index } = match.groups;
 
-					replacementBase = `$input.all()[${index}]`;
+					replacementBase = `${prefix}input.all()[${index}]`;
 				}
 
 				const options: Completion[] = [

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

@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import { AUTOCOMPLETABLE_BUILT_IN_MODULES } from '../constants';
+import { AUTOCOMPLETABLE_BUILT_IN_MODULES_JS } from '../constants';
 import type { Completion, CompletionContext, CompletionResult } from '@codemirror/autocomplete';
 import type { CodeNodeEditorMixin } from '../types';
 import { useSettingsStore } from '@/stores/settings';
@@ -25,7 +25,7 @@ export const requireCompletions = (Vue as CodeNodeEditorMixin).extend({
 
 			if (allowedModules.builtIn) {
 				if (allowedModules.builtIn.includes('*')) {
-					options.push(...AUTOCOMPLETABLE_BUILT_IN_MODULES.map(toOption));
+					options.push(...AUTOCOMPLETABLE_BUILT_IN_MODULES_JS.map(toOption));
 				} else if (allowedModules?.builtIn?.length > 0) {
 					options.push(...allowedModules.builtIn.map(toOption));
 				}