@embedpdf/plugin-annotation 2.9.1 → 2.10.0

package/dist/react/index.js

@@ -1,10 +1,10 @@
 import { createPluginPackage } from "@embedpdf/core";
-import { initialDocumentState, AnnotationPlugin, generateCloudyRectanglePath, generateCloudyEllipsePath, patching, generateCloudyPolygonPath, getAnnotationsByPageIndex, getSelectedAnnotationIds, resolveInteractionProp, AnnotationPluginPackage as AnnotationPluginPackage$1 } from "@embedpdf/plugin-annotation";
+import { AnnotationPlugin, initialDocumentState, generateCloudyRectanglePath, generateCloudyEllipsePath, patching, generateCloudyPolygonPath, LockModeType, getAnnotationsByPageIndex, getSelectedAnnotationIds, resolveInteractionProp, getAnnotationCategories, hasLockedFlag, isCategoryLocked, AnnotationPluginPackage as AnnotationPluginPackage$1 } from "@embedpdf/plugin-annotation";
 export * from "@embedpdf/plugin-annotation";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { createContext, useState, useCallback, useContext, useRef, useEffect, useMemo, useLayoutEffect, Fragment as Fragment$1 } from "react";
+import { createContext, useState, useCallback, useContext, useRef, useEffect, useMemo, Fragment as Fragment$1 } from "react";
 import { createPortal } from "react-dom";
-import { useCapability, usePlugin, useDocumentPermissions, useDocumentState } from "@embedpdf/core/react";
+import { usePlugin, useCapability, useDocumentPermissions, useDocumentState } from "@embedpdf/core/react";
 import { inferRotationCenterFromRects, boundingRectOrEmpty, PdfAnnotationBorderStyle, getContrastStrokeColor, PdfVerticalAlignment, textAlignmentToCss, standardFontCssProperties, ignore, PdfErrorCode, PdfBlendMode, PdfAnnotationSubtype, blendModeToCss } from "@embedpdf/models";
 import { usePointerHandlers } from "@embedpdf/plugin-interaction-manager/react";
 import { useSelectionCapability } from "@embedpdf/plugin-selection/react";
@@ -61,6 +61,50 @@ const useAnnotation = (documentId) => {
     provides: (provides == null ? void 0 : provides.forDocument(documentId)) ?? null
   };
 };
+function AnnotationNavigationHandler() {
+  const { plugin } = useAnnotationPlugin();
+  const { provides } = useAnnotationCapability();
+  useEffect(() => {
+    if (!provides || !plugin) return;
+    return provides.onNavigate((event) => {
+      if (event.result.outcome === "uri" && plugin.config.autoOpenLinks !== false) {
+        window.open(event.result.uri, "_blank", "noopener,noreferrer");
+      }
+    });
+  }, [provides, plugin]);
+  return null;
+}
+const MIN_IOS_FOCUS_FONT_PX = 16;
+function detectIOS() {
+  try {
+    const nav = navigator;
+    return /iPad|iPhone|iPod/.test(navigator.userAgent) || navigator.platform === "MacIntel" && (nav == null ? void 0 : nav.maxTouchPoints) > 1;
+  } catch {
+    return false;
+  }
+}
+let _isIOS;
+function getIsIOS() {
+  if (_isIOS === void 0) {
+    _isIOS = detectIOS();
+  }
+  return _isIOS;
+}
+function useIOSZoomPrevention(computedFontPx, active) {
+  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 = needsComp ? {
+      width: `${100 / scaleComp}%`,
+      height: `${100 / scaleComp}%`,
+      transform: `scale(${scaleComp})`,
+      transformOrigin: "top left"
+    } : void 0;
+    return { needsComp, adjustedFontPx, scaleComp, wrapperStyle };
+  }, [isIOS, active, computedFontPx]);
+}
 function AppearanceImage({ appearance, style }) {
   const [imageUrl, setImageUrl] = useState(null);
   const urlRef = useRef(null);
@@ -1215,6 +1259,7 @@ function createRenderer(entry) {
     id: entry.id,
     matches: (annotation) => entry.matches(annotation),
     render: (props) => entry.render(props),
+    renderPreview: entry.renderPreview ? (props) => entry.renderPreview(props) : void 0,
     vertexConfig: entry.vertexConfig,
     zIndex: entry.zIndex,
     defaultBlendMode: entry.defaultBlendMode,
@@ -1224,7 +1269,9 @@ function createRenderer(entry) {
     isDraggable: entry.isDraggable,
     onDoubleClick: entry.onDoubleClick,
     selectOverride: entry.selectOverride,
-    hideSelectionMenu: entry.hideSelectionMenu
+    hideSelectionMenu: entry.hideSelectionMenu,
+    hiddenWhenLocked: entry.hiddenWhenLocked,
+    renderLocked: entry.renderLocked ? (props) => entry.renderLocked(props) : void 0
   };
 }
 const MIN_HIT_AREA_SCREEN_PX$5 = 20;
@@ -1278,8 +1325,8 @@ function Ink({
             strokeWidth: hitStrokeWidth,
             onPointerDown: onClick,
             style: {
-              cursor: isSelected ? "move" : "pointer",
-              pointerEvents: isSelected ? "none" : "visibleStroke",
+              cursor: isSelected ? "move" : onClick ? "pointer" : "default",
+              pointerEvents: !onClick ? "none" : isSelected ? "none" : "visibleStroke",
               strokeLinecap: "round",
               strokeLinejoin: "round"
             }
@@ -1371,8 +1418,8 @@ function Square({
             strokeWidth: hitStrokeWidth,
             onPointerDown: onClick,
             style: {
-              cursor: isSelected ? "move" : "pointer",
-              pointerEvents: isSelected ? "none" : color === "transparent" ? "visibleStroke" : "visible"
+              cursor: isSelected ? "move" : onClick ? "pointer" : "default",
+              pointerEvents: !onClick ? "none" : isSelected ? "none" : color === "transparent" ? "visibleStroke" : "visible"
             }
           }
         ) : /* @__PURE__ */ jsx(
@@ -1387,8 +1434,8 @@ function Square({
             strokeWidth: hitStrokeWidth,
             onPointerDown: onClick,
             style: {
-              cursor: isSelected ? "move" : "pointer",
-              pointerEvents: isSelected ? "none" : color === "transparent" ? "visibleStroke" : "visible"
+              cursor: isSelected ? "move" : onClick ? "pointer" : "default",
+              pointerEvents: !onClick ? "none" : isSelected ? "none" : color === "transparent" ? "visibleStroke" : "visible"
             }
           }
         ),
@@ -1495,8 +1542,8 @@ function Circle({
             strokeWidth: hitStrokeWidth,
             onPointerDown: onClick,
             style: {
-              cursor: isSelected ? "move" : "pointer",
-              pointerEvents: isSelected ? "none" : color === "transparent" ? "visibleStroke" : "visible"
+              cursor: isSelected ? "move" : onClick ? "pointer" : "default",
+              pointerEvents: !onClick ? "none" : isSelected ? "none" : color === "transparent" ? "visibleStroke" : "visible"
             }
           }
         ) : /* @__PURE__ */ jsx(
@@ -1511,8 +1558,8 @@ function Circle({
             strokeWidth: hitStrokeWidth,
             onPointerDown: onClick,
             style: {
-              cursor: isSelected ? "move" : "pointer",
-              pointerEvents: isSelected ? "none" : color === "transparent" ? "visibleStroke" : "visible"
+              cursor: isSelected ? "move" : onClick ? "pointer" : "default",
+              pointerEvents: !onClick ? "none" : isSelected ? "none" : color === "transparent" ? "visibleStroke" : "visible"
             }
           }
         ),
@@ -1612,8 +1659,8 @@ function Line({
             strokeWidth: hitStrokeWidth,
             onPointerDown: onClick,
             style: {
-              cursor: isSelected ? "move" : "pointer",
-              pointerEvents: isSelected ? "none" : "visibleStroke",
+              cursor: isSelected ? "move" : onClick ? "pointer" : "default",
+              pointerEvents: !onClick ? "none" : isSelected ? "none" : "visibleStroke",
               strokeLinecap: "butt"
             }
           }
@@ -1628,8 +1675,8 @@ function Line({
             strokeWidth: hitStrokeWidth,
             onPointerDown: onClick,
             style: {
-              cursor: isSelected ? "move" : "pointer",
-              pointerEvents: isSelected ? "none" : endings.start.filled ? "visible" : "visibleStroke",
+              cursor: isSelected ? "move" : onClick ? "pointer" : "default",
+              pointerEvents: !onClick ? "none" : isSelected ? "none" : endings.start.filled ? "visible" : "visibleStroke",
               strokeLinecap: "butt"
             }
           }
@@ -1644,8 +1691,8 @@ function Line({
             strokeWidth: hitStrokeWidth,
             onPointerDown: onClick,
             style: {
-              cursor: isSelected ? "move" : "pointer",
-              pointerEvents: isSelected ? "none" : endings.end.filled ? "visible" : "visibleStroke",
+              cursor: isSelected ? "move" : onClick ? "pointer" : "default",
+              pointerEvents: !onClick ? "none" : isSelected ? "none" : endings.end.filled ? "visible" : "visibleStroke",
               strokeLinecap: "butt"
             }
           }
@@ -1782,8 +1829,8 @@ function Polyline({
             strokeWidth: hitStrokeWidth,
             onPointerDown: onClick,
             style: {
-              cursor: isSelected ? "move" : "pointer",
-              pointerEvents: isSelected ? "none" : "visibleStroke",
+              cursor: isSelected ? "move" : onClick ? "pointer" : "default",
+              pointerEvents: !onClick ? "none" : isSelected ? "none" : "visibleStroke",
               strokeLinecap: "butt",
               strokeLinejoin: "miter"
             }
@@ -1799,8 +1846,8 @@ function Polyline({
             strokeWidth: hitStrokeWidth,
             onPointerDown: onClick,
             style: {
-              cursor: isSelected ? "move" : "pointer",
-              pointerEvents: isSelected ? "none" : endings.start.filled ? "visible" : "visibleStroke",
+              cursor: isSelected ? "move" : onClick ? "pointer" : "default",
+              pointerEvents: !onClick ? "none" : isSelected ? "none" : endings.start.filled ? "visible" : "visibleStroke",
               strokeLinecap: "butt"
             }
           }
@@ -1815,8 +1862,8 @@ function Polyline({
             strokeWidth: hitStrokeWidth,
             onPointerDown: onClick,
             style: {
-              cursor: isSelected ? "move" : "pointer",
-              pointerEvents: isSelected ? "none" : endings.end.filled ? "visible" : "visibleStroke",
+              cursor: isSelected ? "move" : onClick ? "pointer" : "default",
+              pointerEvents: !onClick ? "none" : isSelected ? "none" : endings.end.filled ? "visible" : "visibleStroke",
               strokeLinecap: "butt"
             }
           }
@@ -1941,8 +1988,8 @@ function Polygon({
             strokeWidth: hitStrokeWidth,
             onPointerDown: onClick,
             style: {
-              cursor: isSelected ? "move" : "pointer",
-              pointerEvents: isSelected ? "none" : color === "transparent" ? "visibleStroke" : "visible",
+              cursor: isSelected ? "move" : onClick ? "pointer" : "default",
+              pointerEvents: !onClick ? "none" : isSelected ? "none" : color === "transparent" ? "visibleStroke" : "visible",
               strokeLinecap: "butt",
               strokeLinejoin: "miter"
             }
@@ -2028,8 +2075,8 @@ function Text({
         position: "absolute",
         inset: 0,
         zIndex: 2,
-        pointerEvents: isSelected ? "none" : "auto",
-        cursor: isSelected ? "move" : "pointer"
+        pointerEvents: !onClick ? "none" : isSelected ? "none" : "auto",
+        cursor: isSelected ? "move" : onClick ? "pointer" : "default"
       },
       onPointerDown: onClick,
       children: !appearanceActive && /* @__PURE__ */ jsxs(
@@ -2078,7 +2125,10 @@ function FreeText({
   const editingRef = useRef(false);
   const { provides: annotationCapability } = useAnnotationCapability();
   const annotationProvides = (annotationCapability == null ? void 0 : annotationCapability.forDocument(documentId)) ?? null;
-  const [isIOS, setIsIOS] = useState(false);
+  const { adjustedFontPx, wrapperStyle } = useIOSZoomPrevention(
+    annotation.object.fontSize * scale,
+    isEditing
+  );
   useEffect(() => {
     var _a;
     if (isEditing && editorRef.current) {
@@ -2099,15 +2149,6 @@ function FreeText({
       }
     }
   }, [isEditing]);
-  useLayoutEffect(() => {
-    try {
-      const nav = navigator;
-      const ios = /iPad|iPhone|iPod/.test(navigator.userAgent) || navigator.platform === "MacIntel" && (nav == null ? void 0 : nav.maxTouchPoints) > 1;
-      setIsIOS(ios);
-    } catch {
-      setIsIOS(false);
-    }
-  }, []);
   const handleBlur = () => {
     if (!editingRef.current) return;
     editingRef.current = false;
@@ -2117,12 +2158,6 @@ function FreeText({
       contents: editorRef.current.innerText.replace(/\u00A0/g, " ")
     });
   };
-  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 /* @__PURE__ */ jsx(
     "div",
     {
@@ -2131,7 +2166,7 @@ function FreeText({
         width: annotation.object.rect.size.width * scale,
         height: annotation.object.rect.size.height * scale,
         cursor: isSelected && !isEditing ? "move" : "default",
-        pointerEvents: isSelected && !isEditing ? "none" : "auto",
+        pointerEvents: !onClick ? "none" : isSelected && !isEditing ? "none" : "auto",
         zIndex: 2,
         opacity: appearanceActive ? 0 : 1
       },
@@ -2152,14 +2187,13 @@ 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" : "pointer",
+            cursor: isEditing ? "text" : onClick ? "pointer" : "default",
             outline: "none",
-            transform: needsComp ? `scale(${scaleComp})` : void 0,
-            transformOrigin: "top left"
+            ...wrapperStyle
           },
           contentEditable: isEditing,
           ...suppressContentEditableWarningProps,
@@ -2258,8 +2292,8 @@ function Stamp({
         width: "100%",
         height: "100%",
         zIndex: 2,
-        pointerEvents: isSelected ? "none" : "auto",
-        cursor: "pointer"
+        pointerEvents: !onClick ? "none" : isSelected ? "none" : "auto",
+        cursor: onClick ? "pointer" : "default"
       },
       onPointerDown: onClick,
       children: /* @__PURE__ */ jsx(
@@ -2325,8 +2359,8 @@ function Link({
             fill: "transparent",
             onPointerDown: hasIRT ? void 0 : onClick,
             style: {
-              cursor: hasIRT ? "default" : isSelected ? "move" : "pointer",
-              pointerEvents: hasIRT ? "none" : isSelected ? "none" : "visible"
+              cursor: hasIRT || !onClick ? "default" : isSelected ? "move" : "pointer",
+              pointerEvents: hasIRT || !onClick ? "none" : isSelected ? "none" : "visible"
             }
           }
         ),
@@ -2599,8 +2633,8 @@ function Caret({
             strokeWidth: 4,
             onPointerDown: onClick,
             style: {
-              cursor: isSelected ? "move" : "pointer",
-              pointerEvents: isSelected ? "none" : "visible"
+              cursor: isSelected ? "move" : onClick ? "pointer" : "default",
+              pointerEvents: !onClick ? "none" : isSelected ? "none" : "visible"
             }
           }
         ),
@@ -2620,6 +2654,29 @@ function Caret({
     }
   );
 }
+function LinkLockedMode({
+  annotation,
+  documentId
+}) {
+  const { provides } = useAnnotationCapability();
+  const handleClick = useCallback(() => {
+    const target = annotation.object.target;
+    if (!target || !provides) return;
+    provides.forDocument(documentId).navigateTarget(target);
+  }, [annotation.object.target, provides, documentId]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      onClick: handleClick,
+      style: {
+        width: "100%",
+        height: "100%",
+        cursor: "pointer",
+        pointerEvents: "auto"
+      }
+    }
+  );
+}
 const builtInRenderers = [
   // --- Drawing ---
   createRenderer({
@@ -2886,9 +2943,24 @@ const builtInRenderers = [
         hasIRT: !!currentObject.inReplyToId
       }
     ),
+    renderPreview: ({ data, bounds, scale }) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          left: 0,
+          top: 0,
+          width: bounds.size.width * scale,
+          height: bounds.size.height * scale,
+          borderBottom: `${data.strokeWidth * scale}px solid ${data.strokeColor}`,
+          backgroundColor: "rgba(0, 0, 255, 0.05)",
+          boxSizing: "border-box"
+        }
+      }
+    ),
     interactionDefaults: {
-      isDraggable: false,
-      isResizable: false,
+      isDraggable: true,
+      isResizable: true,
       isRotatable: false
     },
     useAppearanceStream: false,
@@ -2906,7 +2978,8 @@ const builtInRenderers = [
       }
       helpers.selectAnnotation(helpers.pageIndex, annotation.object.id);
     },
-    hideSelectionMenu: (a) => !!a.inReplyToId
+    hideSelectionMenu: (a) => !!a.inReplyToId,
+    renderLocked: (props) => /* @__PURE__ */ jsx(LinkLockedMode, { ...props })
   })
 ];
 function Annotations(annotationsProps) {
@@ -2918,6 +2991,7 @@ function Annotations(annotationsProps) {
   const [allSelectedIds, setAllSelectedIds] = useState([]);
   const [editingId, setEditingId] = useState(null);
   const [appearanceMap, setAppearanceMap] = useState({});
+  const [lockedMode, setLockedMode] = useState({ type: LockModeType.None });
   const prevScaleRef = useRef(scale);
   const annotationProvides = useMemo(
     () => annotationCapability ? annotationCapability.forDocument(documentId) : null,
@@ -2929,9 +3003,11 @@ function Annotations(annotationsProps) {
       const currentState = annotationProvides.getState();
       setAnnotations(getAnnotationsByPageIndex(currentState, pageIndex));
       setAllSelectedIds(getSelectedAnnotationIds(currentState));
+      setLockedMode(currentState.locked);
       return annotationProvides.onStateChange((state) => {
         setAnnotations(getAnnotationsByPageIndex(state, pageIndex));
         setAllSelectedIds(getSelectedAnnotationIds(state));
+        setLockedMode(state.locked);
       });
     }
   }, [annotationProvides, pageIndex]);
@@ -3105,27 +3181,35 @@ function Annotations(annotationsProps) {
       var _a, _b, _c;
       const renderer = resolveRenderer(annotation);
       if (!renderer) return null;
-      const tool = annotationProvides == null ? void 0 : annotationProvides.findToolForAnnotation(annotation.object);
-      const isSelected = allSelectedIds.includes(annotation.object.id);
-      const isEditing = editingId === annotation.object.id;
+      const tool = (annotationProvides == null ? void 0 : annotationProvides.findToolForAnnotation(annotation.object)) ?? null;
+      const categories = getAnnotationCategories(tool);
+      const locked = hasLockedFlag(annotation.object) || isCategoryLocked(categories, lockedMode);
+      if (locked && renderer.hiddenWhenLocked) return null;
+      const hasRenderLocked = locked && !!renderer.renderLocked;
+      const isSelected = locked ? false : allSelectedIds.includes(annotation.object.id);
+      const isEditing = locked ? false : editingId === annotation.object.id;
       const defaults = renderer.interactionDefaults;
       const resolvedDraggable = resolveInteractionProp(
         tool == null ? void 0 : tool.interaction.isDraggable,
         annotation.object,
         (defaults == null ? void 0 : defaults.isDraggable) ?? true
       );
-      const finalDraggable = renderer.isDraggable ? renderer.isDraggable(resolvedDraggable, { isEditing }) : resolvedDraggable;
+      const finalDraggable = locked ? false : renderer.isDraggable ? renderer.isDraggable(resolvedDraggable, { isEditing }) : resolvedDraggable;
       const useAP = ((_a = tool == null ? void 0 : tool.behavior) == null ? void 0 : _a.useAppearanceStream) ?? renderer.useAppearanceStream ?? true;
-      const onSelect = renderer.selectOverride ? (e) => renderer.selectOverride(e, annotation, selectHelpers) : (e) => handleClick(e, annotation);
+      const appearance = hasRenderLocked ? void 0 : useAP ? getAppearanceForAnnotation(annotation) : void 0;
+      const noopSelect = (e) => {
+        e.stopPropagation();
+      };
+      const onSelect = locked ? noopSelect : renderer.selectOverride ? (e) => renderer.selectOverride(e, annotation, selectHelpers) : (e) => handleClick(e, annotation);
       return /* @__PURE__ */ jsx(
         AnnotationContainer,
         {
           trackedAnnotation: annotation,
           isSelected,
           isEditing,
-          isMultiSelected,
+          isMultiSelected: locked ? false : isMultiSelected,
           isDraggable: finalDraggable,
-          isResizable: resolveInteractionProp(
+          isResizable: locked ? false : resolveInteractionProp(
             tool == null ? void 0 : tool.interaction.isResizable,
             annotation.object,
             (defaults == null ? void 0 : defaults.isResizable) ?? false
@@ -3135,15 +3219,15 @@ function Annotations(annotationsProps) {
             annotation.object,
             (defaults == null ? void 0 : defaults.lockAspectRatio) ?? false
           ),
-          isRotatable: resolveInteractionProp(
+          isRotatable: locked ? false : resolveInteractionProp(
             tool == null ? void 0 : tool.interaction.isRotatable,
             annotation.object,
             (defaults == null ? void 0 : defaults.isRotatable) ?? false
           ),
-          vertexConfig: renderer.vertexConfig,
-          selectionMenu: ((_b = renderer.hideSelectionMenu) == null ? void 0 : _b.call(renderer, annotation.object)) ? void 0 : selectionMenu,
+          vertexConfig: locked ? void 0 : renderer.vertexConfig,
+          selectionMenu: locked ? void 0 : ((_b = renderer.hideSelectionMenu) == null ? void 0 : _b.call(renderer, annotation.object)) ? void 0 : selectionMenu,
           onSelect,
-          onDoubleClick: renderer.onDoubleClick ? (e) => {
+          onDoubleClick: locked ? void 0 : renderer.onDoubleClick ? (e) => {
             e.stopPropagation();
             renderer.onDoubleClick(annotation.object.id, setEditingId);
           } : void 0,
@@ -3152,19 +3236,34 @@ function Annotations(annotationsProps) {
             annotation.object.blendMode ?? renderer.defaultBlendMode ?? PdfBlendMode.Normal
           ),
           style: (_c = renderer.containerStyle) == null ? void 0 : _c.call(renderer, annotation.object),
-          appearance: useAP ? getAppearanceForAnnotation(annotation) : void 0,
+          appearance,
           ...annotationsProps,
-          children: (currentObject, { appearanceActive }) => renderer.render({
-            annotation,
-            currentObject,
-            isSelected,
-            isEditing,
-            scale,
-            pageIndex,
-            documentId,
-            onClick: onSelect,
-            appearanceActive
-          })
+          children: (currentObject, { appearanceActive }) => {
+            if (hasRenderLocked) {
+              return renderer.renderLocked({
+                annotation,
+                currentObject,
+                isSelected: false,
+                isEditing: false,
+                scale,
+                pageIndex,
+                documentId,
+                onClick: void 0,
+                appearanceActive
+              });
+            }
+            return renderer.render({
+              annotation,
+              currentObject,
+              isSelected,
+              isEditing,
+              scale,
+              pageIndex,
+              documentId,
+              onClick: locked ? void 0 : onSelect,
+              appearanceActive
+            });
+          }
         },
         annotation.object.id
       );
@@ -3304,8 +3403,9 @@ function TextMarkup({ documentId, pageIndex, scale }) {
       return null;
   }
 }
-function PreviewRenderer({ preview, scale }) {
+function PreviewRenderer({ toolId, preview, scale }) {
   const { bounds } = preview;
+  const registeredRenderers = useRegisteredRenderers();
   const style = {
     position: "absolute",
     left: bounds.origin.x * scale,
@@ -3355,6 +3455,10 @@ function PreviewRenderer({ preview, scale }) {
       }
     ) });
   }
+  const match = registeredRenderers.find((r) => r.id === toolId && r.renderPreview);
+  if (match == null ? void 0 : match.renderPreview) {
+    return /* @__PURE__ */ jsx("div", { style, children: match.renderPreview({ data: preview.data, bounds: preview.bounds, scale }) });
+  }
   return null;
 }
 function AnnotationPaintLayer({ documentId, pageIndex, scale }) {
@@ -3424,7 +3528,7 @@ function AnnotationPaintLayer({ documentId, pageIndex, scale }) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("input", { ref: fileInputRef, type: "file", style: { display: "none" } }),
     /* @__PURE__ */ jsx("canvas", { ref: canvasRef, style: { display: "none" } }),
-    Array.from(previews.entries()).map(([toolId, preview]) => /* @__PURE__ */ jsx(PreviewRenderer, { preview, scale }, toolId))
+    Array.from(previews.entries()).map(([toolId, preview]) => /* @__PURE__ */ jsx(PreviewRenderer, { toolId, preview, scale }, toolId))
   ] });
 }
 function AnnotationLayer({
@@ -3505,7 +3609,7 @@ function AnnotationLayer({
     }
   );
 }
-const AnnotationPluginPackage = createPluginPackage(AnnotationPluginPackage$1).addWrapper(AnnotationRendererProvider).build();
+const AnnotationPluginPackage = createPluginPackage(AnnotationPluginPackage$1).addWrapper(AnnotationRendererProvider).addUtility(AnnotationNavigationHandler).build();
 export {
   AnnotationLayer,
   AnnotationPluginPackage,
@@ -3515,6 +3619,7 @@ export {
   useAnnotation,
   useAnnotationCapability,
   useAnnotationPlugin,
+  useIOSZoomPrevention,
   useRegisterRenderers,
   useRegisteredRenderers,
   useRendererRegistry