@anaralabs/lector 3.5.3 → 3.5.5

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, highlightClassName, focusedAnnotationId, focusedHoverAnnotationId, onAnnotationClick, hoverTooltipClassName }: AnnotationHighlightLayerProps) => JSX.Element;
 
 declare interface AnnotationHighlightLayerProps {
     className?: string;
@@ -49,9 +49,16 @@ declare interface AnnotationHighlightLayerProps {
         annotation: Annotation;
         onClose: () => void;
     }) => React.ReactNode;
+    renderHoverTooltipContent: (props: {
+        annotation: Annotation;
+        onClose: () => void;
+    }) => React.ReactNode;
     focusedAnnotationId?: string;
+    focusedHoverAnnotationId?: string;
     onAnnotationClick?: (annotation: Annotation) => void;
     tooltipClassName?: string;
+    hoverTooltipClassName?: string;
+    highlightClassName?: string;
 }
 
 /**
@@ -91,15 +98,22 @@ 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, hoverIsOpen: controlledHoverIsOpen, }: 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;
+    hoverIsOpen?: boolean;
+    renderHoverTooltipContent?: (props: {
+        annotation: Annotation;
+        onClose: () => void;
+    }) => React.ReactNode;
 }
 
 /**
@@ -367,11 +381,12 @@ declare const useAnnotations: UseBoundStore<StoreApi<AnnotationState>>;
 export { useAnnotations }
 export { useAnnotations as useAnnotations_alias_1 }
 
-export declare const useAnnotationTooltip: ({ annotation, onOpenChange, }: UseAnnotationTooltipProps) => UseAnnotationTooltipReturn;
+export declare const useAnnotationTooltip: ({ annotation, onOpenChange, position, }: UseAnnotationTooltipProps) => UseAnnotationTooltipReturn;
 
 declare interface UseAnnotationTooltipProps {
     annotation: Annotation;
     onOpenChange?: (open: boolean) => void;
+    position?: "top" | "bottom" | "left" | "right";
 }
 
 declare interface UseAnnotationTooltipReturn {

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';
@@ -146,7 +146,8 @@ var defaultRect = {
 };
 var useAnnotationTooltip = ({
   annotation,
-  onOpenChange
+  onOpenChange,
+  position = "top"
 }) => {
   const isNewAnnotation = Date.now() - new Date(annotation.createdAt).getTime() < 1e3;
   const [isOpen, setIsOpen] = useState(isNewAnnotation);
@@ -157,7 +158,7 @@ var useAnnotationTooltip = ({
     floatingStyles,
     context
   } = useFloating({
-    placement: "top",
+    placement: position,
     open: isOpen,
     onOpenChange: (open) => {
       setIsOpen(open);
@@ -261,11 +262,16 @@ var AnnotationTooltip = ({
   annotation,
   children,
   tooltipContent,
+  hoverTooltipContent,
   onOpenChange,
   className,
-  isOpen: controlledIsOpen
+  hoverClassName,
+  isOpen: controlledIsOpen,
+  hoverIsOpen: controlledHoverIsOpen
 }) => {
   const viewportRef = usePdf((state) => state.viewportRef);
+  const closeTimeoutRef = useRef(null);
+  const isMouseInTooltipRef = useRef(false);
   const {
     isOpen: uncontrolledIsOpen,
     setIsOpen,
@@ -277,19 +283,66 @@ var AnnotationTooltip = ({
     annotation,
     onOpenChange
   });
+  const {
+    isOpen: uncontrolledHoverIsOpen,
+    setIsOpen: setHoverIsOpen,
+    refs: hoverRefs,
+    floatingStyles: hoverFloatingStyles,
+    getFloatingProps: getHoverFloatingProps,
+    getReferenceProps: getHoverReferenceProps
+  } = useAnnotationTooltip({
+    position: "bottom",
+    annotation
+  });
   const isOpen = controlledIsOpen ?? uncontrolledIsOpen;
+  const hoverIsOpen = controlledHoverIsOpen || uncontrolledHoverIsOpen;
   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 +352,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 +417,13 @@ var AnnotationHighlightLayer = ({
   className,
   style,
   renderTooltipContent,
+  renderHoverTooltipContent,
   tooltipClassName,
+  highlightClassName,
   focusedAnnotationId,
-  onAnnotationClick
+  focusedHoverAnnotationId,
+  onAnnotationClick,
+  hoverTooltipClassName
 }) => {
   const { annotations } = useAnnotations();
   const pageNumber = usePDFPageNumber();
@@ -355,7 +435,9 @@ var AnnotationHighlightLayer = ({
     {
       annotation,
       className: tooltipClassName,
+      hoverClassName: hoverTooltipClassName,
       isOpen: focusedAnnotationId === annotation.id,
+      hoverIsOpen: focusedHoverAnnotationId === annotation.id,
       onOpenChange: (open) => {
         if (open && onAnnotationClick) {
           onAnnotationClick(annotation);
@@ -366,6 +448,11 @@ var AnnotationHighlightLayer = ({
         onClose: () => {
         }
       }),
+      hoverTooltipContent: renderHoverTooltipContent({
+        annotation,
+        onClose: () => {
+        }
+      }),
       children: /* @__PURE__ */ jsx(
         "div",
         {
@@ -374,16 +461,14 @@ var AnnotationHighlightLayer = ({
           children: annotation.highlights.map((highlight, index) => /* @__PURE__ */ jsx(
             "div",
             {
+              className: highlightClassName,
               style: {
                 position: "absolute",
                 top: highlight.top,
                 left: highlight.left,
                 width: highlight.width,
                 height: highlight.height,
-                backgroundColor: annotation.color || "rgba(255, 255, 0, 0.3)",
-                mixBlendMode: "multiply",
-                transition: "all 0.2s ease",
-                cursor: "pointer"
+                backgroundColor: annotation.color
               },
               "data-highlight-id": annotation.id
             },
@@ -1072,7 +1157,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.5",
   "description": "Headless PDF viewer for React",
   "author": "andrewdr (https://github.com/andrewdoro)",
   "license": "MIT",