fix(editor): Fix mapping with special characters (#5837)

* fix: Fix mapping with special characters

* refactor: rename var

* test: update more unit tests

* test: update mapping test

* test: update mapping test

packages/editor-ui/src/utils/__tests__/mappingUtils.test.ts

@@ -228,7 +228,30 @@ describe('Mapping Utils', () => {
 			};
 			const result = getMappedExpression(input);
 			expect(result).toBe(
-				'{{ $node.nodeName.json.sample["path with-space"]["path-with-hyphen"] }}',
+				"{{ $node.nodeName.json.sample['path with-space']['path-with-hyphen'] }}",
+			);
+		});
+
+		it('should handle paths with special characters', () => {
+			const input = {
+				nodeName: 'nodeName',
+				distanceFromActive: 2,
+				path: [
+					'sample',
+					'"Execute"',
+					'`Execute`',
+					"'Execute'",
+					'[Execute]',
+					'{Execute}',
+					'execute?',
+					'test,',
+					'test:',
+					'path.',
+				],
+			};
+			const result = getMappedExpression(input);
+			expect(result).toBe(
+				"{{ $node.nodeName.json.sample['\"Execute\"']['`Execute`']['\\'Execute\\'']['[Execute]']['{Execute}']['execute?']['test,']['test:']['path.'] }}",
 			);
 		});
 
@@ -239,7 +262,7 @@ describe('Mapping Utils', () => {
 				path: ['propertyName', 'capitalizedName', 'hyphen-prop'],
 			};
 			const result = getMappedExpression(input);
-			expect(result).toBe('{{ $json.propertyName.capitalizedName["hyphen-prop"] }}');
+			expect(result).toBe("{{ $json.propertyName.capitalizedName['hyphen-prop'] }}");
 		});
 
 		it('should generate a mapped expression with a complex path', () => {
@@ -250,7 +273,7 @@ describe('Mapping Utils', () => {
 			};
 			const result = getMappedExpression(input);
 			expect(result).toBe(
-				'{{ $json.propertyName.capitalizedName.stringVal["some-value"].capitalizedProp }}',
+				"{{ $json.propertyName.capitalizedName.stringVal['some-value'].capitalizedProp }}",
 			);
 		});
 	});

packages/editor-ui/src/utils/__tests__/typesUtils.test.ts

@@ -275,13 +275,13 @@ describe('Types Utils', () => {
 							type: 'array',
 							key: 'with space',
 							value: [],
-							path: '["with space"]',
+							path: "['with space']",
 						},
 						{
 							type: 'string',
 							key: 'with.dot',
 							value: 'test',
-							path: '["with.dot"]',
+							path: "['with.dot']",
 						},
 					],
 					path: '',

packages/editor-ui/src/utils/mappingUtils.ts

@@ -6,8 +6,11 @@ export function generatePath(root: string, path: Array<string | number>): string
 			return `${accu}[${part}]`;
 		}
 
-		if (part.includes('-') || part.includes(' ') || part.includes('.')) {
-			return `${accu}["${part}"]`;
+		const special = ['-', ' ', '.', "'", '"', '`', '[', ']', '{', '}', '(', ')', ':', ',', '?'];
+		const hasSpecial = !!special.find((s) => part.includes(s));
+		if (hasSpecial) {
+			const escaped = part.replaceAll("'", "\\'");
+			return `${accu}['${escaped}']`;
 		}
 
 		return `${accu}.${part}`;