Merge pull request Gnathonic#250 from Gnathonic/fix/reader-hotkey-textbox

fix: Extend hotkey filtering to OCR textboxes and nav keys

Author: Gnathonic

src/lib/components/Reader/Reader.svelte

@@ -194,23 +194,31 @@
   }
 
   function handleShortcuts(event: KeyboardEvent & { currentTarget: EventTarget & Window }) {
-    // Ignore shortcuts when user is in a text input, editable field, or UI overlay
+    // Ignore shortcuts when user is in a text input, editable field, text box, or UI overlay
     const target = event.target as HTMLElement;
     if (
       target.tagName === 'INPUT' ||
       target.tagName === 'TEXTAREA' ||
       target.isContentEditable ||
       target.closest('#settings') || // Settings drawer
-      target.closest('[data-popover]') // Page number popover and other popovers
+      target.closest('[data-popover]') || // Page number popover and other popovers
+      target.closest('.textBox') // OCR text boxes (even when not editable)
     ) {
       return;
     }
 
     const action = event.code || event.key;
 
-    // For letter keys, ignore if any modifier key is pressed (e.g., Ctrl+C for copy)
+    // For letter keys and nav keys, ignore if any modifier key is pressed
+    // (e.g., Ctrl+C for copy, Shift+Arrow for text selection)
     const isLetterKey = action.startsWith('Key');
-    if (isLetterKey && (event.ctrlKey || event.altKey || event.metaKey)) {
+    const isNavKey = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(
+      action
+    );
+    if (
+      (isLetterKey || isNavKey) &&
+      (event.ctrlKey || event.altKey || event.metaKey || event.shiftKey)
+    ) {
       return;
     }
 

src/lib/panzoom/util.ts

@@ -35,10 +35,34 @@ export function initPanzoom(node: HTMLElement) {
     // Panzoom typing is wrong here
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-expect-error
-    filterKey: (e: any) => {
+    filterKey: (e: KeyboardEvent) => {
+      // Filter (ignore) keys that shouldn't be handled by panzoom
+      const target = e.target as HTMLElement;
+
+      // Always filter left/right arrows (page navigation)
       if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
         return true;
       }
+
+      // Filter all keys when in text inputs, settings, popovers, or textboxes
+      if (
+        target.tagName === 'INPUT' ||
+        target.tagName === 'TEXTAREA' ||
+        target.isContentEditable ||
+        target.closest('#settings') ||
+        target.closest('[data-popover]') ||
+        target.closest('.textBox')
+      ) {
+        return true;
+      }
+
+      // Filter nav keys when modifier keys are pressed (for text selection, etc.)
+      const isNavKey = ['ArrowUp', 'ArrowDown', 'Home', 'End'].includes(e.key);
+      if (isNavKey && (e.ctrlKey || e.altKey || e.metaKey || e.shiftKey)) {
+        return true;
+      }
+
+      return false;
     }
   });