@anaralabs/lector 3.5.6 → 3.5.8

package/dist/_tsup-dts-rollup.d.ts

@@ -46,10 +46,7 @@ export declare const AnnotationHighlightLayer: ({ className, style, renderToolti
 declare interface AnnotationHighlightLayerProps {
     className?: string;
     style?: React.CSSProperties;
-    renderTooltipContent: (props: {
-        annotation: Annotation;
-        onClose: () => void;
-    }) => React.ReactNode;
+    renderTooltipContent: (props: AnnotationTooltipContentProps) => React.ReactNode;
     renderHoverTooltipContent: (props: {
         annotation: Annotation;
         onClose: () => void;
@@ -100,12 +97,18 @@ declare interface AnnotationState {
     setAnnotations: (annotations: Annotation[]) => void;
 }
 
-export declare const AnnotationTooltip: ({ annotation, children, tooltipContent, hoverTooltipContent, onOpenChange, className, hoverClassName, isOpen: controlledIsOpen, tooltipBubbleSize, hoverIsOpen: controlledHoverIsOpen, }: AnnotationTooltipProps) => JSX.Element;
+export declare const AnnotationTooltip: ({ annotation, children, renderTooltipContent, hoverTooltipContent, onOpenChange, className, hoverClassName, isOpen: controlledIsOpen, tooltipBubbleSize, hoverIsOpen: controlledHoverIsOpen, }: AnnotationTooltipProps) => JSX.Element;
+
+export declare type AnnotationTooltipContentProps = {
+    annotation: Annotation;
+    onClose: () => void;
+    setPosition?: (position: 'top' | 'bottom' | undefined) => void;
+};
 
 declare interface AnnotationTooltipProps {
     annotation: Annotation;
     children: React.ReactNode;
-    tooltipContent: React.ReactNode;
+    renderTooltipContent: (props: AnnotationTooltipContentProps) => React.ReactNode;
     hoverTooltipContent?: React.ReactNode;
     onOpenChange?: (open: boolean) => void;
     isOpen?: boolean;
@@ -384,12 +387,13 @@ declare const useAnnotations: UseBoundStore<StoreApi<AnnotationState>>;
 export { useAnnotations }
 export { useAnnotations as useAnnotations_alias_1 }
 
-export declare const useAnnotationTooltip: ({ annotation, onOpenChange, position, }: UseAnnotationTooltipProps) => UseAnnotationTooltipReturn;
+export declare const useAnnotationTooltip: ({ annotation, onOpenChange, position, isOpen: controlledIsOpen, }: UseAnnotationTooltipProps) => UseAnnotationTooltipReturn;
 
 declare interface UseAnnotationTooltipProps {
     annotation: Annotation;
     onOpenChange?: (open: boolean) => void;
     position?: "top" | "bottom" | "left" | "right";
+    isOpen?: boolean;
 }
 
 declare interface UseAnnotationTooltipReturn {

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+export { AnnotationTooltipContentProps } from './_tsup-dts-rollup.js';
 export { AnnotationTooltip } from './_tsup-dts-rollup.js';
 export { AnnotationHighlightLayer } from './_tsup-dts-rollup.js';
 export { AnnotationLayer } from './_tsup-dts-rollup.js';

package/dist/index.js

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { createContext, forwardRef, useRef, useCallback, useContext, useState, useEffect, cloneElement, createRef, useLayoutEffect } from 'react';
+import React, { createContext, forwardRef, useRef, useState, useCallback, useContext, useEffect, cloneElement, createRef, useLayoutEffect } from 'react';
 import { createPortal } from 'react-dom';
 import { useFloating, autoUpdate, offset, shift, useDismiss, useInteractions, inline, flip } from '@floating-ui/react';
 import { useVirtualizer, elementScroll, debounce } from '@tanstack/react-virtual';
@@ -134,32 +134,25 @@ var PDFStore = createZustandContext(
 var usePdf = (selector) => useStore(PDFStore.useContext(), selector);
 
 // src/hooks/useAnnotationTooltip.ts
-var defaultRect = {
-  width: 0,
-  height: 0,
-  x: 0,
-  y: 0,
-  top: 0,
-  right: 0,
-  bottom: 0,
-  left: 0
-};
 var useAnnotationTooltip = ({
   annotation,
   onOpenChange,
-  position = "top"
+  position = "top",
+  isOpen: controlledIsOpen
 }) => {
   const isNewAnnotation = Date.now() - new Date(annotation.createdAt).getTime() < 1e3;
-  const [isOpen, setIsOpen] = useState(isNewAnnotation);
+  const [isPositionCalculated, setIsPositionCalculated] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
   const viewportRef = usePdf((state) => state.viewportRef);
   const scale = usePdf((state) => state.zoom);
+  const effectiveIsOpen = (isOpen && isPositionCalculated || controlledIsOpen) ?? false;
   const {
     refs,
     floatingStyles,
     context
   } = useFloating({
     placement: position,
-    open: isOpen,
+    open: effectiveIsOpen,
     onOpenChange: (open) => {
       setIsOpen(open);
       onOpenChange?.(open);
@@ -178,18 +171,27 @@ var useAnnotationTooltip = ({
   const dismiss = useDismiss(context);
   const { getReferenceProps, getFloatingProps } = useInteractions([dismiss]);
   const updateTooltipPosition = useCallback(() => {
-    if (!annotation.highlights.length) return;
+    if (!annotation.highlights.length) {
+      setIsPositionCalculated(false);
+      return;
+    }
     const highlightRects = annotation.highlights;
     let minLeft = Infinity;
     let maxRight = -Infinity;
     let minTop = Infinity;
     let maxBottom = -Infinity;
+    const viewportElement = viewportRef.current;
+    if (!viewportElement) {
+      setIsPositionCalculated(false);
+      return;
+    }
+    const pageElement = viewportElement.querySelector(`[data-page-number="${annotation.pageNumber}"]`);
+    if (!pageElement) {
+      setIsPositionCalculated(false);
+      return;
+    }
     refs.setReference({
       getBoundingClientRect() {
-        const viewportElement = viewportRef.current;
-        if (!viewportElement) return defaultRect;
-        const pageElement = viewportElement.querySelector(`[data-page-number="${annotation.pageNumber}"]`);
-        if (!pageElement) return defaultRect;
         const pageRect = pageElement.getBoundingClientRect();
         highlightRects.forEach((highlight) => {
           const scaledLeft = highlight.left * scale;
@@ -226,10 +228,17 @@ var useAnnotationTooltip = ({
       },
       contextElement: viewportRef.current || void 0
     });
-  }, [annotation.highlights, annotation.pageNumber, refs, viewportRef, scale]);
+    setIsPositionCalculated(true);
+    if (isNewAnnotation) {
+      setIsOpen(true);
+    }
+  }, [annotation.highlights, annotation.pageNumber, refs, viewportRef, scale, isNewAnnotation]);
   useEffect(() => {
     const viewport = viewportRef.current;
-    updateTooltipPosition();
+    setIsPositionCalculated(false);
+    requestAnimationFrame(() => {
+      updateTooltipPosition();
+    });
     const handleScroll = () => {
       requestAnimationFrame(updateTooltipPosition);
     };
@@ -248,9 +257,9 @@ var useAnnotationTooltip = ({
       }
       window.removeEventListener("resize", handleResize);
     };
-  }, [updateTooltipPosition, viewportRef]);
+  }, [updateTooltipPosition, viewportRef, scale, controlledIsOpen]);
   return {
-    isOpen,
+    isOpen: effectiveIsOpen,
     setIsOpen,
     refs,
     floatingStyles,
@@ -261,7 +270,7 @@ var useAnnotationTooltip = ({
 var AnnotationTooltip = ({
   annotation,
   children,
-  tooltipContent,
+  renderTooltipContent,
   hoverTooltipContent,
   onOpenChange,
   className,
@@ -273,6 +282,7 @@ var AnnotationTooltip = ({
   const viewportRef = usePdf((state) => state.viewportRef);
   const closeTimeoutRef = useRef(null);
   const isMouseInTooltipRef = useRef(false);
+  const [triggeredPosition, setTriggeredPosition] = useState();
   const {
     isOpen: uncontrolledIsOpen,
     setIsOpen,
@@ -282,7 +292,9 @@ var AnnotationTooltip = ({
     getReferenceProps
   } = useAnnotationTooltip({
     annotation,
-    onOpenChange
+    onOpenChange,
+    position: triggeredPosition,
+    isOpen: controlledIsOpen
   });
   const {
     isOpen: uncontrolledHoverIsOpen,
@@ -293,7 +305,8 @@ var AnnotationTooltip = ({
     getReferenceProps: getHoverReferenceProps
   } = useAnnotationTooltip({
     position: "bottom",
-    annotation
+    annotation,
+    isOpen: controlledHoverIsOpen
   });
   const isOpen = controlledIsOpen ?? uncontrolledIsOpen;
   const hoverIsOpen = controlledHoverIsOpen || uncontrolledHoverIsOpen;
@@ -372,7 +385,11 @@ var AnnotationTooltip = ({
             zIndex: 50
           },
           ...getFloatingProps(),
-          children: tooltipContent
+          children: renderTooltipContent({
+            annotation,
+            onClose: () => setIsOpen(false),
+            setPosition: (position) => setTriggeredPosition(position)
+          })
         }
       ),
       viewportRef.current
@@ -457,11 +474,7 @@ var AnnotationHighlightLayer = ({
           onAnnotationClick(annotation);
         }
       },
-      tooltipContent: renderTooltipContent({
-        annotation,
-        onClose: () => {
-        }
-      }),
+      renderTooltipContent,
       hoverTooltipContent: renderHoverTooltipContent({
         annotation,
         onClose: () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anaralabs/lector",
-  "version": "3.5.6",
+  "version": "3.5.8",
   "description": "Headless PDF viewer for React",
   "author": "andrewdr (https://github.com/andrewdoro)",
   "license": "MIT",