diff --git a/components/canvas/nodes/ImageNode.tsx b/components/canvas/nodes/ImageNode.tsx index 14180c579..c338d20db 100644 --- a/components/canvas/nodes/ImageNode.tsx +++ b/components/canvas/nodes/ImageNode.tsx @@ -287,6 +287,21 @@ const LOCAL_EDIT_COLORS = [ const isLocalEditControlTarget = (target: EventTarget | null) => target instanceof HTMLElement && Boolean(target.closest('[data-local-edit-control="true"]')); +const stopLocalEditPromptTextEvent = ( + event: React.SyntheticEvent +) => { + event.stopPropagation(); + stopLocalEditPromptNativeEvent(event); +}; +const stopLocalEditPromptNativeEvent = ( + event: React.SyntheticEvent +) => { + const nativeEvent = event.nativeEvent as Event & { + stopImmediatePropagation?: () => void; + }; + nativeEvent.stopPropagation?.(); + nativeEvent.stopImmediatePropagation?.(); +}; const FLOATING_TOOLBAR_SCALE = 0.8; const IMAGE_EDIT_PANEL_SCALE = 0.5; const ANGLE_PANEL_SCALE = 0.65; @@ -7995,6 +8010,7 @@ export function ImageNode({ autoComplete="off" enterKeyHint="done" lang="zh-CN" + onBeforeInputCapture={stopLocalEditPromptNativeEvent} onBlur={(event) => { const nextPrompt = event.currentTarget.value; localEditPromptDraftRefs.current[region.id] = @@ -8021,20 +8037,23 @@ export function ImageNode({ event.stopPropagation(); event.currentTarget.focus({ preventScroll: true }); }} + onCompositionEndCapture={stopLocalEditPromptNativeEvent} onCompositionEnd={(event) => { - event.stopPropagation(); + stopLocalEditPromptTextEvent(event); localEditPromptComposingRefs.current[region.id] = false; localEditPromptDraftRefs.current[region.id] = event.currentTarget.value; }} + onCompositionStartCapture={stopLocalEditPromptNativeEvent} onCompositionStart={(event) => { - event.stopPropagation(); + stopLocalEditPromptTextEvent(event); localEditPromptComposingRefs.current[region.id] = true; }} + onCompositionUpdateCapture={stopLocalEditPromptNativeEvent} onCompositionUpdate={(event) => { - event.stopPropagation(); + stopLocalEditPromptTextEvent(event); }} onFocus={(event) => { event.stopPropagation(); @@ -8042,16 +8061,20 @@ export function ImageNode({ current === region.id ? current : region.id ); }} + onInputCapture={stopLocalEditPromptNativeEvent} onInput={(event) => { + stopLocalEditPromptTextEvent(event); localEditPromptDraftRefs.current[region.id] = event.currentTarget.value; }} onChange={(event) => { + stopLocalEditPromptTextEvent(event); localEditPromptDraftRefs.current[region.id] = event.currentTarget.value; }} + onKeyDownCapture={stopLocalEditPromptNativeEvent} onKeyDown={(event) => { - event.stopPropagation(); + stopLocalEditPromptTextEvent(event); const isComposing = event.nativeEvent.isComposing || event.key === "Process" || @@ -8059,7 +8082,10 @@ export function ImageNode({ if (isComposing) { return; } - if (event.key === "Enter") { + if ( + event.key === "Enter" && + (event.metaKey || event.ctrlKey) + ) { event.preventDefault(); persistLocalEditRegionPrompt( region.id, @@ -8076,8 +8102,9 @@ export function ImageNode({ setEditingLocalEditRegionId(null); } }} + onKeyUpCapture={stopLocalEditPromptNativeEvent} onKeyUp={(event) => { - event.stopPropagation(); + stopLocalEditPromptTextEvent(event); }} onMouseDown={(event) => { event.stopPropagation(); @@ -8093,6 +8120,7 @@ export function ImageNode({ event.stopPropagation(); event.currentTarget.focus({ preventScroll: true }); }} + onPasteCapture={stopLocalEditPromptNativeEvent} placeholder={`区域 ${region.index} 提示词`} ref={(input) => { localEditPromptInputRefs.current[region.id] = input;