Add hook to prevent ios zoom

Author: bobsingor

packages/plugin-annotation/src/shared/components/annotations/free-text.tsx

@@ -1,18 +1,11 @@
-import {
-  MouseEvent,
-  useEffect,
-  useLayoutEffect,
-  useRef,
-  useState,
-  suppressContentEditableWarningProps,
-} from '@framework';
+import { MouseEvent, useEffect, useRef, suppressContentEditableWarningProps } from '@framework';
 import {
   PdfFreeTextAnnoObject,
   PdfVerticalAlignment,
   standardFontCssProperties,
   textAlignmentToCss,
 } from '@embedpdf/models';
-import { useAnnotationCapability } from '../..';
+import { useAnnotationCapability, useIOSZoomPrevention } from '../..';
 import { TrackedAnnotation } from '@embedpdf/plugin-annotation';
 
 interface FreeTextProps {
@@ -42,7 +35,10 @@ export function FreeText({
   const editingRef = useRef(false);
   const { provides: annotationCapability } = useAnnotationCapability();
   const annotationProvides = annotationCapability?.forDocument(documentId) ?? null;
-  const [isIOS, setIsIOS] = useState(false);
+  const { adjustedFontPx, wrapperStyle } = useIOSZoomPrevention(
+    annotation.object.fontSize * scale,
+    isEditing,
+  );
 
   useEffect(() => {
     if (isEditing && editorRef.current) {
@@ -67,18 +63,6 @@ export function FreeText({
     }
   }, [isEditing]);
 
-  useLayoutEffect(() => {
-    try {
-      const nav = navigator as any;
-      const ios =
-        /iPad|iPhone|iPod/.test(navigator.userAgent) ||
-        (navigator.platform === 'MacIntel' && nav?.maxTouchPoints > 1);
-      setIsIOS(ios);
-    } catch {
-      setIsIOS(false);
-    }
-  }, []);
-
   const handleBlur = () => {
     if (!editingRef.current) return;
     editingRef.current = false;
@@ -89,15 +73,6 @@ export function FreeText({
     });
   };
 
-  // iOS zoom prevention: keep focused font-size >= 16px, visually scale down if needed.
-  const computedFontPx = annotation.object.fontSize * scale;
-  const MIN_IOS_FOCUS_FONT_PX = 16;
-  const needsComp =
-    isIOS && isEditing && computedFontPx > 0 && computedFontPx < MIN_IOS_FOCUS_FONT_PX;
-  const adjustedFontPx = needsComp ? MIN_IOS_FOCUS_FONT_PX : computedFontPx;
-  const scaleComp = needsComp ? computedFontPx / MIN_IOS_FOCUS_FONT_PX : 1;
-  const invScalePercent = needsComp ? 100 / scaleComp : 100;
-
   return (
     <div
       style={{
@@ -130,14 +105,13 @@ export function FreeText({
           display: 'flex',
           backgroundColor: annotation.object.color ?? annotation.object.backgroundColor,
           opacity: annotation.object.opacity,
-          width: needsComp ? `${invScalePercent}%` : '100%',
-          height: needsComp ? `${invScalePercent}%` : '100%',
+          width: '100%',
+          height: '100%',
           lineHeight: '1.18',
           overflow: 'hidden',
           cursor: isEditing ? 'text' : onClick ? 'pointer' : 'default',
           outline: 'none',
-          transform: needsComp ? `scale(${scaleComp})` : undefined,
-          transformOrigin: 'top left',
+          ...wrapperStyle,
         }}
         contentEditable={isEditing}
         {...suppressContentEditableWarningProps}

packages/plugin-annotation/src/shared/hooks/index.ts

@@ -1 +1,2 @@
 export * from './use-annotation';
+export * from './use-ios-zoom-prevention';

packages/plugin-annotation/src/shared/hooks/use-ios-zoom-prevention.ts

@@ -0,0 +1,54 @@
+import { useMemo, CSSProperties } from '@framework';
+
+const MIN_IOS_FOCUS_FONT_PX = 16;
+
+function detectIOS(): boolean {
+  try {
+    const nav = navigator as any;
+    return (
+      /iPad|iPhone|iPod/.test(navigator.userAgent) ||
+      (navigator.platform === 'MacIntel' && nav?.maxTouchPoints > 1)
+    );
+  } catch {
+    return false;
+  }
+}
+
+let _isIOS: boolean | undefined;
+function getIsIOS(): boolean {
+  if (_isIOS === undefined) {
+    _isIOS = detectIOS();
+  }
+  return _isIOS;
+}
+
+/**
+ * Prevents iOS Safari from auto-zooming when a focused input's computed
+ * font-size is below 16px. Returns an adjusted font size and optional
+ * wrapper style that uses `transform: scale()` to visually match the
+ * intended size while keeping the real font at >= 16px.
+ *
+ * @param computedFontPx - The intended on-screen font size (fontSize * scale)
+ * @param active - Whether compensation should apply (e.g. isEditing, or always true for form inputs)
+ */
+export function useIOSZoomPrevention(computedFontPx: number, active: boolean) {
+  const isIOS = getIsIOS();
+
+  return useMemo(() => {
+    const needsComp =
+      isIOS && active && computedFontPx > 0 && computedFontPx < MIN_IOS_FOCUS_FONT_PX;
+    const adjustedFontPx = needsComp ? MIN_IOS_FOCUS_FONT_PX : computedFontPx;
+    const scaleComp = needsComp ? computedFontPx / MIN_IOS_FOCUS_FONT_PX : 1;
+
+    const wrapperStyle: CSSProperties | undefined = needsComp
+      ? {
+          width: `${100 / scaleComp}%`,
+          height: `${100 / scaleComp}%`,
+          transform: `scale(${scaleComp})`,
+          transformOrigin: 'top left',
+        }
+      : undefined;
+
+    return { needsComp, adjustedFontPx, scaleComp, wrapperStyle };
+  }, [isIOS, active, computedFontPx]);
+}

packages/plugin-form/src/shared/components/fields/text.tsx

@@ -1,5 +1,6 @@
 import { PDF_FORM_FIELD_FLAG, standardFontCssProperties } from '@embedpdf/models';
 import { CSSProperties, FormEvent, useCallback, useEffect, useMemo, useState } from '@framework';
+import { useIOSZoomPrevention } from '@embedpdf/plugin-annotation/@framework';
 
 import { TextFieldProps } from '../types';
 import { inputStyle, textareaStyle } from './style';
@@ -151,6 +152,7 @@ export function TextField(props: TextFieldProps) {
 
   const bw = (annotation.strokeWidth ?? 0) * scale;
   const fontCss = standardFontCssProperties(annotation.fontFamily);
+  const { adjustedFontPx, wrapperStyle } = useIOSZoomPrevention(annotation.fontSize * scale, true);
 
   const visualStyle: CSSProperties = useMemo(
     () => ({
@@ -160,18 +162,10 @@ export function TextField(props: TextFieldProps) {
       borderWidth: bw,
       color: annotation.fontColor,
       ...fontCss,
-      fontSize: annotation.fontSize * scale,
+      fontSize: adjustedFontPx,
       padding: `${bw}px ${bw}px`,
     }),
-    [
-      annotation.color,
-      annotation.strokeColor,
-      annotation.fontColor,
-      annotation.fontSize,
-      bw,
-      fontCss,
-      scale,
-    ],
+    [annotation.color, annotation.strokeColor, annotation.fontColor, adjustedFontPx, bw, fontCss],
   );
 
   const isDisabled = !isEditable || !!(flag & PDF_FORM_FIELD_FLAG.READONLY);
@@ -197,10 +191,10 @@ export function TextField(props: TextFieldProps) {
     const cellFont: CSSProperties = {
       color: annotation.fontColor,
       ...fontCss,
-      fontSize: annotation.fontSize * scale,
+      fontSize: adjustedFontPx,
     };
 
-    return (
+    const combContent = (
       <CombField
         inputRef={inputRef as (el: HTMLInputElement | null) => void}
         required={isRequired}
@@ -218,9 +212,11 @@ export function TextField(props: TextFieldProps) {
         onBlur={onBlur}
       />
     );
+
+    return wrapperStyle ? <div style={wrapperStyle}>{combContent}</div> : combContent;
   }
 
-  return isMultipleLine ? (
+  const inputContent = isMultipleLine ? (
     <textarea
       ref={inputRef as (el: HTMLTextAreaElement | null) => void}
       required={isRequired}
@@ -248,4 +244,6 @@ export function TextField(props: TextFieldProps) {
       style={{ ...inputStyle, ...visualStyle }}
     />
   );
+
+  return wrapperStyle ? <div style={wrapperStyle}>{inputContent}</div> : inputContent;
 }

viewers/snippet/src/components/mode-select-button.tsx

@@ -14,13 +14,14 @@ export function ModeSelectButton({ documentId, className }: ModeSelectButtonProp
   const commandAnnotate = useCommand('mode:annotate', documentId);
   const commandShapes = useCommand('mode:shapes', documentId);
   const commandRedact = useCommand('mode:redact', documentId);
+  const commandForm = useCommand('mode:form', documentId);
   const commandOverflow = useCommand('tabs:overflow-menu', documentId);
 
   // Find the currently active mode
   const activeCommand = useMemo(() => {
-    const commands = [commandView, commandAnnotate, commandShapes, commandRedact];
+    const commands = [commandView, commandAnnotate, commandShapes, commandForm, commandRedact];
     return commands.find((cmd) => cmd?.active) || commandView;
-  }, [commandView, commandAnnotate, commandShapes, commandRedact]);
+  }, [commandView, commandAnnotate, commandShapes, commandForm, commandRedact]);
 
   const handleClick = useCallback(
     (e: MouseEvent) => {