diff --git a/components/canvas/nodes/ImageNode.tsx b/components/canvas/nodes/ImageNode.tsx index 44f6116b0..c60cfc963 100644 --- a/components/canvas/nodes/ImageNode.tsx +++ b/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();