From 827fb6963d5006a7472fc2fa71e5123db64e5ddb Mon Sep 17 00:00:00 2001
From: Daria <daria.staferova@n8n.io>
Date: Thu, 3 Jul 2025 16:04:00 +0300
Subject: [PATCH] feat(editor): Make focused node props editable (no-changelog)
 (#16942)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Milorad FIlipović <milorad@n8n.io>
---
 .../editor-ui/src/components/FocusPanel.vue   | 28 +++++++++++++++----
 1 file changed, 23 insertions(+), 5 deletions(-)

diff --git a/packages/frontend/editor-ui/src/components/FocusPanel.vue b/packages/frontend/editor-ui/src/components/FocusPanel.vue
index eebf1d0e12..0ec3c9e9cd 100644
--- a/packages/frontend/editor-ui/src/components/FocusPanel.vue
+++ b/packages/frontend/editor-ui/src/components/FocusPanel.vue
@@ -1,10 +1,12 @@
 <script setup lang="ts">
 import { useFocusPanelStore } from '@/stores/focusPanel.store';
+import { useNodeTypesStore } from '@/stores/nodeTypes.store';
 import { N8nText, N8nInput } from '@n8n/design-system';
 import { computed } from 'vue';
 import { useI18n } from '@n8n/i18n';
 import { isValueExpression } from '@/utils/nodeTypesUtils';
 import { useNodeHelpers } from '@/composables/useNodeHelpers';
+import { useNodeSettingsParameters } from '@/composables/useNodeSettingsParameters';
 
 defineOptions({ name: 'FocusPanel' });
 
@@ -15,6 +17,8 @@ const props = defineProps<{
 const locale = useI18n();
 const nodeHelpers = useNodeHelpers();
 const focusPanelStore = useFocusPanelStore();
+const nodeTypesStore = useNodeTypesStore();
+const nodeSettingsParameters = useNodeSettingsParameters();
 
 const focusedNodeParameter = computed(() => focusPanelStore.focusedNodeParameters[0]);
 const resolvedParameter = computed(() =>
@@ -38,6 +42,10 @@ const isExecutable = computed(() => {
 	);
 });
 
+const isToolNode = computed(() =>
+	resolvedParameter.value ? nodeTypesStore.isToolNode(resolvedParameter.value?.node.type) : false,
+);
+
 const expressionModeEnabled = computed(
 	() =>
 		resolvedParameter.value &&
@@ -48,13 +56,22 @@ function optionSelected() {
 	// TODO: Handle the option selected (command: string) from the dropdown
 }
 
-function valueChanged() {
-	// TODO: Update parameter value
+function valueChanged(value: string) {
+	if (resolvedParameter.value === undefined) {
+		return;
+	}
+
+	nodeSettingsParameters.updateNodeParameter(
+		{ value, name: resolvedParameter.value.parameterPath as `parameters.${string}` },
+		value,
+		resolvedParameter.value.node,
+		isToolNode.value,
+	);
 }
 </script>
 
 <template>
-	<div v-if="focusPanelActive" :class="$style.container">
+	<div v-if="focusPanelActive" :class="$style.container" @keydown.stop>
 		<div :class="$style.header">
 			<N8nText size="small" :bold="true">
 				{{ locale.baseText('nodeView.focusPanel.title') }}
@@ -105,14 +122,15 @@ function valueChanged() {
 							nodeName: resolvedParameter.node.name,
 							parameterPath: resolvedParameter.parameterPath,
 						}"
-						@change="valueChanged"
+						@change="valueChanged($event.value)"
 					/>
 					<N8nInput
 						v-else
-						v-model="resolvedParameter.value"
+						:model-value="resolvedParameter.value"
 						:class="$style.editor"
 						type="textarea"
 						resize="none"
+						@update:model-value="valueChanged($event)"
 					></N8nInput>
 				</div>
 			</div>