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

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

@@ -5,6 +5,7 @@ import type { Completion, CompletionContext, CompletionResult } from '@codemirro
 import type { INodeUi } from '@/Interface';
 import { mapStores } from 'pinia';
 import { useWorkflowsStore } from '@/stores/workflows.store';
+import { escapeMappingString } from '@/utils/mappingUtils';
 
 function getAutoCompletableNodeNames(nodes: INodeUi[]) {
 	return nodes
@@ -98,7 +99,7 @@ export const baseCompletions = defineComponent({
 			options.push(
 				...getAutoCompletableNodeNames(this.workflowsStore.allNodes).map((nodeName) => {
 					return {
-						label: `${prefix}('${nodeName}')`,
+						label: `${prefix}('${escapeMappingString(nodeName)}')`,
 						type: 'variable',
 						info: this.$locale.baseText('codeNodeEditor.completer.$()', {
 							interpolate: { nodeName },
@@ -138,7 +139,7 @@ export const baseCompletions = defineComponent({
 			const options: Completion[] = getAutoCompletableNodeNames(this.workflowsStore.allNodes).map(
 				(nodeName) => {
 					return {
-						label: `${prefix}('${nodeName}')`,
+						label: `${prefix}('${escapeMappingString(nodeName)}')`,
 						type: 'variable',
 						info: this.$locale.baseText('codeNodeEditor.completer.$()', {
 							interpolate: { nodeName },

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

@@ -50,6 +50,7 @@ import { useRootStore } from '@/stores/n8nRoot.store';
 import { useNDVStore } from '@/stores/ndv.store';
 import { useRouter } from 'vue-router';
 import { useWorkflowHelpers } from '@/composables/useWorkflowHelpers';
+import { escapeMappingString } from '@/utils/mappingUtils';
 
 // Node types that should not be displayed in variable selector
 const SKIPPED_NODE_TYPES = [STICKY_NODE_TYPE];
@@ -398,7 +399,9 @@ export default defineComponent({
 
 			// Get json data
 			if (outputData.hasOwnProperty('json')) {
-				const jsonPropertyPrefix = useShort ? '$json' : `$('${nodeName}').item.json`;
+				const jsonPropertyPrefix = useShort
+					? '$json'
+					: `$('${escapeMappingString(nodeName)}').item.json`;
 
 				const jsonDataOptions: IVariableSelectorOption[] = [];
 				for (const propertyName of Object.keys(outputData.json)) {
@@ -423,7 +426,9 @@ export default defineComponent({
 
 			// Get binary data
 			if (outputData.hasOwnProperty('binary')) {
-				const binaryPropertyPrefix = useShort ? '$binary' : `$('${nodeName}').item.binary`;
+				const binaryPropertyPrefix = useShort
+					? '$binary'
+					: `$('${escapeMappingString(nodeName)}').item.binary`;
 
 				const binaryData = [];
 				let binaryPropertyData = [];
@@ -537,7 +542,7 @@ export default defineComponent({
 
 				returnData.push({
 					name: key,
-					key: `$('${nodeName}').context["${key}"]`,
+					key: `$('${escapeMappingString(nodeName)}').context['${escapeMappingString(key)}']`,
 					// @ts-ignore
 					value: nodeContext[key],
 				});
@@ -793,7 +798,12 @@ export default defineComponent({
 					{
 						name: this.$locale.baseText('variableSelector.parameters'),
 						options: this.sortOptions(
-							this.getNodeParameters(nodeName, `$('${nodeName}').params`, undefined, filterText),
+							this.getNodeParameters(
+								nodeName,
+								`$('${escapeMappingString(nodeName)}').params`,
+								undefined,
+								filterText,
+							),
 						),
 					} as IVariableSelectorOption,
 				];