From e22998c4d9ac80bb67465831f6731e1e6fe32cfb Mon Sep 17 00:00:00 2001
From: Alexander Brown <448862+DrJKL@users.noreply.github.com>
Date: Thu, 15 Jan 2026 19:04:49 -0800
Subject: [PATCH] refactor: migrate components to use EditableText
 doubleClickToEdit prop

---
 src/components/common/TreeExplorerTreeNode.vue    |  1 +
 src/components/graph/TitleEditor.vue              | 15 ++++++++++++---
 src/components/rightSidePanel/RightSidePanel.vue  |  4 ++--
 .../rightSidePanel/parameters/WidgetItem.vue      |  4 ++--
 src/platform/assets/components/AssetCard.vue      |  2 +-
 5 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/components/common/TreeExplorerTreeNode.vue b/src/components/common/TreeExplorerTreeNode.vue
index cea8ba451..31c111c97 100644
--- a/src/components/common/TreeExplorerTreeNode.vue
+++ b/src/components/common/TreeExplorerTreeNode.vue
@@ -17,6 +17,7 @@
           :model-value="node.label"
           :is-editing="isEditing"
           @edit="handleRename"
+          @cancel="handleRename(node.label)"
         />
         <slot name="after-label" :node="props.node" />
       </span>
diff --git a/src/components/graph/TitleEditor.vue b/src/components/graph/TitleEditor.vue
index bcfef8757..6b06d82ff 100644
--- a/src/components/graph/TitleEditor.vue
+++ b/src/components/graph/TitleEditor.vue
@@ -8,6 +8,7 @@
       :is-editing="showInput"
       :model-value="editedTitle"
       @edit="onEdit"
+      @cancel="onCancel"
     />
   </div>
 </template>
@@ -47,6 +48,12 @@ const titleEditorStore = useTitleEditorStore()
 const canvasStore = useCanvasStore()
 const previousCanvasDraggable = ref(true)
 
+const closeEditor = () => {
+  showInput.value = false
+  titleEditorStore.titleEditorTarget = null
+  canvasStore.canvas!.allow_dragcanvas = previousCanvasDraggable.value
+}
+
 const onEdit = (newValue: string) => {
   if (titleEditorStore.titleEditorTarget && newValue?.trim()) {
     const trimmedTitle = newValue.trim()
@@ -60,9 +67,11 @@ const onEdit = (newValue: string) => {
 
     app.canvas.setDirty(true, true)
   }
-  showInput.value = false
-  titleEditorStore.titleEditorTarget = null
-  canvasStore.canvas!.allow_dragcanvas = previousCanvasDraggable.value
+  closeEditor()
+}
+
+const onCancel = () => {
+  closeEditor()
 }
 
 watch(
diff --git a/src/components/rightSidePanel/RightSidePanel.vue b/src/components/rightSidePanel/RightSidePanel.vue
index b23346bf4..396f17657 100644
--- a/src/components/rightSidePanel/RightSidePanel.vue
+++ b/src/components/rightSidePanel/RightSidePanel.vue
@@ -198,13 +198,13 @@ function handleTitleCancel() {
         <h3 class="my-3.5 text-sm font-semibold line-clamp-2 cursor-default">
           <template v-if="allowTitleEdit">
             <EditableText
+              v-model:is-editing="isEditing"
               :model-value="panelTitle"
-              :is-editing="isEditing"
               :input-attrs="{ 'data-testid': 'node-title-input' }"
+              double-click-to-edit
               class="cursor-text"
               @edit="handleTitleEdit"
               @cancel="handleTitleCancel"
-              @click="isEditing = true"
             />
             <i
               v-if="!isEditing"
diff --git a/src/components/rightSidePanel/parameters/WidgetItem.vue b/src/components/rightSidePanel/parameters/WidgetItem.vue
index debfb02e7..68987d55d 100644
--- a/src/components/rightSidePanel/parameters/WidgetItem.vue
+++ b/src/components/rightSidePanel/parameters/WidgetItem.vue
@@ -123,13 +123,13 @@ const displayLabel = customRef((track, trigger) => {
     >
       <EditableText
         v-if="widget.name"
+        v-model:is-editing="isEditing"
         :model-value="displayLabel"
-        :is-editing="isEditing"
         :input-attrs="{ placeholder: widget.name }"
+        double-click-to-edit
         class="text-sm leading-8 p-0 m-0 truncate pointer-events-auto cursor-text"
         @edit="displayLabel = $event"
         @cancel="isEditing = false"
-        @click="isEditing = true"
       />
 
       <span
diff --git a/src/platform/assets/components/AssetCard.vue b/src/platform/assets/components/AssetCard.vue
index 0b18ac97c..391655b0e 100644
--- a/src/platform/assets/components/AssetCard.vue
+++ b/src/platform/assets/components/AssetCard.vue
@@ -81,7 +81,7 @@
           :is-editing="isEditing"
           :input-attrs="{ 'data-testid': 'asset-name-input' }"
           @edit="assetRename"
-          @cancel="assetRename()"
+          @cancel="isEditing = false"
         />
       </h3>
       <p