fix(editor): Escape node names with quotes in autocomplete and drag'n'drop (#8663)

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

@@ -1,5 +1,5 @@
 import type { INodeProperties } from 'n8n-workflow';
-import { getMappedResult, getMappedExpression } from '../mappingUtils';
+import { getMappedResult, getMappedExpression, escapeMappingString } from '../mappingUtils';
 
 const RLC_PARAM: INodeProperties = {
 	displayName: 'Base',
@@ -273,4 +273,12 @@ describe('Mapping Utils', () => {
 			);
 		});
 	});
+	describe('escapeMappingString', () => {
+		test.each([
+			{ input: 'Normal node name (here)', output: 'Normal node name (here)' },
+			{ input: "'Should es'ape quotes here'", output: "\\'Should es\\'ape quotes here\\'" },
+		])('should escape "$input" to "$output"', ({ input, output }) => {
+			expect(escapeMappingString(input)).toEqual(output);
+		});
+	});
 });

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

@@ -18,6 +18,10 @@ export function generatePath(root: string, path: Array<string | number>): string
 	}, root);
 }
 
+export function escapeMappingString(str: string): string {
+	return str.replace(/\'/g, "\\'");
+}
+
 export function getMappedExpression({
 	nodeName,
 	distanceFromActive,
@@ -28,7 +32,9 @@ export function getMappedExpression({
 	path: Array<string | number> | string;
 }) {
 	const root =
-		distanceFromActive === 1 ? '$json' : generatePath(`$('${nodeName}')`, ['item', 'json']);
+		distanceFromActive === 1
+			? '$json'
+			: generatePath(`$('${escapeMappingString(nodeName)}')`, ['item', 'json']);
 
 	if (typeof path === 'string') {
 		return `{{ ${root}${path} }}`;