fix: detect typing inside the QuotedHtml shadow island via composedPath #654

hooks/use-keyboard-shortcuts.ts

@@ -2,6 +2,7 @@
 
 import { useEffect, useCallback, useRef } from "react";
 import { Email } from "@/lib/jmap/types";
+import { isEditableEventTarget } from "@/lib/keyboard";
 
 export interface KeyboardShortcutHandlers {
   // Navigation
@@ -43,18 +44,6 @@ export interface UseKeyboardShortcutsOptions {
   handlers: KeyboardShortcutHandlers;
 }
 
-// Check if user is typing in an input field
-function isInputFocused(): boolean {
-  const activeElement = document.activeElement;
-  if (!activeElement) return false;
-
-  const tagName = activeElement.tagName.toLowerCase();
-  const isInput = tagName === "input" || tagName === "textarea" || tagName === "select";
-  const isContentEditable = activeElement.getAttribute("contenteditable") === "true";
-
-  return isInput || isContentEditable;
-}
-
 // Shortcuts must fire regardless of the active keyboard layout (e.g. Cyrillic,
 // Greek). Derive the key from the PHYSICAL key (event.code) instead of the
 // layout-dependent event.key: letters from KeyA..KeyZ, and the symbol shortcuts
@@ -94,8 +83,10 @@ export function useKeyboardShortcuts({
 
   const handleKeyDown = useCallback(
     (event: KeyboardEvent) => {
-      // Don't trigger shortcuts when typing in inputs
-      if (isInputFocused()) return;
+      // Don't trigger shortcuts when typing in inputs. Must be event-based
+      // (composedPath), not document.activeElement: the QuotedHtml island's
+      // shadow root retargets activeElement to its plain-div host (#654).
+      if (isEditableEventTarget(event)) return;
 
       const h = handlersRef.current;
       const key = physicalShortcutKey(event);