From ad530c6c40aba33d724b5d3ad142d17172a47667 Mon Sep 17 00:00:00 2001
From: Jeff Emmett <jeffemmett@gmail.com>
Date: Thu, 25 Dec 2025 23:12:34 -0500
Subject: [PATCH] feat: add keyboard shortcuts to text selection tool
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Enter key confirms selection when valid area is drawn
- Escape key cancels and closes the selector
- Updated button text to "Edit This Area ↵" for clarity
- Added help text showing keyboard shortcuts

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 components/zine/TextSelectionCanvas.tsx | 24 ++++++++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

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 (
     <div className="fixed inset-0 z-50 bg-black/80 flex items-center justify-center p-4">
       <div className="relative w-full max-w-2xl">
@@ -284,13 +300,13 @@ export default function TextSelectionCanvas({
                 : "bg-gray-600 text-gray-400 border-gray-600 cursor-not-allowed"
             }`}
           >
-            {hasValidSelection ? "Confirm Selection" : "Draw a selection"}
+            {hasValidSelection ? "Edit This Area ↵" : "Draw a selection"}
           </button>
         </div>
 
         {/* Help text */}
         <p className="text-white/60 text-sm text-center mt-3 punk-text">
-          Click and drag to select the text region you want to change
+          Click and drag to select the text region • Press <kbd className="px-1.5 py-0.5 bg-white/20 rounded">Enter</kbd> to confirm or <kbd className="px-1.5 py-0.5 bg-white/20 rounded">Esc</kbd> to cancel
         </p>
       </div>
     </div>