From f61b776beac961fa58c6c69371c69ae1e74ef83e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Milorad=20FIlipovi=C4=87?= <milorad@n8n.io>
Date: Fri, 2 Jun 2023 19:04:42 +0200
Subject: [PATCH] fix(editor): Fix hard-coded parameter names for code editors
 (#6372)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix(editor): Fix hard-coded parameter names for code editors
* ⚡ Adding computed property for editor content
* 👌 Refactoring based on the code review comments
---
 .../src/components/ParameterInput.vue         | 23 ++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

diff --git a/packages/editor-ui/src/components/ParameterInput.vue b/packages/editor-ui/src/components/ParameterInput.vue
index 68c525203b..53ab9093a9 100644
--- a/packages/editor-ui/src/components/ParameterInput.vue
+++ b/packages/editor-ui/src/components/ParameterInput.vue
@@ -87,7 +87,7 @@
 				<code-node-editor
 					v-if="editorType === 'codeNodeEditor' && isCodeNode(node)"
 					:mode="node.parameters.mode"
-					:value="node.parameters.jsCode"
+					:value="editorContent"
 					:defaultValue="parameter.default"
 					:language="editorLanguage"
 					:isReadOnly="isReadOnly"
@@ -97,7 +97,7 @@
 
 				<html-editor
 					v-else-if="editorType === 'htmlEditor'"
-					:html="node.parameters.html"
+					:html="editorContent"
 					:isReadOnly="isReadOnly"
 					:rows="getArgument('rows')"
 					:disableExpressionColoring="!isHtmlNode(node)"
@@ -107,7 +107,7 @@
 
 				<sql-editor
 					v-else-if="editorType === 'sqlEditor'"
-					:query="node.parameters.query"
+					:query="editorContent"
 					:dialect="getArgument('sqlDialect')"
 					:isReadOnly="isReadOnly"
 					@valueChanged="valueChangedDebounced"
@@ -365,6 +365,7 @@ import type {
 	IParameterLabel,
 	EditorType,
 	CodeNodeEditorLanguage,
+	INodeTypeDescription,
 } from 'n8n-workflow';
 import { NodeHelpers } from 'n8n-workflow';
 
@@ -820,6 +821,22 @@ export default defineComponent({
 		remoteParameterOptionsKeys(): string[] {
 			return (this.remoteParameterOptions || []).map((o) => o.name);
 		},
+		nodeType(): INodeTypeDescription | null {
+			if (!this.node) return null;
+			return this.nodeTypesStore.getNodeType(this.node.type, this.node.typeVersion);
+		},
+		editorContent(): string | undefined {
+			if (!this.nodeType) {
+				return;
+			}
+			const editorProp = this.nodeType.properties.find(
+				(p) => p.typeOptions?.editor === (this.editorType as string),
+			);
+			if (!editorProp) {
+				return;
+			}
+			return this.node.parameters[editorProp.name] as string;
+		},
 	},
 	methods: {
 		isRemoteParameterOption(option: INodePropertyOptions) {