fix: keep local edit prompt focused

components/canvas/nodes/ImageNode.tsx

@@ -266,6 +266,9 @@ const LOCAL_EDIT_COLORS = [
   "#eab308",
   "#ec4899",
 ];
+const isLocalEditControlTarget = (target: EventTarget | null) =>
+  target instanceof HTMLElement &&
+  Boolean(target.closest('[data-local-edit-control="true"]'));
 const FLOATING_TOOLBAR_SCALE = 0.8;
 const IMAGE_EDIT_PANEL_SCALE = 0.5;
 const ANGLE_PANEL_SCALE = 0.65;
@@ -2650,6 +2653,9 @@ export function ImageNode({
 
   useEffect(() => {
     if (!isSelected) {
+      if (localEditMode && isLocalEditControlTarget(document.activeElement)) {
+        return;
+      }
       setCropPanelOpen(false);
       setCropRect(null);
       setCropInteraction(null);
@@ -2662,7 +2668,7 @@ export function ImageNode({
       resetBoxCutoutState();
       resetLocalEditState();
     }
-  }, [isSelected, resetBoxCutoutState, resetLocalEditState]);
+  }, [isSelected, localEditMode, resetBoxCutoutState, resetLocalEditState]);
 
   useEffect(() => {
     if (anglePanelOpen) return;
@@ -2723,6 +2729,9 @@ export function ImageNode({
     if (!localEditMode || typeof window === "undefined") return;
 
     const handleKeyDown = (event: KeyboardEvent) => {
+      if (isLocalEditControlTarget(event.target)) {
+        return;
+      }
       if (event.key === "Escape") {
         event.preventDefault();
         resetLocalEditState();
@@ -8164,7 +8173,20 @@ export function ImageNode({
                     const nextPrompt = event.currentTarget.value;
                     localEditPromptDraftRefs.current[region.id] = nextPrompt;
                     persistLocalEditRegionPrompt(region.id, nextPrompt);
-                    setEditingLocalEditRegionId(null);
+                    if (isLocalEditControlTarget(event.relatedTarget)) {
+                      return;
+                    }
+                    window.setTimeout(() => {
+                      if (isLocalEditControlTarget(document.activeElement)) {
+                        return;
+                      }
+                      setEditingLocalEditRegionId((current) => {
+                        if (current === region.id) {
+                          focusLocalEditPromptInput(region.id);
+                        }
+                        return current;
+                      });
+                    }, 80);
                   }}
                   onClick={(event) => {
                     event.nativeEvent.stopImmediatePropagation?.();
@@ -8181,6 +8203,10 @@ export function ImageNode({
                     localEditPromptDraftRefs.current[region.id] =
                       event.currentTarget.value;
                   }}
+                  onChange={(event) => {
+                    localEditPromptDraftRefs.current[region.id] =
+                      event.currentTarget.value;
+                  }}
                   onKeyDown={(event) => {
                     event.nativeEvent.stopImmediatePropagation?.();
                     event.stopPropagation();