From f42554e82a39d4b66ebb1ef4a6a05de55713aafb Mon Sep 17 00:00:00 2001
From: Your Name <your.email@example.com>
Date: Sat, 23 May 2026 15:21:54 +0800
Subject: [PATCH] fix: make local edit prompt typing immediate

---
 components/canvas/nodes/ImageNode.tsx | 30 ++++++++++++++++++---------
 1 file changed, 20 insertions(+), 10 deletions(-)

diff --git a/components/canvas/nodes/ImageNode.tsx b/components/canvas/nodes/ImageNode.tsx
index 8a5faad57..22563ad67 100644
--- a/components/canvas/nodes/ImageNode.tsx
+++ b/components/canvas/nodes/ImageNode.tsx
@@ -2681,6 +2681,12 @@ export function ImageNode({
     },
     []
   );
+  const updateLocalEditPromptDraftRef = useCallback(
+    (regionId: string, prompt: string) => {
+      localEditPromptDraftRefs.current[regionId] = prompt;
+    },
+    []
+  );
 
   const restoreLocalEditPromptSelection = useCallback(
     (regionId: string, position: number) => {
@@ -2744,11 +2750,12 @@ export function ImageNode({
       }
 
       event.preventDefault();
-      updateLocalEditPromptDraft(regionId, nextValue);
+      input.value = nextValue;
+      updateLocalEditPromptDraftRef(regionId, nextValue);
       restoreLocalEditPromptSelection(regionId, nextCursor);
       return true;
     },
-    [restoreLocalEditPromptSelection, updateLocalEditPromptDraft]
+    [restoreLocalEditPromptSelection, updateLocalEditPromptDraftRef]
   );
 
   const finishLocalEditPromptComposition = useCallback(
@@ -2756,12 +2763,12 @@ export function ImageNode({
       const snapshot = localEditPromptCompositionStartRefs.current[regionId];
       delete localEditPromptCompositionStartRefs.current[regionId];
       if (!snapshot) {
-        updateLocalEditPromptDraft(regionId, input.value);
+        updateLocalEditPromptDraftRef(regionId, input.value);
         return;
       }
 
       if (input.value !== snapshot.value) {
-        updateLocalEditPromptDraft(regionId, input.value);
+        updateLocalEditPromptDraftRef(regionId, input.value);
         return;
       }
 
@@ -2770,13 +2777,14 @@ export function ImageNode({
       }
 
       const nextValue = `${snapshot.value.slice(0, snapshot.start)}${compositionText}${snapshot.value.slice(snapshot.end)}`;
-      updateLocalEditPromptDraft(regionId, nextValue);
+      input.value = nextValue;
+      updateLocalEditPromptDraftRef(regionId, nextValue);
       restoreLocalEditPromptSelection(
         regionId,
         snapshot.start + compositionText.length
       );
     },
-    [restoreLocalEditPromptSelection, updateLocalEditPromptDraft]
+    [restoreLocalEditPromptSelection, updateLocalEditPromptDraftRef]
   );
 
   const refreshBoxCutoutMetrics = useCallback(() => {
@@ -8230,14 +8238,16 @@ export function ImageNode({
                           enterKeyHint="done"
                           inputMode="text"
                           lang="zh-CN"
-                          value={
+                          defaultValue={
                             localEditPromptDrafts[region.id] ??
                             localEditPromptDraftRefs.current[region.id] ??
                             region.prompt
                           }
                           onBlur={(event) => {
-                            const nextPrompt = event.currentTarget.value;
-                            updateLocalEditPromptDraft(region.id, nextPrompt);
+                            const nextPrompt =
+                              localEditPromptDraftRefs.current[region.id] ??
+                              event.currentTarget.value;
+                            event.currentTarget.value = nextPrompt;
                             persistLocalEditRegionPrompt(region.id, nextPrompt);
                           }}
                           onClick={(event) => {
@@ -8272,7 +8282,7 @@ export function ImageNode({
                             );
                           }}
                           onChange={(event) => {
-                            updateLocalEditPromptDraft(
+                            updateLocalEditPromptDraftRef(
                               region.id,
                               event.currentTarget.value
                             );