@anaralabs/lector 3.5.8 → 3.5.10

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

@@ -24,40 +24,40 @@ import { Virtualizer } from '@tanstack/react-virtual';
 declare interface Annotation {
     id: string;
     pageNumber: number;
-    highlights: Array<{
-        height: number;
-        left: number;
-        top: number;
-        width: number;
-        pageNumber: number;
-    }>;
+    highlights: HighlightRect_alias_2[];
+    underlines?: HighlightRect_alias_2[];
     color: string;
     borderColor: string;
+    comment?: string;
     createdAt: Date;
     updatedAt: Date;
-    comment?: string;
     metadata?: Record<string, unknown>;
+    isCommentPending?: boolean;
 }
 export { Annotation }
 export { Annotation as Annotation_alias_1 }
 
-export declare const AnnotationHighlightLayer: ({ className, style, renderTooltipContent, renderHoverTooltipContent, tooltipClassName, highlightClassName, focusedAnnotationId, focusedHoverAnnotationId, onAnnotationClick, hoverTooltipClassName, tooltipBubbleSize, }: AnnotationHighlightLayerProps) => JSX.Element;
+export declare const AnnotationHighlightLayer: ({ className, style, renderTooltipContent, renderHoverTooltipContent, tooltipClassName, highlightClassName, underlineClassName, commentIconPosition, commmentIcon, commentIconClassName, focusedAnnotationId, focusedHoverAnnotationId, onAnnotationClick, onAnnotationTooltipClose, hoverTooltipClassName, }: AnnotationHighlightLayerProps) => JSX.Element;
 
 declare interface AnnotationHighlightLayerProps {
     className?: string;
-    style?: React.CSSProperties;
-    renderTooltipContent: (props: AnnotationTooltipContentProps) => React.ReactNode;
+    style?: React_2.CSSProperties;
+    renderTooltipContent: (props: AnnotationTooltipContentProps) => React_2.ReactNode;
     renderHoverTooltipContent: (props: {
         annotation: Annotation;
         onClose: () => void;
-    }) => React.ReactNode;
+    }) => React_2.ReactNode;
     focusedAnnotationId?: string;
+    commmentIcon?: React_2.ReactNode;
     focusedHoverAnnotationId?: string;
     onAnnotationClick?: (annotation: Annotation) => void;
+    onAnnotationTooltipClose?: (annotation: Annotation) => void;
     tooltipClassName?: string;
     hoverTooltipClassName?: string;
     highlightClassName?: string;
-    tooltipBubbleSize?: number;
+    commentIconPosition?: 'highlight' | 'page';
+    underlineClassName?: string;
+    commentIconClassName?: string;
 }
 
 /**
@@ -97,7 +97,7 @@ declare interface AnnotationState {
     setAnnotations: (annotations: Annotation[]) => void;
 }
 
-export declare const AnnotationTooltip: ({ annotation, children, renderTooltipContent, 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, hoverIsOpen: controlledHoverIsOpen, }: AnnotationTooltipProps) => JSX.Element;
 
 export declare type AnnotationTooltipContentProps = {
     annotation: Annotation;
@@ -115,7 +115,6 @@ declare interface AnnotationTooltipProps {
     className?: string;
     hoverClassName?: string;
     hoverIsOpen?: boolean;
-    tooltipBubbleSize: number;
     renderHoverTooltipContent?: (props: {
         annotation: Annotation;
         onClose: () => void;
@@ -149,6 +148,7 @@ export declare const clamp: (value: number, min: number, max: number) => number;
 
 declare type CollapsibleSelection = {
     highlights: HighlightRect[];
+    underlines?: HighlightRect[];
     text: string;
     isCollapsed: boolean;
 };
@@ -205,6 +205,14 @@ declare type HighlightRect = {
 export { HighlightRect }
 export { HighlightRect as HighlightRect_alias_1 }
 
+export declare interface HighlightRect_alias_2 {
+    height: number;
+    left: number;
+    top: number;
+    width: number;
+    pageNumber: number;
+}
+
 export declare interface InitialPDFState {
     pdfDocumentProxy: PDFDocumentProxy;
     pageProxies: PDFPageProxy[];
@@ -470,6 +478,12 @@ export declare const useSelectionDimensions: () => {
         isCollapsed: boolean;
     } | undefined;
     getSelection: () => CollapsibleSelection;
+    getAnnotationDimension: () => {
+        highlights: HighlightRect[];
+        underlines: HighlightRect[];
+        text: string;
+        isCollapsed: boolean;
+    } | undefined;
 };
 
 export declare const ZoomIn: ({ ...props }: HTMLProps<HTMLButtonElement>) => JSX.Element;

package/dist/index.js

@@ -276,7 +276,6 @@ var AnnotationTooltip = ({
   className,
   hoverClassName,
   isOpen: controlledIsOpen,
-  tooltipBubbleSize,
   hoverIsOpen: controlledHoverIsOpen
 }) => {
   const viewportRef = usePdf((state) => state.viewportRef);
@@ -345,7 +344,7 @@ var AnnotationTooltip = ({
     setHoverIsOpen(false);
   }, [setHoverIsOpen]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx(
       "div",
       {
         ref: (node) => {
@@ -357,18 +356,7 @@ var AnnotationTooltip = ({
         onMouseLeave: handleMouseLeave,
         ...getReferenceProps(),
         ...getHoverReferenceProps(),
-        children: [
-          !isOpen && !hoverIsOpen && annotation.comment && /* @__PURE__ */ jsx("div", { className: "rounded-full", style: {
-            position: "absolute",
-            top: annotation.highlights[0]?.top ? annotation.highlights[0]?.top - tooltipBubbleSize / 2 : 0,
-            left: annotation.highlights[0]?.left ? annotation.highlights[0]?.left - tooltipBubbleSize / 2 : 0,
-            backgroundColor: annotation.borderColor,
-            height: `${tooltipBubbleSize}px`,
-            width: `${tooltipBubbleSize}px`,
-            zIndex: 50
-          } }),
-          children
-        ]
+        children
       }
     ),
     isOpen && viewportRef.current && createPortal(
@@ -449,63 +437,147 @@ var AnnotationHighlightLayer = ({
   renderHoverTooltipContent,
   tooltipClassName,
   highlightClassName,
+  underlineClassName,
+  commentIconPosition,
+  commmentIcon,
+  commentIconClassName,
   focusedAnnotationId,
   focusedHoverAnnotationId,
   onAnnotationClick,
-  hoverTooltipClassName,
-  tooltipBubbleSize = 6
+  onAnnotationTooltipClose,
+  hoverTooltipClassName
 }) => {
   const { annotations } = useAnnotations();
   const pageNumber = usePDFPageNumber();
   const pageAnnotations = annotations.filter(
     (annotation) => annotation.pageNumber === pageNumber
   );
-  return /* @__PURE__ */ jsx("div", { className, style, children: pageAnnotations.map((annotation) => /* @__PURE__ */ jsx(
-    AnnotationTooltip,
-    {
-      annotation,
-      className: tooltipClassName,
-      hoverClassName: hoverTooltipClassName,
-      isOpen: focusedAnnotationId === annotation.id,
-      tooltipBubbleSize,
-      hoverIsOpen: focusedHoverAnnotationId === annotation.id,
-      onOpenChange: (open) => {
-        if (open && onAnnotationClick) {
-          onAnnotationClick(annotation);
+  const getCommentIconPosition = (highlights) => {
+    if (!highlights.length) return { top: 0, right: 10 };
+    const sortedHighlights = [...highlights].sort((a, b) => {
+      const topDiff = a.top - b.top;
+      return Math.abs(topDiff) < 3 ? a.left - b.left : topDiff;
+    });
+    const lines = [];
+    let currentLine = [];
+    sortedHighlights.forEach((highlight) => {
+      if (currentLine.length === 0) {
+        currentLine.push(highlight);
+      } else {
+        const firstInLine = currentLine[0];
+        if (Math.abs(highlight.top - firstInLine.top) <= 3) {
+          currentLine.push(highlight);
+        } else {
+          lines.push([...currentLine]);
+          currentLine = [highlight];
         }
-      },
-      renderTooltipContent,
-      hoverTooltipContent: renderHoverTooltipContent({
+      }
+    });
+    if (currentLine.length > 0) {
+      lines.push(currentLine);
+    }
+    const PAGE_WIDTH = 600;
+    const hasLongLine = lines.some((line) => {
+      if (line.length === 0) return false;
+      const rightmost2 = Math.max(...line.map((h) => h.left + h.width));
+      return rightmost2 > PAGE_WIDTH * 0.8;
+    });
+    const firstHighlight = highlights[0];
+    const firstLine = lines[0] || [];
+    const leftmost = Math.min(...firstLine.map((h) => h.left));
+    const rightmost = Math.max(...firstLine.map((h) => h.left + h.width));
+    const lineCenter = leftmost + (rightmost - leftmost) / 2;
+    const shouldPositionRight = hasLongLine || lineCenter > PAGE_WIDTH * 0.5;
+    const rightPosition = commentIconPosition === "highlight" ? { left: rightmost + 8 } : { right: 10 };
+    const leftPosition = commentIconPosition === "highlight" ? { left: leftmost - 18 } : { left: 20 };
+    return {
+      top: firstHighlight.top + firstHighlight.height / 2 - 6,
+      ...shouldPositionRight ? rightPosition : leftPosition
+    };
+  };
+  return /* @__PURE__ */ jsx("div", { className, style, children: pageAnnotations.map((annotation) => {
+    return /* @__PURE__ */ jsx(
+      AnnotationTooltip,
+      {
         annotation,
-        onClose: () => {
-        }
-      }),
-      children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          style: { cursor: "pointer" },
-          onClick: () => onAnnotationClick?.(annotation),
-          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
-              },
-              "data-highlight-id": annotation.id
-            },
-            index
-          ))
-        }
-      )
-    },
-    annotation.id
-  )) });
+        className: tooltipClassName,
+        hoverClassName: hoverTooltipClassName,
+        isOpen: focusedAnnotationId === annotation.id,
+        hoverIsOpen: focusedHoverAnnotationId === annotation.id,
+        onOpenChange: (open) => {
+          if (open && onAnnotationClick) {
+            onAnnotationClick(annotation);
+          } else if (!open && onAnnotationTooltipClose) {
+            onAnnotationTooltipClose(annotation);
+          }
+        },
+        renderTooltipContent,
+        hoverTooltipContent: renderHoverTooltipContent({
+          annotation,
+          onClose: () => {
+          }
+        }),
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: { cursor: "pointer" },
+            onClick: () => onAnnotationClick?.(annotation),
+            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
+                  },
+                  "data-highlight-id": annotation.id
+                },
+                `highlight-${index}`
+              )),
+              annotation.comment && annotation.underlines?.map((rect, index) => /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: underlineClassName,
+                  style: {
+                    position: "absolute",
+                    top: rect.top,
+                    left: rect.left,
+                    width: rect.width,
+                    height: rect.height,
+                    backgroundColor: annotation.borderColor,
+                    borderBottom: "1.5px"
+                  },
+                  "data-comment-id": annotation.id
+                },
+                `underline-${index}`
+              )),
+              annotation.comment && commmentIcon && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: commentIconClassName,
+                  style: {
+                    position: "absolute",
+                    ...getCommentIconPosition(annotation.highlights),
+                    color: "gray",
+                    cursor: "pointer",
+                    zIndex: 10
+                  },
+                  "data-comment-icon-id": annotation.id,
+                  children: commmentIcon
+                }
+              )
+            ]
+          }
+        )
+      },
+      annotation.id
+    );
+  }) });
 };
 
 // ../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
@@ -1049,48 +1121,341 @@ var CanvasLayer = ({
 };
 
 // src/hooks/useSelectionDimensions.tsx
-var MERGE_THRESHOLD = 5;
+var MERGE_THRESHOLD = 2;
 var shouldMergeRects = (rect1, rect2) => {
   const verticalOverlap = !(rect1.top > rect2.top + rect2.height || rect2.top > rect1.top + rect1.height);
-  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;
+  const horizontallyConnected = 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 && horizontallyConnected;
 };
-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 consolidateHighlightRects = (rects) => {
+  if (rects.length <= 1) return rects;
+  const sorted = [...rects].sort((a, b) => {
+    const topDiff = a.top - b.top;
+    return Math.abs(topDiff) < 2 ? a.left - b.left : topDiff;
+  });
+  const result = [];
+  let currentGroup = [sorted[0]];
+  for (let i = 1; i < sorted.length; i++) {
+    const currentRect = sorted[i];
+    const lastInGroup = currentGroup[currentGroup.length - 1];
+    const sameLineThreshold = Math.max(lastInGroup.height, currentRect.height) * 0.5;
+    const onSameLine = Math.abs(lastInGroup.top - currentRect.top) < sameLineThreshold;
+    const adjacent = Math.abs(lastInGroup.left + lastInGroup.width - currentRect.left) <= MERGE_THRESHOLD;
+    const overlapping = lastInGroup.left < currentRect.left + currentRect.width && currentRect.left < lastInGroup.left + lastInGroup.width;
+    if (onSameLine && (adjacent || overlapping)) {
+      currentGroup.push(currentRect);
+    } else {
+      if (currentGroup.length === 1) {
+        result.push(currentGroup[0]);
+      } else {
+        result.push(mergeRectGroup(currentGroup));
+      }
+      currentGroup = [currentRect];
+    }
+  }
+  if (currentGroup.length === 1) {
+    result.push(currentGroup[0]);
+  } else {
+    result.push(mergeRectGroup(currentGroup));
+  }
+  return result;
 };
 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();
+  const getAnnotationDimension = () => {
+    const selection = window.getSelection();
+    if (!selection || selection.isCollapsed) return;
+    const range = selection.getRangeAt(0);
+    const highlightRects = [];
+    const underlineRects = [];
+    const textLayerMapHighlight = /* @__PURE__ */ new Map();
+    const textLayerMapUnderline = /* @__PURE__ */ new Map();
+    const clientRects = Array.from(range.getClientRects()).filter(
+      (rect) => rect.width > 2 && rect.height > 2
+    );
+    clientRects.forEach((clientRect) => {
+      let element = document.elementFromPoint(
+        clientRect.left + 1,
+        clientRect.top + clientRect.height / 2
+      );
+      if (!element) {
+        element = document.elementFromPoint(
+          clientRect.left + clientRect.width / 2,
+          clientRect.top + clientRect.height / 2
+        );
+      }
+      if (!element) {
+        element = document.elementFromPoint(
+          clientRect.right - 1,
+          clientRect.top + clientRect.height / 2
+        );
+      }
+      if (!element) {
+        element = document.elementFromPoint(
+          clientRect.left + clientRect.width / 2,
+          clientRect.top + 1
+        );
+      }
+      if (!element) {
+        element = document.elementFromPoint(
+          clientRect.left + clientRect.width / 2,
+          clientRect.bottom - 1
+        );
+      }
+      const textLayer = element?.closest(".textLayer");
+      if (!textLayer) return;
+      const isSuperOrSubScript = (el) => {
+        if (!el) return false;
+        if (el.tagName.toLowerCase() === "sup" || el.tagName.toLowerCase() === "sub") {
+          return true;
+        }
+        const classes = el.className;
+        if (typeof classes === "string") {
+          const superSubClasses = ["superscript", "subscript", "sup", "sub"];
+          if (superSubClasses.some((c) => classes.includes(c))) {
+            return true;
+          }
+        }
+        const elementRect = el.getBoundingClientRect();
+        if (elementRect.height < 6 && elementRect.width < 15) {
+          const textContent = el.textContent?.trim() || "";
+          if (textContent.length <= 2 && /^[\d\w]{1,2}$/.test(textContent)) {
+            const parentRect = el.parentElement?.getBoundingClientRect();
+            if (parentRect && parentRect.height > elementRect.height * 2) {
+              const elementCenter = elementRect.top + elementRect.height / 2;
+              const parentCenter = parentRect.top + parentRect.height / 2;
+              const verticalOffset = Math.abs(elementCenter - parentCenter);
+              if (verticalOffset > parentRect.height * 0.4) {
+                return true;
+              }
+            }
+          }
+        }
+        return false;
+      };
+      const pageNumber = parseInt(
+        textLayer.getAttribute("data-page-number") || "1",
+        10
+      );
+      const textLayerRect = textLayer.getBoundingClientRect();
+      const zoom = store.getState().zoom;
+      const highlightRect = {
+        width: clientRect.width / zoom,
+        height: clientRect.height / zoom,
+        top: (clientRect.top - textLayerRect.top) / zoom,
+        left: (clientRect.left - textLayerRect.left) / zoom,
+        pageNumber
+      };
+      if (!textLayerMapHighlight.has(pageNumber)) {
+        textLayerMapHighlight.set(pageNumber, []);
+      }
+      textLayerMapHighlight.get(pageNumber)?.push(highlightRect);
+      const shouldCreateUnderline = !isSuperOrSubScript(element);
+      if (shouldCreateUnderline) {
+        const baselineOffset = clientRect.height * 0.85;
+        const underlineHeight = 2;
+        const underlineRect = {
+          width: clientRect.width / zoom,
+          height: underlineHeight / zoom,
+          top: (clientRect.top - textLayerRect.top + baselineOffset) / zoom,
+          left: (clientRect.left - textLayerRect.left) / zoom,
+          pageNumber
+        };
+        if (!textLayerMapUnderline.has(pageNumber)) {
+          textLayerMapUnderline.set(pageNumber, []);
+        }
+        textLayerMapUnderline.get(pageNumber)?.push(underlineRect);
+      }
+    });
+    textLayerMapHighlight.forEach((rects) => {
+      if (rects.length > 0) {
+        const consolidated = consolidateHighlightRects(rects);
+        highlightRects.push(...consolidated);
+      }
+    });
+    textLayerMapUnderline.forEach((rects) => {
+      if (rects.length > 0) {
+        const lineGroups = groupRectsByLine(rects);
+        lineGroups.forEach((group) => {
+          if (group.length === 0) return;
+          group.sort((a, b) => a.left - b.left);
+          let i = 0;
+          while (i < group.length) {
+            const startRect = group[i];
+            if (!startRect) {
+              i++;
+              continue;
+            }
+            let endIndex = i;
+            while (endIndex + 1 < group.length) {
+              const currentRect = group[endIndex];
+              const nextRect = group[endIndex + 1];
+              if (!currentRect || !nextRect) break;
+              const gap = nextRect.left - (currentRect.left + currentRect.width);
+              const maxGapAllowed = Math.max(MERGE_THRESHOLD, currentRect.height * 0.3);
+              if (gap <= maxGapAllowed) {
+                endIndex++;
+              } else {
+                break;
+              }
+            }
+            const endRect = group[endIndex];
+            if (!endRect) {
+              i++;
+              continue;
+            }
+            const zoom = store.getState().zoom;
+            const lineRect = {
+              width: endRect.left + endRect.width - startRect.left,
+              height: 2 / zoom,
+              // Fixed 2px thickness
+              top: startRect.top,
+              left: startRect.left,
+              pageNumber: startRect.pageNumber
+            };
+            underlineRects.push(lineRect);
+            i = endIndex + 1;
+          }
+        });
+      }
+    });
+    if (underlineRects.length === 0 && highlightRects.length > 0) {
+      highlightRects.forEach((highlightRect) => {
+        const baselineOffset = highlightRect.height * 0.85;
+        const underlineHeight = 1.5;
+        const underlineRect = {
+          width: highlightRect.width,
+          height: underlineHeight,
+          top: highlightRect.top + baselineOffset,
+          left: highlightRect.left,
+          pageNumber: highlightRect.pageNumber
+        };
+        underlineRects.push(underlineRect);
+      });
+    }
+    return {
+      highlights: highlightRects.sort((a, b) => a.pageNumber - b.pageNumber),
+      underlines: consolidateUnderlines(underlineRects).sort((a, b) => a.pageNumber - b.pageNumber),
+      text: range.toString().trim(),
+      isCollapsed: false
+    };
+  };
+  const groupRectsByLine = (rects) => {
+    const VERTICAL_TOLERANCE = 3;
+    const groups = [];
+    rects.forEach((rect) => {
+      const centerY = rect.top + rect.height / 2;
+      let foundGroup = false;
+      for (const group of groups) {
+        if (group.length === 0) continue;
+        const firstRect = group[0];
+        if (!firstRect) continue;
+        const groupCenterY = firstRect.top + firstRect.height / 2;
+        if (Math.abs(centerY - groupCenterY) <= VERTICAL_TOLERANCE) {
+          group.push(rect);
+          foundGroup = true;
+          break;
+        }
+      }
+      if (!foundGroup) {
+        groups.push([rect]);
+      }
+    });
+    return groups;
+  };
+  const consolidateUnderlines = (underlines) => {
+    if (underlines.length <= 1) return underlines;
+    const consolidated = [];
+    const sorted = [...underlines].sort((a, b) => {
+      const pageCompare = a.pageNumber - b.pageNumber;
+      if (pageCompare !== 0) return pageCompare;
+      const topCompare = a.top - b.top;
+      return Math.abs(topCompare) < 1 ? a.left - b.left : topCompare;
+    });
+    let current = sorted[0];
+    for (let i = 1; i < sorted.length; i++) {
+      const next = sorted[i];
+      const samePageAndLine = current.pageNumber === next.pageNumber && Math.abs(current.top - next.top) < 1;
+      const horizontallyConnected = samePageAndLine && (Math.abs(current.left + current.width - next.left) <= MERGE_THRESHOLD || current.left < next.left + next.width && next.left < current.left + current.width);
+      if (horizontallyConnected) {
+        const newWidth = Math.max(current.left + current.width, next.left + next.width) - Math.min(current.left, next.left);
+        current = {
+          ...current,
+          left: Math.min(current.left, next.left),
+          width: newWidth
+        };
+      } else {
+        consolidated.push(current);
+        current = next;
+      }
+    }
+    consolidated.push(current);
+    return consolidated;
+  };
   const getDimension = () => {
     const selection = window.getSelection();
     if (!selection || selection.isCollapsed) return;
@@ -1127,7 +1492,8 @@ var useSelectionDimensions = () => {
     });
     textLayerMap.forEach((rects) => {
       if (rects.length > 0) {
-        highlights.push(...consolidateRects(rects));
+        const consolidated = consolidateRects(rects);
+        highlights.push(...consolidated);
       }
     });
     return {
@@ -1137,7 +1503,7 @@ var useSelectionDimensions = () => {
     };
   };
   const getSelection = () => getDimension();
-  return { getDimension, getSelection };
+  return { getDimension, getSelection, getAnnotationDimension };
 };
 var SelectionTooltip = ({ children }) => {
   const [isOpen, setIsOpen] = useState(false);
@@ -1522,24 +1888,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.8",
+  "version": "3.5.10",
   "description": "Headless PDF viewer for React",
   "author": "andrewdr (https://github.com/andrewdoro)",
   "license": "MIT",