Skip to content

Commit 7163386

Browse files
authored
Make zoom key command behave the same regardless of mouse position (Stirling-Tools#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.
1 parent e6974d5 commit 7163386

2 files changed

Lines changed: 33 additions & 36 deletions

File tree

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

Lines changed: 19 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,6 @@ const PageEditor = ({ onFunctionsReady }: PageEditorProps) => {
7575
// Zoom state management
7676
const [zoomLevel, setZoomLevel] = useState(1.0);
7777
const containerRef = useRef<HTMLDivElement>(null);
78-
const [isContainerHovered, setIsContainerHovered] = useState(false);
7978
const rootFontSize = useMemo(() => {
8079
if (typeof window === "undefined") {
8180
return 16;
@@ -560,31 +559,32 @@ const PageEditor = ({ onFunctionsReady }: PageEditorProps) => {
560559
// Handle keyboard zoom shortcuts
561560
useEffect(() => {
562561
const handleKeyDown = (event: KeyboardEvent) => {
563-
if (!isContainerHovered) return;
564-
565-
// Check if Ctrl (Windows/Linux) or Cmd (Mac) is pressed
566-
if (event.ctrlKey || event.metaKey) {
567-
if (event.key === "=" || event.key === "+") {
568-
// Ctrl+= or Ctrl++ for zoom in
569-
event.preventDefault();
570-
zoomIn();
571-
} else if (event.key === "-" || event.key === "_") {
572-
// Ctrl+- for zoom out
573-
event.preventDefault();
574-
zoomOut();
575-
} else if (event.key === "0") {
576-
// Ctrl+0 for reset zoom
577-
event.preventDefault();
578-
setZoomLevel(1.0);
579-
}
562+
if (!(event.ctrlKey || event.metaKey)) return;
563+
564+
const target = event.target as Element | null;
565+
const isInTextInput =
566+
target?.tagName === "INPUT" ||
567+
target?.tagName === "TEXTAREA" ||
568+
(target as HTMLElement | null)?.isContentEditable === true;
569+
if (isInTextInput) return;
570+
571+
if (event.key === "=" || event.key === "+") {
572+
event.preventDefault();
573+
zoomIn();
574+
} else if (event.key === "-" || event.key === "_") {
575+
event.preventDefault();
576+
zoomOut();
577+
} else if (event.key === "0") {
578+
event.preventDefault();
579+
setZoomLevel(1.0);
580580
}
581581
};
582582

583583
document.addEventListener("keydown", handleKeyDown);
584584
return () => {
585585
document.removeEventListener("keydown", handleKeyDown);
586586
};
587-
}, [isContainerHovered, zoomIn, zoomOut]);
587+
}, [zoomIn, zoomOut, setZoomLevel]);
588588

589589
// Display all pages - use edited or original document
590590
const displayedPages = displayDocument?.pages || [];
@@ -673,8 +673,6 @@ const PageEditor = ({ onFunctionsReady }: PageEditorProps) => {
673673
<div
674674
ref={containerRef}
675675
data-scrolling-container="true"
676-
onMouseEnter={() => setIsContainerHovered(true)}
677-
onMouseLeave={() => setIsContainerHovered(false)}
678676
style={{
679677
height: "100%",
680678
overflow: "auto",

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

Lines changed: 14 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -441,6 +441,20 @@ const EmbedPdfViewerContent = ({
441441
event.preventDefault();
442442
printActions.print();
443443
return;
444+
case "=":
445+
case "+":
446+
event.preventDefault();
447+
zoomActions.zoomIn();
448+
return;
449+
case "-":
450+
case "_":
451+
event.preventDefault();
452+
zoomActions.zoomOut();
453+
return;
454+
case "0":
455+
event.preventDefault();
456+
zoomActions.requestZoom("fit-width");
457+
return;
444458
}
445459
}
446460
}
@@ -454,21 +468,6 @@ const EmbedPdfViewerContent = ({
454468
// Modifier key shortcuts (Ctrl/Cmd + key)
455469
if (mod) {
456470
switch (event.key) {
457-
case "=":
458-
case "+":
459-
event.preventDefault();
460-
zoomActions.zoomIn();
461-
return;
462-
case "-":
463-
case "_":
464-
event.preventDefault();
465-
zoomActions.zoomOut();
466-
return;
467-
case "0":
468-
// Ctrl+0: Reset zoom to fit width
469-
event.preventDefault();
470-
zoomActions.requestZoom("fit-width");
471-
return;
472471
case "a":
473472
case "A":
474473
// Ctrl+A: Prevent browser from selecting all UI text

0 commit comments

Comments
 (0)