diff --git a/frontend/editor/src/core/components/pageEditor/PageEditor.tsx b/frontend/editor/src/core/components/pageEditor/PageEditor.tsx index dcbb0f087..73be91f09 100644 --- a/frontend/editor/src/core/components/pageEditor/PageEditor.tsx +++ b/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(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 - if (event.ctrlKey || event.metaKey) { - if (event.key === "=" || event.key === "+") { - // Ctrl+= or Ctrl++ for zoom in - event.preventDefault(); - zoomIn(); - } else if (event.key === "-" || event.key === "_") { - // Ctrl+- for zoom out - event.preventDefault(); - zoomOut(); - } else if (event.key === "0") { - // Ctrl+0 for reset zoom - event.preventDefault(); - setZoomLevel(1.0); - } + const target = event.target as Element | null; + const isInTextInput = + target?.tagName === "INPUT" || + target?.tagName === "TEXTAREA" || + (target as HTMLElement | null)?.isContentEditable === true; + if (isInTextInput) return; + + if (event.key === "=" || event.key === "+") { + event.preventDefault(); + zoomIn(); + } else if (event.key === "-" || event.key === "_") { + event.preventDefault(); + zoomOut(); + } 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) => {
setIsContainerHovered(true)} - onMouseLeave={() => setIsContainerHovered(false)} style={{ height: "100%", overflow: "auto", diff --git a/frontend/editor/src/core/components/viewer/EmbedPdfViewer.tsx b/frontend/editor/src/core/components/viewer/EmbedPdfViewer.tsx index 889cc2aea..f3e9b8a93 100644 --- a/frontend/editor/src/core/components/viewer/EmbedPdfViewer.tsx +++ b/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