Make zoom key command behave the same regardless of mouse position (#6508)

# Description of Changes
Make zoom key command behave the same regardless of mouse position.
Previously only zoomed the editor if the mouse was over the editor.

frontend/editor/src/core/components/pageEditor/PageEditor.tsx

@@ -75,7 +75,6 @@ const PageEditor = ({ onFunctionsReady }: PageEditorProps) => {
   // Zoom state management
   const [zoomLevel, setZoomLevel] = useState(1.0);
   const containerRef = useRef<HTMLDivElement>(null);
-  const [isContainerHovered, setIsContainerHovered] = useState(false);
   const rootFontSize = useMemo(() => {
     if (typeof window === "undefined") {
       return 16;
@@ -560,23 +559,24 @@ const PageEditor = ({ onFunctionsReady }: PageEditorProps) => {
   // Handle keyboard zoom shortcuts
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
-      if (!isContainerHovered) return;
+      if (!(event.ctrlKey || event.metaKey)) return;
 
-      // Check if Ctrl (Windows/Linux) or Cmd (Mac) is pressed
+      const target = event.target as Element | null;
-      if (event.ctrlKey || event.metaKey) {
+      const isInTextInput =
-        if (event.key === "=" || event.key === "+") {
+        target?.tagName === "INPUT" ||
-          // Ctrl+= or Ctrl++ for zoom in
+        target?.tagName === "TEXTAREA" ||
-          event.preventDefault();
+        (target as HTMLElement | null)?.isContentEditable === true;
-          zoomIn();
+      if (isInTextInput) return;
-        } else if (event.key === "-" || event.key === "_") {
+
-          // Ctrl+- for zoom out
+      if (event.key === "=" || event.key === "+") {
-          event.preventDefault();
+        event.preventDefault();
-          zoomOut();
+        zoomIn();
-        } else if (event.key === "0") {
+      } else if (event.key === "-" || event.key === "_") {
-          // Ctrl+0 for reset zoom
+        event.preventDefault();
-          event.preventDefault();
+        zoomOut();
-          setZoomLevel(1.0);
+      } else if (event.key === "0") {
-        }
+        event.preventDefault();
+        setZoomLevel(1.0);
       }
     };
 
@@ -584,7 +584,7 @@ const PageEditor = ({ onFunctionsReady }: PageEditorProps) => {
     return () => {
       document.removeEventListener("keydown", handleKeyDown);
     };
-  }, [isContainerHovered, zoomIn, zoomOut]);
+  }, [zoomIn, zoomOut, setZoomLevel]);
 
   // Display all pages - use edited or original document
   const displayedPages = displayDocument?.pages || [];
@@ -673,8 +673,6 @@ const PageEditor = ({ onFunctionsReady }: PageEditorProps) => {
     <div
       ref={containerRef}
       data-scrolling-container="true"
-      onMouseEnter={() => setIsContainerHovered(true)}
-      onMouseLeave={() => setIsContainerHovered(false)}
       style={{
         height: "100%",
         overflow: "auto",

frontend/editor/src/core/components/viewer/EmbedPdfViewer.tsx

@@ -441,6 +441,20 @@ const EmbedPdfViewerContent = ({
                 event.preventDefault();
                 printActions.print();
                 return;
+              case "=":
+              case "+":
+                event.preventDefault();
+                zoomActions.zoomIn();
+                return;
+              case "-":
+              case "_":
+                event.preventDefault();
+                zoomActions.zoomOut();
+                return;
+              case "0":
+                event.preventDefault();
+                zoomActions.requestZoom("fit-width");
+                return;
             }
           }
         }
@@ -454,21 +468,6 @@ const EmbedPdfViewerContent = ({
       // Modifier key shortcuts (Ctrl/Cmd + key)
       if (mod) {
         switch (event.key) {
-          case "=":
-          case "+":
-            event.preventDefault();
-            zoomActions.zoomIn();
-            return;
-          case "-":
-          case "_":
-            event.preventDefault();
-            zoomActions.zoomOut();
-            return;
-          case "0":
-            // Ctrl+0: Reset zoom to fit width
-            event.preventDefault();
-            zoomActions.requestZoom("fit-width");
-            return;
           case "a":
           case "A":
             // Ctrl+A: Prevent browser from selecting all UI text