@anaralabs/lector 3.5.2 → 3.5.4

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

@@ -31,15 +31,16 @@ declare interface Annotation {
         width: number;
         pageNumber: number;
     }>;
-    comment?: string;
-    color?: string;
+    color: string;
     createdAt: Date;
     updatedAt: Date;
+    comment?: string;
+    metadata?: Record<string, unknown>;
 }
 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;
@@ -48,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;
 }
 
 /**
@@ -84,21 +90,27 @@ declare interface AnnotationLayerParams {
 
 declare interface AnnotationState {
     annotations: Annotation[];
-    addAnnotation: (annotation: Omit<Annotation, "id" | "createdAt" | "updatedAt">) => void;
+    addAnnotation: (annotation: Annotation) => void;
     updateAnnotation: (id: string, updates: Partial<Annotation>) => void;
     deleteAnnotation: (id: string) => void;
     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,14 +1,14 @@
 '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';
 import { create, useStore, createStore } from 'zustand';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import { v4 } from 'uuid';
 import { AnnotationLayer, TextLayer, getDocument } from 'pdfjs-dist';
 import { useDebounce } from 'use-debounce';
+import { v4 } from 'uuid';
 import { Slot } from '@radix-ui/react-slot';
 
 // src/components/annotation-tooltip.tsx
@@ -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
     )
   ] });
 };
@@ -317,20 +389,14 @@ var useAnnotations = create((set) => ({
   addAnnotation: (annotation) => set((state) => ({
     annotations: [
       ...state.annotations,
-      {
-        ...annotation,
-        id: v4(),
-        createdAt: /* @__PURE__ */ new Date(),
-        updatedAt: /* @__PURE__ */ new Date()
-      }
+      annotation
     ]
   })),
   updateAnnotation: (id, updates) => set((state) => ({
     annotations: state.annotations.map(
       (annotation) => annotation.id === id ? {
         ...annotation,
-        ...updates,
-        updatedAt: /* @__PURE__ */ new Date()
+        ...updates
       } : annotation
     )
   })),
@@ -347,9 +413,11 @@ var AnnotationHighlightLayer = ({
   className,
   style,
   renderTooltipContent,
+  renderHoverTooltipContent,
   tooltipClassName,
   focusedAnnotationId,
-  onAnnotationClick
+  onAnnotationClick,
+  hoverTooltipClassName
 }) => {
   const { annotations } = useAnnotations();
   const pageNumber = usePDFPageNumber();
@@ -361,6 +429,7 @@ var AnnotationHighlightLayer = ({
     {
       annotation,
       className: tooltipClassName,
+      hoverClassName: hoverTooltipClassName,
       isOpen: focusedAnnotationId === annotation.id,
       onOpenChange: (open) => {
         if (open && onAnnotationClick) {
@@ -372,6 +441,11 @@ var AnnotationHighlightLayer = ({
         onClose: () => {
         }
       }),
+      hoverTooltipContent: renderHoverTooltipContent({
+        annotation,
+        onClose: () => {
+        }
+      }),
       children: /* @__PURE__ */ jsx(
         "div",
         {
@@ -1078,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.2",
+  "version": "3.5.4",
   "description": "Headless PDF viewer for React",
   "author": "andrewdr (https://github.com/andrewdoro)",
   "license": "MIT",