@anaralabs/lector 3.2.0 → 3.4.0

package/dist/index.js

@@ -1,13 +1,14 @@
 'use client';
 
 import { AnnotationLayer, TextLayer, getDocument } from 'pdfjs-dist';
-import React, { createContext, forwardRef, useContext, useCallback, cloneElement, useState, useRef, useEffect, createRef, useLayoutEffect } from 'react';
+import React, { createContext, forwardRef, useContext, useState, useRef, useCallback, useEffect, cloneElement, createRef, useLayoutEffect } from 'react';
 import { useVirtualizer, elementScroll, debounce } from '@tanstack/react-virtual';
 import { useStore, createStore } from 'zustand';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { useDebounce } from 'use-debounce';
-import { Slot } from '@radix-ui/react-slot';
+import { v4 } from 'uuid';
 import { useFloating, autoUpdate, offset, shift, useDismiss, useInteractions } from '@floating-ui/react';
+import { Slot } from '@radix-ui/react-slot';
 
 // ../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
 function r(e) {
@@ -130,7 +131,16 @@ var PDFStore = createZustandContext(
         set({
           customSelectionRects: val
         });
-      }
+      },
+      coloredHighlights: [],
+      addColoredHighlight: (value) => set((prevState) => ({
+        coloredHighlights: [...prevState.coloredHighlights, value]
+      })),
+      deleteColoredHighlight: (uuid) => set((prevState) => ({
+        coloredHighlights: prevState.coloredHighlights.filter(
+          (rect) => rect.uuid !== uuid
+        )
+      }))
     }));
   }
 );
@@ -160,10 +170,74 @@ var cancellable = (promise) => {
     }
   };
 };
+
+// src/hooks/pages/usePdfJump.tsx
+var usePdfJump = () => {
+  const virtualizer = usePdf((state) => state.virtualizer);
+  const setHighlight = usePdf((state) => state.setHighlight);
+  const jumpToPage = (pageIndex, options) => {
+    if (!virtualizer) return;
+    const defaultOptions = {
+      align: "start",
+      behavior: "smooth"
+    };
+    const finalOptions = { ...defaultOptions, ...options };
+    virtualizer.scrollToIndex(pageIndex - 1, finalOptions);
+  };
+  const jumpToOffset = (offset2) => {
+    if (!virtualizer) return;
+    virtualizer.scrollToOffset(offset2, {
+      align: "start",
+      behavior: "smooth"
+    });
+  };
+  const jumpToHighlightRects = (rects, type, align = "start", additionalOffset = 0) => {
+    if (!virtualizer) return;
+    setHighlight(rects);
+    const firstPage = Math.min(...rects.map((rect) => rect.pageNumber));
+    const pageOffset = virtualizer.getOffsetForIndex(firstPage - 1, "start");
+    if (pageOffset === null) return;
+    const targetRect = rects.find((rect) => rect.pageNumber === firstPage);
+    if (!targetRect) return;
+    const isNumber = pageOffset?.[0] != null;
+    if (!isNumber) return;
+    const pageStart = pageOffset[0] ?? 0;
+    let rectTop;
+    let rectHeight;
+    if (type === "percent") {
+      const estimatePageHeight = virtualizer.options.estimateSize(
+        firstPage - 1
+      );
+      rectTop = targetRect.top / 100 * estimatePageHeight;
+      rectHeight = targetRect.height / 100 * estimatePageHeight;
+    } else {
+      rectTop = targetRect.top;
+      rectHeight = targetRect.height;
+    }
+    let scrollOffset;
+    if (align === "center") {
+      const viewportHeight = virtualizer.scrollElement?.clientHeight || 0;
+      const rectCenter = pageStart + rectTop + rectHeight / 2;
+      scrollOffset = rectCenter - viewportHeight / 2;
+    } else {
+      scrollOffset = pageStart + rectTop;
+    }
+    scrollOffset += additionalOffset;
+    const adjustedOffset = Math.max(0, scrollOffset);
+    virtualizer.scrollToOffset(adjustedOffset, {
+      align: "start",
+      // Always use start when we've calculated our own centering
+      behavior: "smooth"
+    });
+  };
+  return { jumpToPage, jumpToOffset, jumpToHighlightRects };
+};
 var LinkService = class {
   _pdfDocumentProxy;
   externalLinkEnabled = true;
   isInPresentationMode = false;
+  _currentPageNumber = 0;
+  _pageNavigationCallback;
   get pdfDocumentProxy() {
     if (!this._pdfDocumentProxy) {
       throw new Error("pdfDocumentProxy is not set");
@@ -173,17 +247,66 @@ var LinkService = class {
   constructor() {
   }
   get pagesCount() {
-    return this.pdfDocumentProxy.numPages;
+    return this._pdfDocumentProxy?.numPages || 0;
+  }
+  get page() {
+    return this._currentPageNumber;
+  }
+  set page(value) {
+    this._currentPageNumber = value;
+    if (this._pageNavigationCallback) {
+      this._pageNavigationCallback(value);
+    }
+  }
+  // Required for link annotations to work
+  setDocument(pdfDocument) {
+    this._pdfDocumentProxy = pdfDocument;
+  }
+  setViewer() {
   }
   getDestinationHash(dest) {
-    return `#dest-${dest[0].num}`;
+    if (!dest) return "";
+    const destRef = dest[0];
+    if (dest.length > 1 && typeof dest[1] === "object" && dest[1] !== null && "url" in dest[1]) {
+      const urlDest = dest[1];
+      return urlDest.url;
+    }
+    if (destRef && typeof destRef === "object") {
+      if ("num" in destRef) {
+        const numRef = destRef;
+        return `#page=${numRef.num + 1}`;
+      }
+      if ("gen" in destRef) {
+        const genRef = destRef;
+        const refNum = genRef.num ?? 0;
+        return `#page=${refNum + 1}`;
+      }
+    }
+    if (typeof destRef === "number") {
+      return `#page=${destRef + 1}`;
+    }
+    return `#dest-${String(dest)}`;
   }
-  getAnchorUrl() {
-    return "#";
+  getAnchorUrl(hash) {
+    if (hash.startsWith("http://") || hash.startsWith("https://")) {
+      return hash;
+    }
+    return `#${hash}`;
   }
   addLinkAttributes(link, url, newWindow) {
-    link.href = url;
-    link.target = newWindow === false ? "" : "_blank";
+    if (!link) return;
+    const isExternalLink = url.startsWith("http://") || url.startsWith("https://");
+    if (isExternalLink && this.externalLinkEnabled) {
+      link.href = url;
+      link.target = newWindow === false ? "" : "_blank";
+      link.rel = "noopener noreferrer";
+    } else if (!isExternalLink) {
+      link.href = url;
+      link.target = "";
+    } else {
+      link.href = "#";
+      link.target = "";
+    }
   }
   async goToDestination(dest) {
     let explicitDest;
@@ -197,11 +320,70 @@ var LinkService = class {
     if (!explicitDest) {
       return;
     }
-    const explicitRef = explicitDest[0];
-    await this.pdfDocumentProxy.getPageIndex(explicitRef);
+    if (explicitDest.length > 1 && typeof explicitDest[1] === "object" && explicitDest[1] !== null && "url" in explicitDest[1]) {
+      return;
+    }
+    const destRef = explicitDest[0];
+    let pageIndex;
+    if (destRef && typeof destRef === "object") {
+      if ("num" in destRef) {
+        try {
+          const refProxy = destRef;
+          pageIndex = await this.pdfDocumentProxy.getPageIndex(refProxy);
+        } catch (_error) {
+          return;
+        }
+      } else {
+        return;
+      }
+    } else if (typeof destRef === "number") {
+      pageIndex = destRef;
+    } else {
+      return;
+    }
+    const pageNumber = pageIndex + 1;
+    if (this._pageNavigationCallback) {
+      this._pageNavigationCallback(pageNumber);
+    }
+  }
+  executeNamedAction() {
+  }
+  navigateTo(dest) {
+    this.goToDestination(dest);
+  }
+  get rotation() {
+    return 0;
+  }
+  set rotation(value) {
+  }
+  goToPage(pageNumber) {
+    if (pageNumber >= 1 && pageNumber <= this.pagesCount) {
+      if (this._pageNavigationCallback) {
+        this._pageNavigationCallback(pageNumber);
+      }
+    }
+  }
+  setHash(hash) {
+    if (hash.startsWith("#page=")) {
+      const pageNumber = parseInt(hash.substring(6), 10);
+      if (!isNaN(pageNumber)) {
+        this.goToPage(pageNumber);
+      }
+    }
+  }
+  executeSetOCGState() {
+  }
+  // Method to register navigation callback
+  registerPageNavigationCallback(callback) {
+    this._pageNavigationCallback = callback;
+  }
+  // Method to unregister navigation callback
+  unregisterPageNavigationCallback() {
+    this._pageNavigationCallback = void 0;
   }
 };
-var PDFLinkServiceContext = createContext(null);
+var defaultLinkService = new LinkService();
+var PDFLinkServiceContext = createContext(defaultLinkService);
 var usePDFLinkService = () => {
   return useContext(PDFLinkServiceContext);
 };
@@ -230,9 +412,12 @@ var useVisibility = ({
 
 // src/hooks/layers/useAnnotationLayer.tsx
 var defaultAnnotationLayerParams = {
-  renderForms: true
+  renderForms: true,
+  externalLinksEnabled: true,
+  jumpOptions: { behavior: "smooth", align: "start" }
 };
 var useAnnotationLayer = (params) => {
+  const mergedParams = { ...defaultAnnotationLayerParams, ...params };
   const annotationLayerRef = useRef(null);
   const annotationLayerObjectRef = useRef(null);
   const linkService = usePDFLinkService();
@@ -241,6 +426,83 @@ var useAnnotationLayer = (params) => {
   });
   const pageNumber = usePDFPageNumber();
   const pdfPageProxy = usePdf((state) => state.getPdfPageProxy(pageNumber));
+  const pdfDocumentProxy = usePdf((state) => state.pdfDocumentProxy);
+  useEffect(() => {
+    linkService.externalLinkEnabled = mergedParams.externalLinksEnabled;
+  }, [linkService, mergedParams.externalLinksEnabled]);
+  const { jumpToPage } = usePdfJump();
+  useEffect(() => {
+    if (!jumpToPage) return;
+    const handlePageNavigation = (pageNumber2) => {
+      jumpToPage(pageNumber2, mergedParams.jumpOptions);
+    };
+    linkService.registerPageNavigationCallback(handlePageNavigation);
+    return () => {
+      linkService.unregisterPageNavigationCallback();
+    };
+  }, [jumpToPage, linkService, mergedParams.jumpOptions]);
+  useEffect(() => {
+    const style = document.createElement("style");
+    style.textContent = `
+      .annotationLayer {
+        position: absolute;
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        overflow: hidden;
+        opacity: 1;
+        z-index: 3;
+      }
+      
+      .annotationLayer section {
+        position: absolute;
+      }
+      
+      .annotationLayer .linkAnnotation > a,
+      .annotationLayer .buttonWidgetAnnotation.pushButton > a {
+        position: absolute;
+        font-size: 1em;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7") 0 0 repeat;
+        cursor: pointer;
+      }
+      
+      .annotationLayer .linkAnnotation > a:hover,
+      .annotationLayer .buttonWidgetAnnotation.pushButton > a:hover {
+        opacity: 0.2;
+        background: rgba(255, 255, 0, 1);
+        box-shadow: 0 2px 10px rgba(255, 255, 0, 1);
+      }
+    `;
+    document.head.appendChild(style);
+    return () => {
+      document.head.removeChild(style);
+    };
+  }, []);
+  useEffect(() => {
+    if (!annotationLayerRef.current) return;
+    const element = annotationLayerRef.current;
+    const handleLinkClick = (e) => {
+      if (!e.target || !(e.target instanceof HTMLAnchorElement)) return;
+      const target = e.target;
+      const href = target.getAttribute("href") || "";
+      if (href.startsWith("#page=")) {
+        e.preventDefault();
+        const pageNumber2 = parseInt(href.substring(6), 10);
+        if (!isNaN(pageNumber2)) {
+          linkService.goToPage(pageNumber2);
+        }
+      }
+    };
+    element.addEventListener("click", handleLinkClick);
+    return () => {
+      element.removeEventListener("click", handleLinkClick);
+    };
+  }, [linkService]);
   useEffect(() => {
     if (!annotationLayerRef.current) {
       return;
@@ -252,14 +514,20 @@ var useAnnotationLayer = (params) => {
     }
   }, [visible]);
   useEffect(() => {
-    if (!annotationLayerRef.current) {
+    if (!annotationLayerRef.current || !pdfPageProxy || !pdfDocumentProxy) {
       return;
     }
+    if (linkService._pdfDocumentProxy !== pdfDocumentProxy) {
+      linkService.setDocument(pdfDocumentProxy);
+    }
     annotationLayerRef.current.innerHTML = "";
+    annotationLayerRef.current.className = "annotationLayer";
+    const viewport = pdfPageProxy.getViewport({ scale: 1 });
     const annotationLayerConfig = {
       div: annotationLayerRef.current,
-      viewport: pdfPageProxy.getViewport({ scale: 1 }),
+      viewport,
       page: pdfPageProxy,
+      linkService,
       accessibilityManager: void 0,
       annotationCanvasMap: void 0,
       annotationEditorUIManager: void 0,
@@ -269,33 +537,38 @@ var useAnnotationLayer = (params) => {
     annotationLayerObjectRef.current = annotationLayer;
     const { cancel } = cancellable(
       (async () => {
-        await annotationLayer.render({
-          ...annotationLayerConfig,
-          ...defaultAnnotationLayerParams,
-          ...params,
-          annotations: await pdfPageProxy.getAnnotations(),
-          // @ts-expect-error TODO: Fix this
-          linkService
-        });
+        try {
+          const annotations = await pdfPageProxy.getAnnotations();
+          await annotationLayer.render({
+            ...annotationLayerConfig,
+            ...mergedParams,
+            annotations,
+            linkService
+          });
+        } catch (_error) {
+        }
       })()
     );
-    cancel();
     return () => {
       cancel();
     };
-  }, [pdfPageProxy, params, linkService]);
+  }, [pdfPageProxy, pdfDocumentProxy, mergedParams, linkService]);
   return {
     annotationLayerRef
   };
 };
 var AnnotationLayer2 = ({
   renderForms = true,
+  externalLinksEnabled = true,
+  jumpOptions = { behavior: "smooth", align: "start" },
   className,
   style,
   ...props
 }) => {
   const { annotationLayerRef } = useAnnotationLayer({
-    renderForms
+    renderForms,
+    externalLinksEnabled,
+    jumpOptions
   });
   return /* @__PURE__ */ jsx(
     "div",
@@ -335,7 +608,7 @@ var useDpr = () => {
 };
 
 // src/hooks/layers/useCanvasLayer.tsx
-var useCanvasLayer = () => {
+var useCanvasLayer = ({ background }) => {
   const canvasRef = useRef(null);
   const pageNumber = usePDFPageNumber();
   const dpr = useDpr();
@@ -357,7 +630,8 @@ var useCanvasLayer = () => {
     canvasContext.scale(scale, scale);
     const renderingTask = pdfPageProxy.render({
       canvasContext,
-      viewport
+      viewport,
+      background
     });
     renderingTask.promise.catch((error) => {
       if (error.name === "RenderingCancelledException") {
@@ -373,26 +647,442 @@ var useCanvasLayer = () => {
     canvasRef
   };
 };
-var CanvasLayer = ({
-  style,
-  ...props
+var CanvasLayer = ({
+  style,
+  background,
+  ...props
+}) => {
+  const { canvasRef } = useCanvasLayer({ background });
+  return /* @__PURE__ */ jsx(
+    "canvas",
+    {
+      style: {
+        ...style,
+        position: "absolute",
+        top: 0,
+        left: 0,
+        width: "100%",
+        height: "100%"
+      },
+      ...props,
+      ref: canvasRef
+    }
+  );
+};
+
+// src/hooks/useSelectionDimensions.tsx
+var MERGE_THRESHOLD = 20;
+var shouldMergeRectangles = (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;
+};
+var mergeRectangles = (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 sortedRectangles = rects.toSorted((a, b) => a.top - b.top);
+  let withinThresholdMergedRectangles = sortedRectangles[0];
+  const allMergedRectangles = [];
+  const blowUpMergedRectangles = (rect) => {
+    return {
+      ...rect,
+      left: rect.left - 2,
+      top: rect.top - 2,
+      width: rect.width + 4,
+      height: rect.height + 2
+    };
+  };
+  for (const [index, currentRectangle] of sortedRectangles.entries()) {
+    withinThresholdMergedRectangles = mergeRectangles(
+      withinThresholdMergedRectangles,
+      currentRectangle
+    );
+    const nextRectangle = sortedRectangles[index + 1];
+    if (!nextRectangle) {
+      allMergedRectangles.push(
+        blowUpMergedRectangles(withinThresholdMergedRectangles)
+      );
+      break;
+    }
+    if (!shouldMergeRectangles(withinThresholdMergedRectangles, nextRectangle)) {
+      allMergedRectangles.push(
+        blowUpMergedRectangles(withinThresholdMergedRectangles)
+      );
+      withinThresholdMergedRectangles = nextRectangle;
+    }
+  }
+  return allMergedRectangles;
+};
+var useSelectionDimensions = () => {
+  const store = PDFStore.useContext();
+  const getDimension = () => {
+    const selection = window.getSelection();
+    if (!selection || selection.isCollapsed) return;
+    const range = selection.getRangeAt(0);
+    const highlights = [];
+    const textLayerMap = /* @__PURE__ */ new Map();
+    const clientRects = Array.from(range.getClientRects()).filter(
+      (rect) => rect.width > 2 && rect.height > 2
+    );
+    clientRects.forEach((clientRect) => {
+      const element = document.elementFromPoint(
+        clientRect.left + 1,
+        clientRect.top + clientRect.height / 2
+      );
+      const textLayer = element?.closest(".textLayer");
+      if (!textLayer) return;
+      const pageNumber = parseInt(
+        textLayer.getAttribute("data-page-number") || "1",
+        10
+      );
+      const textLayerRect = textLayer.getBoundingClientRect();
+      const zoom = store.getState().zoom;
+      const rect = {
+        width: clientRect.width / zoom,
+        height: clientRect.height / zoom,
+        top: (clientRect.top - textLayerRect.top) / zoom,
+        left: (clientRect.left - textLayerRect.left) / zoom,
+        pageNumber
+      };
+      if (!textLayerMap.has(pageNumber)) {
+        textLayerMap.set(pageNumber, []);
+      }
+      textLayerMap.get(pageNumber)?.push(rect);
+    });
+    textLayerMap.forEach((rects) => {
+      if (rects.length > 0) {
+        highlights.push(...consolidateRects(rects));
+      }
+    });
+    return {
+      highlights: highlights.sort((a, b) => a.pageNumber - b.pageNumber),
+      text: range.toString().trim(),
+      isCollapsed: false
+    };
+  };
+  const getSelection = () => getDimension();
+  return { getDimension, getSelection };
+};
+var SelectionTooltip = ({ children }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const lastSelectionRef = useRef(null);
+  const viewportRef = usePdf((state) => state.viewportRef);
+  const { refs, floatingStyles, context } = useFloating({
+    placement: "bottom",
+    open: isOpen,
+    onOpenChange: setIsOpen,
+    whileElementsMounted: autoUpdate,
+    middleware: [offset(10), shift({ padding: 8 })]
+  });
+  const dismiss = useDismiss(context);
+  const { getFloatingProps } = useInteractions([dismiss]);
+  const updateTooltipPosition = useCallback(() => {
+    const selection = document.getSelection();
+    if (!selection || selection.isCollapsed) {
+      setIsOpen(false);
+      lastSelectionRef.current = null;
+      return;
+    }
+    const range = selection.getRangeAt(0);
+    if (!range) return;
+    const rects = range.getClientRects();
+    const lastRect = rects[rects.length - 1];
+    lastSelectionRef.current = range;
+    if (lastRect) {
+      refs.setReference({
+        getBoundingClientRect: () => ({
+          width: lastRect.width,
+          height: lastRect.height,
+          x: lastRect.left,
+          y: lastRect.bottom,
+          // Position below the last line of selection
+          top: lastRect.bottom,
+          right: lastRect.right,
+          bottom: lastRect.bottom + lastRect.height,
+          left: lastRect.left
+        }),
+        getClientRects: () => [lastRect]
+      });
+      setIsOpen(true);
+    } else {
+      setIsOpen(false);
+    }
+  }, [refs]);
+  useEffect(() => {
+    const handleSelectionChange = () => {
+      const selection = document.getSelection();
+      if (selection && viewportRef.current?.contains(selection.anchorNode)) {
+        requestAnimationFrame(updateTooltipPosition);
+      } else {
+        setIsOpen(false);
+      }
+    };
+    const handleScroll = () => {
+      if (!isOpen || !lastSelectionRef.current) return;
+      requestAnimationFrame(updateTooltipPosition);
+    };
+    document.addEventListener("selectionchange", handleSelectionChange);
+    if (viewportRef.current) {
+      viewportRef.current.addEventListener("scroll", handleScroll, {
+        passive: true
+      });
+    }
+    return () => {
+      document.removeEventListener("selectionchange", handleSelectionChange);
+      if (viewportRef.current) {
+        viewportRef.current.removeEventListener("scroll", handleScroll);
+      }
+    };
+  }, [refs, isOpen, viewportRef, updateTooltipPosition]);
+  useEffect(() => {
+    const handleFloatingClick = (e) => {
+      if (refs.floating.current?.contains(e.target)) {
+        e.stopPropagation();
+      }
+    };
+    document.addEventListener("click", handleFloatingClick);
+    return () => document.removeEventListener("click", handleFloatingClick);
+  }, [refs.floating]);
+  return /* @__PURE__ */ jsx(Fragment, { children: isOpen && /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: refs.setFloating,
+      style: {
+        ...floatingStyles
+      },
+      ...getFloatingProps(),
+      children
+    }
+  ) });
+};
+var defaultColors = [
+  {
+    color: "#e3b127",
+    localization: {
+      id: "yellow",
+      defaultMessage: "Yellow"
+    }
+  },
+  {
+    color: "#419931",
+    localization: {
+      id: "green",
+      defaultMessage: "Green"
+    }
+  },
+  {
+    color: "#4286c9",
+    localization: {
+      id: "blue",
+      defaultMessage: "Blue"
+    }
+  },
+  {
+    color: "#f246b6",
+    localization: {
+      id: "pink",
+      defaultMessage: "Pink"
+    }
+  },
+  {
+    color: "#a53dd1",
+    localization: {
+      id: "purple",
+      defaultMessage: "Purple"
+    }
+  },
+  {
+    color: "#f09037",
+    localization: {
+      id: "orange",
+      defaultMessage: "Orange"
+    }
+  },
+  {
+    color: "#37f0d4",
+    localization: {
+      id: "teal",
+      defaultMessage: "Teal"
+    }
+  },
+  {
+    color: "#3d0ff5",
+    localization: {
+      id: "purple",
+      defaultMessage: "Purple"
+    }
+  },
+  {
+    color: "#f50f26",
+    localization: {
+      id: "red",
+      defaultMessage: "Red"
+    }
+  }
+];
+var ColorSelectionTool = ({
+  highlighterColors = defaultColors,
+  onColorSelection
+}) => {
+  return /* @__PURE__ */ jsx(SelectionTooltip, { children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        display: "flex",
+        gap: "0.5rem",
+        padding: "0.5rem",
+        backgroundColor: "#363636",
+        borderRadius: "0.5rem"
+      },
+      children: highlighterColors.map((colorItem, index) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => onColorSelection(colorItem),
+          title: colorItem.localization.defaultMessage,
+          "aria-label": colorItem.localization.defaultMessage,
+          style: {
+            width: "1.25rem",
+            height: "1.25rem",
+            borderRadius: "0.25rem",
+            cursor: "pointer",
+            backgroundColor: colorItem.color
+          }
+        },
+        index
+      ))
+    }
+  ) });
+};
+
+// src/utils/selectionUtils.ts
+var getEndOfHighlight = (selection) => {
+  const lastRectangle = selection.rectangles[selection.rectangles.length - 1];
+  return lastRectangle.left + lastRectangle.width + 10;
+};
+var getMidHeightOfHighlightLine = (selection) => {
+  const lastRectangle = selection.rectangles[selection.rectangles.length - 1];
+  return lastRectangle.top + lastRectangle.height / 2;
+};
+var ColoredHighlightComponent = ({
+  selection
+}) => {
+  const deleteColoredHighlight = usePdf(
+    (state) => state.deleteColoredHighlight
+  );
+  const [showButton, setShowButton] = useState(false);
+  return /* @__PURE__ */ jsxs("div", { className: "colored-highlight", children: [
+    selection.rectangles.map((rect, index) => /* @__PURE__ */ jsx(
+      "span",
+      {
+        onClick: () => setShowButton(!showButton),
+        style: {
+          position: "absolute",
+          top: rect.top,
+          left: rect.left,
+          height: rect.height,
+          width: rect.width,
+          cursor: "pointer",
+          zIndex: 30,
+          backgroundColor: selection.color,
+          // mixBlendMode: "lighten", // changes the color of the text
+          mixBlendMode: "darken",
+          // best results
+          // mixBlendMode: "multiply", // works but coloring has some inconsistencies
+          borderRadius: "0.2rem"
+        }
+      },
+      `${selection.uuid}-${index}`
+    )),
+    showButton && /* @__PURE__ */ jsx(
+      "button",
+      {
+        style: {
+          backgroundColor: "white",
+          color: "white",
+          borderRadius: "5px",
+          padding: "5px",
+          cursor: "pointer",
+          boxShadow: "2px 2px 5px black",
+          position: "absolute",
+          top: getMidHeightOfHighlightLine(selection),
+          left: getEndOfHighlight(selection),
+          zIndex: 30,
+          transform: "translateY(-50%)"
+        },
+        onClick: () => deleteColoredHighlight(selection.uuid),
+        children: /* @__PURE__ */ jsx(
+          "svg",
+          {
+            fill: "#000000",
+            version: "1.1",
+            id: "Capa_1",
+            xmlns: "http://www.w3.org/2000/svg",
+            width: "15px",
+            height: "15px",
+            viewBox: "0 0 485 485",
+            children: /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsxs("g", { children: [
+              /* @__PURE__ */ jsx("rect", { x: "67.224", width: "350.535", height: "71.81" }),
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: "M417.776,92.829H67.237V485h350.537V92.829H417.776z M165.402,431.447h-28.362V146.383h28.362V431.447z M256.689,431.447\n			h-28.363V146.383h28.363V431.447z M347.97,431.447h-28.361V146.383h28.361V431.447z"
+                }
+              )
+            ] }) })
+          }
+        )
+      },
+      `${selection.uuid}-delete-button`
+    )
+  ] });
+};
+var ColoredHighlightLayer = ({
+  onHighlight
 }) => {
-  const { canvasRef } = useCanvasLayer();
-  return /* @__PURE__ */ jsx(
-    "canvas",
-    {
-      style: {
-        ...style,
-        position: "absolute",
-        top: 0,
-        left: 0,
-        width: "100%",
-        height: "100%"
-      },
-      ...props,
-      ref: canvasRef
-    }
+  const pageNumber = usePDFPageNumber();
+  const { getSelection } = useSelectionDimensions();
+  const highlights = usePdf(
+    (state) => state.coloredHighlights
   );
+  const addColoredHighlight = usePdf((state) => state.addColoredHighlight);
+  const handleHighlighting = useCallback((color) => {
+    const { highlights: highlights2, text } = getSelection();
+    if (highlights2[0]) {
+      const highlight = {
+        uuid: v4(),
+        pageNumber: highlights2[0].pageNumber,
+        // usePDFPageNumber() doesn't return the correct page number, so i'm getting the number directly from the first highlight
+        color,
+        rectangles: highlights2,
+        text
+      };
+      addColoredHighlight(highlight);
+      if (onHighlight) onHighlight(highlight);
+    }
+  }, []);
+  return /* @__PURE__ */ jsxs("div", { className: "colored-highlights-layer", children: [
+    highlights.filter((selection) => selection.pageNumber === pageNumber).map((selection) => /* @__PURE__ */ jsx(
+      ColoredHighlightComponent,
+      {
+        selection
+      },
+      selection.uuid
+    )),
+    /* @__PURE__ */ jsx(
+      ColorSelectionTool,
+      {
+        onColorSelection: (colorItem) => handleHighlighting(colorItem.color)
+      }
+    )
+  ] });
 };
 
 // src/components/layers/custom-layer.tsx
@@ -489,68 +1179,6 @@ var TextLayer2 = ({
     }
   );
 };
-
-// src/hooks/pages/usePdfJump.tsx
-var usePdfJump = () => {
-  const virtualizer = usePdf((state) => state.virtualizer);
-  const setHighlight = usePdf((state) => state.setHighlight);
-  const jumpToPage = (pageIndex, options) => {
-    if (!virtualizer) return;
-    const defaultOptions = {
-      align: "start",
-      behavior: "smooth"
-    };
-    const finalOptions = { ...defaultOptions, ...options };
-    virtualizer.scrollToIndex(pageIndex - 1, finalOptions);
-  };
-  const jumpToOffset = (offset2) => {
-    if (!virtualizer) return;
-    virtualizer.scrollToOffset(offset2, {
-      align: "start",
-      behavior: "smooth"
-    });
-  };
-  const jumpToHighlightRects = (rects, type, align = "start", additionalOffset = 0) => {
-    if (!virtualizer) return;
-    setHighlight(rects);
-    const firstPage = Math.min(...rects.map((rect) => rect.pageNumber));
-    const pageOffset = virtualizer.getOffsetForIndex(firstPage - 1, "start");
-    if (pageOffset === null) return;
-    const targetRect = rects.find((rect) => rect.pageNumber === firstPage);
-    if (!targetRect) return;
-    const isNumber = pageOffset?.[0] != null;
-    if (!isNumber) return;
-    const pageStart = pageOffset[0] ?? 0;
-    let rectTop;
-    let rectHeight;
-    if (type === "percent") {
-      const estimatePageHeight = virtualizer.options.estimateSize(
-        firstPage - 1
-      );
-      rectTop = targetRect.top / 100 * estimatePageHeight;
-      rectHeight = targetRect.height / 100 * estimatePageHeight;
-    } else {
-      rectTop = targetRect.top;
-      rectHeight = targetRect.height;
-    }
-    let scrollOffset;
-    if (align === "center") {
-      const viewportHeight = virtualizer.scrollElement?.clientHeight || 0;
-      const rectCenter = pageStart + rectTop + rectHeight / 2;
-      scrollOffset = rectCenter - viewportHeight / 2;
-    } else {
-      scrollOffset = pageStart + rectTop;
-    }
-    scrollOffset += additionalOffset;
-    const adjustedOffset = Math.max(0, scrollOffset);
-    virtualizer.scrollToOffset(adjustedOffset, {
-      align: "start",
-      // Always use start when we've calculated our own centering
-      behavior: "smooth"
-    });
-  };
-  return { jumpToPage, jumpToOffset, jumpToHighlightRects };
-};
 var usePDFOutline = () => {
   const pdfDocumentProxy = usePdf((state) => state.pdfDocumentProxy);
   const [outline, setOutline] = useState();
@@ -2953,12 +3581,10 @@ var Pages = ({
         toOffset -= size;
       }
       const scrollSizeProp = virtualizer.options.horizontal ? "scrollWidth" : "scrollHeight";
-      const scrollSize = virtualizer.scrollElement ? "document" in virtualizer.scrollElement ? (
+      virtualizer.scrollElement ? "document" in virtualizer.scrollElement ? (
         //@ts-expect-error this is a private stuff
         virtualizer.scrollElement.document.documentElement[scrollSizeProp]
       ) : virtualizer.scrollElement[scrollSizeProp] : 0;
-      const maxOffset = scrollSize - size;
-      console.log(scrollSize, maxOffset, toOffset);
       return Math.max(toOffset, 0);
     };
   }, [zoom, virtualizer]);
@@ -3151,98 +3777,6 @@ var Search = ({ children, loading = "Loading..." }) => {
   }, [proxies, getTextContent]);
   return isLoading ? loading : children;
 };
-var SelectionTooltip = ({ children }) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const lastSelectionRef = useRef(null);
-  const viewportRef = usePdf((state) => state.viewportRef);
-  const { refs, floatingStyles, context } = useFloating({
-    placement: "bottom",
-    open: isOpen,
-    onOpenChange: setIsOpen,
-    whileElementsMounted: autoUpdate,
-    middleware: [offset(10), shift({ padding: 8 })]
-  });
-  const dismiss = useDismiss(context);
-  const { getFloatingProps } = useInteractions([dismiss]);
-  const updateTooltipPosition = useCallback(() => {
-    const selection = document.getSelection();
-    if (!selection || selection.isCollapsed) {
-      setIsOpen(false);
-      lastSelectionRef.current = null;
-      return;
-    }
-    const range = selection.getRangeAt(0);
-    if (!range) return;
-    const rects = range.getClientRects();
-    const lastRect = rects[rects.length - 1];
-    lastSelectionRef.current = range;
-    if (lastRect) {
-      refs.setReference({
-        getBoundingClientRect: () => ({
-          width: lastRect.width,
-          height: lastRect.height,
-          x: lastRect.left,
-          y: lastRect.bottom,
-          // Position below the last line of selection
-          top: lastRect.bottom,
-          right: lastRect.right,
-          bottom: lastRect.bottom + lastRect.height,
-          left: lastRect.left
-        }),
-        getClientRects: () => [lastRect]
-      });
-      setIsOpen(true);
-    } else {
-      setIsOpen(false);
-    }
-  }, [refs]);
-  useEffect(() => {
-    const handleSelectionChange = () => {
-      const selection = document.getSelection();
-      if (selection && viewportRef.current?.contains(selection.anchorNode)) {
-        requestAnimationFrame(updateTooltipPosition);
-      } else {
-        setIsOpen(false);
-      }
-    };
-    const handleScroll = () => {
-      if (!isOpen || !lastSelectionRef.current) return;
-      requestAnimationFrame(updateTooltipPosition);
-    };
-    document.addEventListener("selectionchange", handleSelectionChange);
-    if (viewportRef.current) {
-      viewportRef.current.addEventListener("scroll", handleScroll, {
-        passive: true
-      });
-    }
-    return () => {
-      document.removeEventListener("selectionchange", handleSelectionChange);
-      if (viewportRef.current) {
-        viewportRef.current.removeEventListener("scroll", handleScroll);
-      }
-    };
-  }, [refs, isOpen, viewportRef, updateTooltipPosition]);
-  useEffect(() => {
-    const handleFloatingClick = (e) => {
-      if (refs.floating.current?.contains(e.target)) {
-        e.stopPropagation();
-      }
-    };
-    document.addEventListener("click", handleFloatingClick);
-    return () => document.removeEventListener("click", handleFloatingClick);
-  }, [refs.floating]);
-  return /* @__PURE__ */ jsx(Fragment, { children: isOpen && /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref: refs.setFloating,
-      style: {
-        ...floatingStyles
-      },
-      ...getFloatingProps(),
-      children
-    }
-  ) });
-};
 var DEFAULT_CONFIG = {
   maxHeight: 800,
   maxWidth: 400
@@ -3442,7 +3976,8 @@ var useSearch = () => {
         text: text.substr(matchIndex, searchText.length + textSize),
         score: 1,
         matchIndex,
-        isExactMatch: true
+        isExactMatch: true,
+        searchText
       });
       index = matchIndex + searchText.length;
     }
@@ -3471,7 +4006,8 @@ var useSearch = () => {
           text: text.substr(index, searchLower.length + textSize),
           score,
           matchIndex: index,
-          isExactMatch: false
+          isExactMatch: false,
+          searchText
         });
         index += searchLower.length;
       } else {
@@ -3546,7 +4082,7 @@ var useSearch = () => {
 async function calculateHighlightRects(pageProxy, textMatch) {
   const textContent = await pageProxy.getTextContent();
   const items = textContent.items;
-  const matchLength = textMatch.text.length;
+  const matchLength = textMatch.searchText ? textMatch.searchText.length : textMatch.text.length;
   const matchRects = [];
   let currentIndex = 0;
   let remainingMatchLength = matchLength;
@@ -3617,95 +4153,4 @@ function mergeAdjacentRects(rects) {
   return merged;
 }
 
-// src/hooks/useSelectionDimensions.tsx
-var MERGE_THRESHOLD = 5;
-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;
-};
-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;
-      }
-    }
-    if (currentRect) tempResult.push(currentRect);
-    sortedRects.length = 0;
-    sortedRects.push(...tempResult);
-  } while (hasChanges);
-  return sortedRects;
-};
-var useSelectionDimensions = () => {
-  const store = PDFStore.useContext();
-  const getDimension = () => {
-    const selection = window.getSelection();
-    if (!selection || selection.isCollapsed) return;
-    const range = selection.getRangeAt(0);
-    const highlights = [];
-    const textLayerMap = /* @__PURE__ */ new Map();
-    const clientRects = Array.from(range.getClientRects()).filter(
-      (rect) => rect.width > 2 && rect.height > 2
-    );
-    clientRects.forEach((clientRect) => {
-      const element = document.elementFromPoint(
-        clientRect.left + 1,
-        clientRect.top + clientRect.height / 2
-      );
-      const textLayer = element?.closest(".textLayer");
-      if (!textLayer) return;
-      const pageNumber = parseInt(
-        textLayer.getAttribute("data-page-number") || "1",
-        10
-      );
-      const textLayerRect = textLayer.getBoundingClientRect();
-      const zoom = store.getState().zoom;
-      const rect = {
-        width: clientRect.width / zoom,
-        height: clientRect.height / zoom,
-        top: (clientRect.top - textLayerRect.top) / zoom,
-        left: (clientRect.left - textLayerRect.left) / zoom,
-        pageNumber
-      };
-      if (!textLayerMap.has(pageNumber)) {
-        textLayerMap.set(pageNumber, []);
-      }
-      textLayerMap.get(pageNumber)?.push(rect);
-    });
-    textLayerMap.forEach((rects) => {
-      if (rects.length > 0) {
-        highlights.push(...consolidateRects(rects));
-      }
-    });
-    return {
-      highlights: highlights.sort((a, b) => a.pageNumber - b.pageNumber),
-      text: range.toString().trim(),
-      isCollapsed: false
-    };
-  };
-  return { getDimension };
-};
-
-export { AnnotationLayer2 as AnnotationLayer, CanvasLayer, CurrentPage, CurrentZoom, CustomLayer, HighlightLayer, LinkService, NextPage, Outline, OutlineChildItems, OutlineItem, Page, Pages, PreviousPage, Root, Search, SelectionTooltip, TextLayer2 as TextLayer, Thumbnail, Thumbnails, TotalPages, ZoomIn, ZoomOut, calculateHighlightRects, usePdf, usePdfJump, useSearch, useSelectionDimensions };
+export { AnnotationLayer2 as AnnotationLayer, CanvasLayer, ColoredHighlightLayer, CurrentPage, CurrentZoom, CustomLayer, HighlightLayer, LinkService, NextPage, Outline, OutlineChildItems, OutlineItem, Page, Pages, PreviousPage, Root, Search, SelectionTooltip, TextLayer2 as TextLayer, Thumbnail, Thumbnails, TotalPages, ZoomIn, ZoomOut, calculateHighlightRects, usePdf, usePdfJump, useSearch, useSelectionDimensions };