diff --git a/components/zine/TextSelectionCanvas.tsx b/components/zine/TextSelectionCanvas.tsx index 1f1e07e..8a48157 100644 --- a/components/zine/TextSelectionCanvas.tsx +++ b/components/zine/TextSelectionCanvas.tsx @@ -182,7 +182,7 @@ export default function TextSelectionCanvas({ }; // Generate mask and complete selection - const handleConfirm = () => { + const handleConfirm = useCallback(() => { if (!currentRect || currentRect.width < 20 || currentRect.height < 20) { return; } @@ -222,10 +222,26 @@ export default function TextSelectionCanvas({ bounds: scaledRect, maskBase64, }); - }; + }, [currentRect, canvasSize, onSelectionComplete]); const hasValidSelection = currentRect && currentRect.width >= 20 && currentRect.height >= 20; + // Handle keyboard events (Enter to confirm, Escape to cancel) + useEffect(() => { + const handleKeyDown = (e: KeyboardEvent) => { + if (e.key === "Enter" && hasValidSelection) { + e.preventDefault(); + handleConfirm(); + } else if (e.key === "Escape") { + e.preventDefault(); + onCancel(); + } + }; + + window.addEventListener("keydown", handleKeyDown); + return () => window.removeEventListener("keydown", handleKeyDown); + }, [hasValidSelection, handleConfirm, onCancel]); + return (
- Click and drag to select the text region you want to change + Click and drag to select the text region • Press Enter to confirm or Esc to cancel