@anaralabs/lector 3.5.3 → 3.5.4

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

@@ -40,7 +40,7 @@ declare interface Annotation {
 export { Annotation }
 export { Annotation as Annotation_alias_1 }
 
-export declare const AnnotationHighlightLayer: ({ className, style, renderTooltipContent, tooltipClassName, focusedAnnotationId, onAnnotationClick, }: AnnotationHighlightLayerProps) => JSX.Element;
+export declare const AnnotationHighlightLayer: ({ className, style, renderTooltipContent, renderHoverTooltipContent, tooltipClassName, focusedAnnotationId, onAnnotationClick, hoverTooltipClassName }: AnnotationHighlightLayerProps) => JSX.Element;
 
 declare interface AnnotationHighlightLayerProps {
     className?: string;
@@ -49,9 +49,14 @@ declare interface AnnotationHighlightLayerProps {
         annotation: Annotation;
         onClose: () => void;
     }) => React.ReactNode;
+    renderHoverTooltipContent: (props: {
+        annotation: Annotation;
+        onClose: () => void;
+    }) => React.ReactNode;
     focusedAnnotationId?: string;
     onAnnotationClick?: (annotation: Annotation) => void;
     tooltipClassName?: string;
+    hoverTooltipClassName?: string;
 }
 
 /**
@@ -91,15 +96,21 @@ declare interface AnnotationState {
     setAnnotations: (annotations: Annotation[]) => void;
 }
 
-export declare const AnnotationTooltip: ({ annotation, children, tooltipContent, onOpenChange, className, isOpen: controlledIsOpen, }: AnnotationTooltipProps) => JSX.Element;
+export declare const AnnotationTooltip: ({ annotation, children, tooltipContent, hoverTooltipContent, onOpenChange, className, hoverClassName, isOpen: controlledIsOpen, }: AnnotationTooltipProps) => JSX.Element;
 
 declare interface AnnotationTooltipProps {
     annotation: Annotation;
     children: React.ReactNode;
     tooltipContent: React.ReactNode;
+    hoverTooltipContent?: React.ReactNode;
     onOpenChange?: (open: boolean) => void;
     isOpen?: boolean;
     className?: string;
+    hoverClassName?: string;
+    renderHoverTooltipContent?: (props: {
+        annotation: Annotation;
+        onClose: () => void;
+    }) => React.ReactNode;
 }
 
 /**

package/dist/index.js

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { createContext, forwardRef, useCallback, useContext, useState, useRef, useEffect, cloneElement, createRef, useLayoutEffect } from 'react';
+import React, { createContext, forwardRef, useRef, useCallback, useContext, useState, 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';
@@ -261,11 +261,15 @@ var AnnotationTooltip = ({
   annotation,
   children,
   tooltipContent,
+  hoverTooltipContent,
   onOpenChange,
   className,
+  hoverClassName,
   isOpen: controlledIsOpen
 }) => {
   const viewportRef = usePdf((state) => state.viewportRef);
+  const closeTimeoutRef = useRef(null);
+  const isMouseInTooltipRef = useRef(false);
   const {
     isOpen: uncontrolledIsOpen,
     setIsOpen,
@@ -277,19 +281,64 @@ var AnnotationTooltip = ({
     annotation,
     onOpenChange
   });
+  const {
+    isOpen: hoverIsOpen,
+    setIsOpen: setHoverIsOpen,
+    refs: hoverRefs,
+    floatingStyles: hoverFloatingStyles,
+    getFloatingProps: getHoverFloatingProps,
+    getReferenceProps: getHoverReferenceProps
+  } = useAnnotationTooltip({
+    annotation
+  });
   const isOpen = controlledIsOpen ?? uncontrolledIsOpen;
   const handleClick = useCallback(() => {
     if (controlledIsOpen === void 0) {
       setIsOpen(!isOpen);
     }
   }, [controlledIsOpen, isOpen, setIsOpen]);
+  const handleMouseEnter = useCallback(() => {
+    if (hoverTooltipContent) {
+      if (closeTimeoutRef.current) {
+        clearTimeout(closeTimeoutRef.current);
+        closeTimeoutRef.current = null;
+      }
+      setHoverIsOpen(true);
+    }
+  }, [hoverTooltipContent, setHoverIsOpen]);
+  const closeTooltip = useCallback(() => {
+    if (!isMouseInTooltipRef.current) {
+      setHoverIsOpen(false);
+    }
+  }, [setHoverIsOpen]);
+  const handleMouseLeave = useCallback(() => {
+    if (!hoverTooltipContent) return;
+    closeTimeoutRef.current = setTimeout(closeTooltip, 100);
+  }, [hoverTooltipContent, closeTooltip]);
+  const handleTooltipMouseEnter = useCallback(() => {
+    isMouseInTooltipRef.current = true;
+    if (closeTimeoutRef.current) {
+      clearTimeout(closeTimeoutRef.current);
+      closeTimeoutRef.current = null;
+    }
+  }, []);
+  const handleTooltipMouseLeave = useCallback(() => {
+    isMouseInTooltipRef.current = false;
+    setHoverIsOpen(false);
+  }, [setHoverIsOpen]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       "div",
       {
-        ref: refs.setReference,
+        ref: (node) => {
+          refs.setReference(node);
+          hoverRefs.setReference(node);
+        },
         onClick: handleClick,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
         ...getReferenceProps(),
+        ...getHoverReferenceProps(),
         children
       }
     ),
@@ -299,16 +348,39 @@ var AnnotationTooltip = ({
         {
           ref: refs.setFloating,
           className,
+          "data-annotation-tooltip": "click",
           style: {
             ...floatingStyles,
             position: "absolute",
-            pointerEvents: "auto"
+            pointerEvents: "auto",
+            zIndex: 50
           },
           ...getFloatingProps(),
           children: tooltipContent
         }
       ),
       viewportRef.current
+    ),
+    !isOpen && hoverIsOpen && annotation.comment && hoverTooltipContent && viewportRef.current && createPortal(
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: hoverRefs.setFloating,
+          className: hoverClassName,
+          "data-annotation-tooltip": "hover",
+          style: {
+            ...hoverFloatingStyles,
+            position: "absolute",
+            pointerEvents: "auto",
+            zIndex: 51
+          },
+          onMouseEnter: handleTooltipMouseEnter,
+          onMouseLeave: handleTooltipMouseLeave,
+          ...getHoverFloatingProps(),
+          children: hoverTooltipContent
+        }
+      ),
+      viewportRef.current
     )
   ] });
 };
@@ -341,9 +413,11 @@ var AnnotationHighlightLayer = ({
   className,
   style,
   renderTooltipContent,
+  renderHoverTooltipContent,
   tooltipClassName,
   focusedAnnotationId,
-  onAnnotationClick
+  onAnnotationClick,
+  hoverTooltipClassName
 }) => {
   const { annotations } = useAnnotations();
   const pageNumber = usePDFPageNumber();
@@ -355,6 +429,7 @@ var AnnotationHighlightLayer = ({
     {
       annotation,
       className: tooltipClassName,
+      hoverClassName: hoverTooltipClassName,
       isOpen: focusedAnnotationId === annotation.id,
       onOpenChange: (open) => {
         if (open && onAnnotationClick) {
@@ -366,6 +441,11 @@ var AnnotationHighlightLayer = ({
         onClose: () => {
         }
       }),
+      hoverTooltipContent: renderHoverTooltipContent({
+        annotation,
+        onClose: () => {
+        }
+      }),
       children: /* @__PURE__ */ jsx(
         "div",
         {
@@ -1072,7 +1152,27 @@ var SelectionTooltip = ({ children }) => {
     const handleSelectionChange = () => {
       const selection = document.getSelection();
       if (selection && viewportRef.current?.contains(selection.anchorNode)) {
-        requestAnimationFrame(updateTooltipPosition);
+        const anchorNode = selection.anchorNode;
+        const focusNode = selection.focusNode;
+        const isInUnselectableArea = (node) => {
+          if (!node) return false;
+          let element = node.nodeType === Node.ELEMENT_NODE ? node : node.parentElement;
+          while (element) {
+            if (element.getAttribute("data-annotation-tooltip")) {
+              return true;
+            }
+            if (element.hasAttribute("data-floating-ui-portal")) {
+              return true;
+            }
+            element = element.parentElement;
+          }
+          return false;
+        };
+        if (!isInUnselectableArea(anchorNode) && !isInUnselectableArea(focusNode)) {
+          requestAnimationFrame(updateTooltipPosition);
+        } else {
+          setIsOpen(false);
+        }
       } else {
         setIsOpen(false);
       }

package/package.json

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