feat(editor): Add mapping support for data paths

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

@@ -229,12 +229,31 @@ export default mixins(showMessage).extend({
 			}
 		},
 		onDrop(data: string) {
-			this.forceShowExpression = true;
+			const useDataPath = !!this.parameter.requiresDataPath && data.startsWith('{{ $json');
+			if (!useDataPath) {
+				this.forceShowExpression = true;
+			}
 			setTimeout(() => {
 				if (this.node) {
 					const prevValue = this.isResourceLocator ? this.value.value : this.value;
 					let updatedValue: string;
-					if (typeof prevValue === 'string' && prevValue.startsWith('=') && prevValue.length > 1) {
+					if (useDataPath) {
+						const newValue = data
+							.replace('{{ $json', '')
+							.replace(new RegExp('^\\.'), '')
+							.replace(new RegExp('}}$'), '')
+							.trim();
+
+						if (prevValue && this.parameter.requiresDataPath === 'multiple') {
+							updatedValue = `${prevValue}, ${newValue}`;
+						} else {
+							updatedValue = newValue;
+						}
+					} else if (
+						typeof prevValue === 'string' &&
+						prevValue.startsWith('=') &&
+						prevValue.length > 1
+					) {
 						updatedValue = `${prevValue} ${data}`;
 					} else {
 						updatedValue = `=${data}`;

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

@@ -79,6 +79,7 @@ import { externalHooks } from '@/mixins/externalHooks';
 import { mapStores } from 'pinia';
 import { useNDVStore } from '@/stores/ndv';
 import MappingPill from './MappingPill.vue';
+import { getMappedExpression } from '@/utils/mappingUtils';
 
 const runDataJsonActions = () => import('@/components/RunDataJsonActions.vue');
 
@@ -169,11 +170,13 @@ export default mixins(externalHooks).extend({
 			return shorten(el.dataset.name || '', 16, 2);
 		},
 		getJsonParameterPath(path: string): string {
-			const convertedPath = convertPath(path);
-			return `{{ ${convertedPath.replace(
-				/^(\["?\d"?])/,
-				this.distanceFromActive === 1 ? '$json' : `$node["${this.node!.name}"].json`,
-			)} }}`;
+			const subPath = path.replace(/^(\["?\d"?])/, ''); // remove item position
+
+			return getMappedExpression({
+				nodeName: this.node.name,
+				distanceFromActive: this.distanceFromActive,
+				path: subPath,
+			});
 		},
 		onDragStart(el: HTMLElement) {
 			if (el && el.dataset.path) {

packages/editor-ui/src/components/RunDataSchema.test.ts

@@ -60,4 +60,23 @@ describe('RunDataJsonSchema.vue', () => {
 		});
 		expect(container).toMatchSnapshot();
 	});
+
+	it('renders schema with spaces and dots', () => {
+		renderOptions.props.data = [
+			{
+				'hello world': [
+					{
+						test: {
+							'more to think about': 1,
+						},
+						'test.how': 'ignore',
+					},
+				],
+			},
+		];
+		const { container } = render(RunDataJsonSchema, renderOptions, (vue) => {
+			vue.use(PiniaVuePlugin);
+		});
+		expect(container).toMatchSnapshot();
+	});
 });

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

@@ -2,6 +2,7 @@
 import { computed } from 'vue';
 import { INodeUi, Schema } from '@/Interface';
 import { checkExhaustive, shorten } from '@/utils';
+import { getMappedExpression } from '@/utils/mappingUtils';
 
 type Props = {
 	schema: Schema;
@@ -35,7 +36,12 @@ const text = computed(() =>
 );
 
 const getJsonParameterPath = (path: string): string =>
-	`{{ ${props.distanceFromActive === 1 ? '$json' : `$node["${props.node!.name}"].json`}${path} }}`;
+	getMappedExpression({
+		nodeName: props.node!.name,
+		distanceFromActive: props.distanceFromActive,
+		path,
+	});
+
 const transitionDelay = (i: number) => `${i * 0.033}s`;
 
 const getIconBySchemaType = (type: Schema['type']): string => {

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

@@ -170,6 +170,7 @@ import { mapStores } from 'pinia';
 import { useWorkflowsStore } from '@/stores/workflows';
 import { useNDVStore } from '@/stores/ndv';
 import MappingPill from './MappingPill.vue';
+import { getMappedExpression } from '@/utils/mappingUtils';
 
 const MAX_COLUMNS_LIMIT = 40;
 
@@ -315,11 +316,11 @@ export default mixins(externalHooks).extend({
 				return '';
 			}
 
-			if (this.distanceFromActive === 1) {
-				return `{{ $json["${column}"] }}`;
-			}
-
-			return `{{ $node["${this.node.name}"].json["${column}"] }}`;
+			return getMappedExpression({
+				nodeName: this.node.name,
+				distanceFromActive: this.distanceFromActive,
+				path: [column],
+			});
 		},
 		getPathNameFromTarget(el: HTMLElement) {
 			if (!el) {
@@ -343,21 +344,12 @@ export default mixins(externalHooks).extend({
 			if (!this.node) {
 				return '';
 			}
-
-			const expr = path.reduce((accu: string, key: string | number) => {
-				if (typeof key === 'number') {
-					return `${accu}[${key}]`;
-				}
-
-				return `${accu}["${key}"]`;
-			}, '');
 			const column = this.tableData.columns[colIndex];
-
-			if (this.distanceFromActive === 1) {
-				return `{{ $json["${column}"]${expr} }}`;
-			}
-
-			return `{{ $node["${this.node.name}"].json["${column}"]${expr} }}`;
+			return getMappedExpression({
+				nodeName: this.node.name,
+				distanceFromActive: this.distanceFromActive,
+				path: [column, ...path],
+			});
 		},
 		isEmpty(value: unknown): boolean {
 			return (