@anaralabs/lector 3.5.7 → 3.5.9

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;

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';
@@ -270,7 +270,7 @@ var useAnnotationTooltip = ({
 var AnnotationTooltip = ({
   annotation,
   children,
-  tooltipContent,
+  renderTooltipContent,
   hoverTooltipContent,
   onOpenChange,
   className,
@@ -282,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,
@@ -292,6 +293,7 @@ var AnnotationTooltip = ({
   } = useAnnotationTooltip({
     annotation,
     onOpenChange,
+    position: triggeredPosition,
     isOpen: controlledIsOpen
   });
   const {
@@ -383,7 +385,11 @@ var AnnotationTooltip = ({
             zIndex: 50
           },
           ...getFloatingProps(),
-          children: tooltipContent
+          children: renderTooltipContent({
+            annotation,
+            onClose: () => setIsOpen(false),
+            setPosition: (position) => setTriggeredPosition(position)
+          })
         }
       ),
       viewportRef.current
@@ -468,11 +474,7 @@ var AnnotationHighlightLayer = ({
           onAnnotationClick(annotation);
         }
       },
-      tooltipContent: renderTooltipContent({
-        annotation,
-        onClose: () => {
-        }
-      }),
+      renderTooltipContent,
       hoverTooltipContent: renderHoverTooltipContent({
         annotation,
         onClose: () => {
@@ -1053,39 +1055,69 @@ var shouldMergeRects = (rect1, rect2) => {
   const horizontallyClose = Math.abs(rect1.left + rect1.width - rect2.left) < MERGE_THRESHOLD || Math.abs(rect2.left + rect2.width - rect1.left) < MERGE_THRESHOLD || rect1.left < rect2.left + rect2.width && rect2.left < rect1.left + rect1.width;
   return verticalOverlap && horizontallyClose;
 };
-var mergeRects = (rect1, rect2) => {
-  return {
-    left: Math.min(rect1.left, rect2.left),
-    top: Math.min(rect1.top, rect2.top),
-    width: Math.max(rect1.left + rect1.width, rect2.left + rect2.width) - Math.min(rect1.left, rect2.left),
-    height: Math.max(rect1.top + rect1.height, rect2.top + rect2.height) - Math.min(rect1.top, rect2.top),
-    pageNumber: rect1.pageNumber
-  };
-};
 var consolidateRects = (rects) => {
   if (rects.length <= 1) return rects;
-  const sortedRects = [...rects].sort((a, b) => a.top - b.top);
-  let hasChanges;
-  do {
-    hasChanges = false;
-    let currentRect = sortedRects[0];
-    const tempResult = [];
-    for (let i = 1; i < sortedRects.length; i++) {
-      const sorted = sortedRects[i];
-      if (!currentRect || !sorted) continue;
-      if (shouldMergeRects(currentRect, sorted)) {
-        currentRect = mergeRects(currentRect, sorted);
-        hasChanges = true;
-      } else {
-        tempResult.push(currentRect);
-        currentRect = sorted;
+  const result = [];
+  const visited = /* @__PURE__ */ new Set();
+  for (let i = 0; i < rects.length; i++) {
+    if (visited.has(i)) continue;
+    const currentRect = rects[i];
+    if (!currentRect) continue;
+    const currentGroup = [currentRect];
+    visited.add(i);
+    let foundNew = true;
+    while (foundNew) {
+      foundNew = false;
+      for (let j = 0; j < rects.length; j++) {
+        if (visited.has(j)) continue;
+        const candidateRect = rects[j];
+        if (!candidateRect) continue;
+        const shouldMergeWithGroup = currentGroup.some(
+          (groupRect) => doRectsOverlap(groupRect, candidateRect)
+        );
+        if (shouldMergeWithGroup) {
+          currentGroup.push(candidateRect);
+          visited.add(j);
+          foundNew = true;
+        }
       }
     }
-    if (currentRect) tempResult.push(currentRect);
-    sortedRects.length = 0;
-    sortedRects.push(...tempResult);
-  } while (hasChanges);
-  return sortedRects;
+    result.push(mergeRectGroup(currentGroup));
+  }
+  return result;
+};
+var doRectsOverlap = (rect1, rect2) => {
+  const horizontalOverlap = rect1.left < rect2.left + rect2.width && rect2.left < rect1.left + rect1.width;
+  const verticalOverlap = rect1.top < rect2.top + rect2.height && rect2.top < rect1.top + rect1.height;
+  const closeEnough = shouldMergeRects(rect1, rect2);
+  return horizontalOverlap && verticalOverlap || closeEnough;
+};
+var mergeRectGroup = (rects) => {
+  if (rects.length === 1) {
+    const rect = rects[0];
+    if (!rect) throw new Error("Invalid rect in group");
+    return rect;
+  }
+  const firstRect = rects[0];
+  if (!firstRect) throw new Error("Invalid first rect in group");
+  let minLeft = firstRect.left;
+  let minTop = firstRect.top;
+  let maxRight = firstRect.left + firstRect.width;
+  let maxBottom = firstRect.top + firstRect.height;
+  rects.forEach((rect) => {
+    if (!rect) return;
+    minLeft = Math.min(minLeft, rect.left);
+    minTop = Math.min(minTop, rect.top);
+    maxRight = Math.max(maxRight, rect.left + rect.width);
+    maxBottom = Math.max(maxBottom, rect.top + rect.height);
+  });
+  return {
+    left: minLeft,
+    top: minTop,
+    width: maxRight - minLeft,
+    height: maxBottom - minTop,
+    pageNumber: firstRect.pageNumber
+  };
 };
 var useSelectionDimensions = () => {
   const store = PDFStore.useContext();
@@ -1125,7 +1157,8 @@ var useSelectionDimensions = () => {
     });
     textLayerMap.forEach((rects) => {
       if (rects.length > 0) {
-        highlights.push(...consolidateRects(rects));
+        const consolidated = consolidateRects(rects);
+        highlights.push(...consolidated);
       }
     });
     return {
@@ -1520,24 +1553,171 @@ var HighlightLayer = forwardRef(({ asChild, className, style, ...props }, ref) =
   }) });
 });
 HighlightLayer.displayName = "HighlightLayer";
+var createTextSelectionManager = () => {
+  const textLayers = /* @__PURE__ */ new Map();
+  let selectionChangeAbortController = null;
+  let isPointerDown = false;
+  let prevRange = null;
+  let isFirefox;
+  const removeGlobalSelectionListener = (textLayerDiv) => {
+    textLayers.delete(textLayerDiv);
+    if (textLayers.size === 0) {
+      selectionChangeAbortController?.abort();
+      selectionChangeAbortController = null;
+    }
+  };
+  const enableGlobalSelectionListener = () => {
+    if (selectionChangeAbortController) {
+      return;
+    }
+    selectionChangeAbortController = new AbortController();
+    const { signal } = selectionChangeAbortController;
+    const reset = (endDiv, textLayer) => {
+      if (endDiv.parentNode !== textLayer) {
+        textLayer.appendChild(endDiv);
+      }
+      endDiv.style.width = "";
+      endDiv.style.height = "";
+      textLayer.classList.remove("selecting");
+    };
+    document.addEventListener("pointerdown", () => {
+      isPointerDown = true;
+    }, { signal });
+    document.addEventListener("pointerup", () => {
+      isPointerDown = false;
+      textLayers.forEach(reset);
+    }, { signal });
+    window.addEventListener("blur", () => {
+      isPointerDown = false;
+      textLayers.forEach(reset);
+    }, { signal });
+    document.addEventListener("keyup", () => {
+      if (!isPointerDown) {
+        textLayers.forEach(reset);
+      }
+    }, { signal });
+    document.addEventListener("selectionchange", () => {
+      const selection = document.getSelection();
+      if (!selection || selection.rangeCount === 0) {
+        textLayers.forEach(reset);
+        return;
+      }
+      const activeTextLayers = /* @__PURE__ */ new Set();
+      for (let i = 0; i < selection.rangeCount; i++) {
+        const range = selection.getRangeAt(i);
+        for (const textLayerDiv of textLayers.keys()) {
+          if (!activeTextLayers.has(textLayerDiv) && range.intersectsNode(textLayerDiv)) {
+            activeTextLayers.add(textLayerDiv);
+          }
+        }
+      }
+      for (const [textLayerDiv, endDiv] of textLayers) {
+        if (activeTextLayers.has(textLayerDiv)) {
+          textLayerDiv.classList.add("selecting");
+        } else {
+          reset(endDiv, textLayerDiv);
+        }
+      }
+      if (isFirefox === void 0) {
+        const firstTextLayer = textLayers.keys().next().value;
+        if (firstTextLayer) {
+          isFirefox = getComputedStyle(firstTextLayer).getPropertyValue("-moz-user-select") === "none";
+        }
+      }
+      if (isFirefox) {
+        return;
+      }
+      try {
+        const range = selection.getRangeAt(0);
+        const modifyStart = prevRange && (range.compareBoundaryPoints(Range.END_TO_END, prevRange) === 0 || range.compareBoundaryPoints(Range.START_TO_END, prevRange) === 0);
+        let anchor = modifyStart ? range.startContainer : range.endContainer;
+        if (anchor.nodeType === Node.TEXT_NODE) {
+          anchor = anchor.parentNode;
+        }
+        const parentTextLayer = anchor.parentElement?.closest(".textLayer");
+        const endDiv = textLayers.get(parentTextLayer);
+        if (endDiv && parentTextLayer) {
+          endDiv.style.width = parentTextLayer.style.width;
+          endDiv.style.height = parentTextLayer.style.height;
+          const insertTarget = modifyStart ? anchor : anchor.nextSibling;
+          if (anchor.parentElement && insertTarget) {
+            anchor.parentElement.insertBefore(endDiv, insertTarget);
+          }
+        }
+        prevRange = range.cloneRange();
+      } catch {
+      }
+    }, { signal });
+  };
+  const bindMouseEvents2 = (textLayerDiv, endOfContent) => {
+    if (textLayerDiv._textSelectionBound) {
+      return;
+    }
+    textLayerDiv._textSelectionBound = true;
+    textLayers.set(textLayerDiv, endOfContent);
+    enableGlobalSelectionListener();
+    const handleMouseDown = () => {
+      textLayerDiv.classList.add("selecting");
+    };
+    textLayerDiv.addEventListener("mousedown", handleMouseDown);
+    textLayerDiv._cleanupTextSelection = () => {
+      textLayerDiv.removeEventListener("mousedown", handleMouseDown);
+      removeGlobalSelectionListener(textLayerDiv);
+      delete textLayerDiv._textSelectionBound;
+    };
+  };
+  return bindMouseEvents2;
+};
+var bindMouseEvents = createTextSelectionManager();
 var useTextLayer = () => {
   const textContainerRef = useRef(null);
+  const textLayerRef = useRef(null);
+  const isRenderingRef = useRef(false);
   const pageNumber = usePDFPageNumber();
   const pdfPageProxy = usePdf((state) => state.getPdfPageProxy(pageNumber));
   useEffect(() => {
-    if (!textContainerRef.current) {
+    const textContainer = textContainerRef.current;
+    if (!textContainer || isRenderingRef.current) {
       return;
     }
+    isRenderingRef.current = true;
+    textContainer.innerHTML = "";
+    if (textLayerRef.current) {
+      textLayerRef.current.cancel();
+      textLayerRef.current = null;
+    }
     const textLayer = new TextLayer({
       textContentSource: pdfPageProxy.streamTextContent(),
-      container: textContainerRef.current,
+      container: textContainer,
       viewport: pdfPageProxy.getViewport({ scale: 1 })
     });
-    void textLayer.render();
+    textLayerRef.current = textLayer;
+    textLayer.render().then(() => {
+      if (textLayerRef.current === textLayer && textContainer) {
+        const endOfContent = document.createElement("div");
+        endOfContent.className = "endOfContent";
+        textContainer.appendChild(endOfContent);
+        bindMouseEvents(textContainer, endOfContent);
+      }
+    }).catch((error) => {
+      if (error.name !== "AbortException") {
+        console.error("TextLayer rendering error:", error);
+      }
+    }).finally(() => {
+      isRenderingRef.current = false;
+    });
     return () => {
-      textLayer.cancel();
+      isRenderingRef.current = false;
+      if (textLayerRef.current) {
+        textLayerRef.current.cancel();
+        textLayerRef.current = null;
+      }
+      if (textContainer?._cleanupTextSelection) {
+        textContainer._cleanupTextSelection();
+        delete textContainer._cleanupTextSelection;
+      }
     };
-  }, [pdfPageProxy]);
+  }, [pdfPageProxy.pageNumber]);
   return {
     textContainerRef,
     pageNumber: pdfPageProxy.pageNumber

package/package.json

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