react-pdf-highlighter-plus 1.1.1 → 1.1.3

package/dist/esm/index.d.ts

@@ -1694,6 +1694,8 @@ interface LeftPanelProps {
     linkService?: PDFLinkService | unknown | null;
     /** Event bus for page change events */
     eventBus?: EventBus$1 | unknown | null;
+    /** Function to navigate to a page (from pdfHighlighterUtils.goToPage) */
+    goToPage?: (pageNumber: number) => void;
     /** Whether panel is open */
     isOpen?: boolean;
     /** Callback when open state changes */
@@ -1829,6 +1831,7 @@ interface UseDocumentOutlineOptions {
     linkService?: {
         goToDestination: (dest: unknown) => void;
     } | unknown | null;
+    goToPage?: (pageNumber: number) => void;
 }
 interface UseDocumentOutlineResult {
     outline: ProcessedOutlineItem[] | null;

package/dist/esm/index.js

@@ -1484,7 +1484,63 @@ var PdfHighlighter = ({
     getLinkService: () => linkServiceRef.current,
     getEventBus: () => eventBusRef.current,
     goToPage: (pageNumber) => {
-      viewerRef.current?.scrollPageIntoView({ pageNumber });
+      console.log("[PdfHighlighter] goToPage called with page:", pageNumber);
+      const viewer = viewerRef.current;
+      if (!viewer) {
+        console.log("[PdfHighlighter] goToPage: viewer not available");
+        return;
+      }
+      const container = viewer.container;
+      console.log("[PdfHighlighter] goToPage: container:", !!container, "offsetParent:", !!container?.offsetParent);
+      if (container && container.offsetParent) {
+        try {
+          console.log("[PdfHighlighter] goToPage: using viewer.scrollPageIntoView");
+          viewer.scrollPageIntoView({ pageNumber });
+          return;
+        } catch (e) {
+          console.log("[PdfHighlighter] goToPage: scrollPageIntoView threw error:", e);
+        }
+      }
+      const pageElement = container?.querySelector(`.page[data-page-number="${pageNumber}"]`);
+      console.log("[PdfHighlighter] goToPage: DOM fallback, pageElement found:", !!pageElement);
+      if (pageElement && container) {
+        const styleTop = pageElement.style.top;
+        const scrollTarget = styleTop ? parseInt(styleTop, 10) : 0;
+        console.log("[PdfHighlighter] goToPage: style.top =", styleTop, "scrollTarget =", scrollTarget);
+        if (scrollTarget > 0) {
+          container.scrollTo({
+            top: scrollTarget,
+            behavior: "smooth"
+          });
+        } else {
+          const containerRect = container.getBoundingClientRect();
+          const pageRect = pageElement.getBoundingClientRect();
+          const scrollTop = container.scrollTop + (pageRect.top - containerRect.top);
+          console.log("[PdfHighlighter] goToPage: using getBoundingClientRect, scrollTop =", scrollTop);
+          container.scrollTo({
+            top: scrollTop,
+            behavior: "smooth"
+          });
+        }
+      } else {
+        const docPageElement = document.querySelector(`.page[data-page-number="${pageNumber}"]`);
+        console.log("[PdfHighlighter] goToPage: document-wide search, found:", !!docPageElement);
+        if (docPageElement) {
+          const styleTop = docPageElement.style.top;
+          const scrollTarget = styleTop ? parseInt(styleTop, 10) : 0;
+          const scrollContainer = docPageElement.closest(".pdfViewer")?.parentElement;
+          if (scrollContainer && scrollTarget > 0) {
+            console.log("[PdfHighlighter] goToPage: document search, scrolling to style.top =", scrollTarget);
+            scrollContainer.scrollTo({
+              top: scrollTarget,
+              behavior: "smooth"
+            });
+          } else {
+            console.log("[PdfHighlighter] goToPage: using scrollIntoView fallback");
+            docPageElement.scrollIntoView({ behavior: "smooth", block: "start" });
+          }
+        }
+      }
     }
   };
   const utilsRefCalledRef = useRef5(false);
@@ -3590,7 +3646,7 @@ async function exportPdf(pdfSource, highlights, options = {}) {
 }
 
 // src/components/leftpanel/LeftPanel.tsx
-import React21, { useState as useState17, useMemo as useMemo3, useCallback as useCallback8 } from "react";
+import React21, { useState as useState17, useMemo as useMemo3, useCallback as useCallback8, useRef as useRef19, useEffect as useEffect18 } from "react";
 import { List, FileText, ChevronLeft, ChevronRight as ChevronRight2 } from "lucide-react";
 
 // src/contexts/LeftPanelContext.ts
@@ -3621,7 +3677,6 @@ async function processOutlineItems(pdfDocument, items, level) {
           pageNumber = pageIndex + 1;
         }
       } catch {
-        console.log(`Failed to resolve destination for outline item: ${item.title}`);
       }
     }
     const children = item.items?.length ? await processOutlineItems(pdfDocument, item.items, level + 1) : [];
@@ -3649,7 +3704,7 @@ function flattenOutline(items) {
   return result;
 }
 function useDocumentOutline(options) {
-  const { pdfDocument, linkService } = options;
+  const { pdfDocument, goToPage } = options;
   const [outline, setOutline] = useState12(null);
   const [isLoading, setIsLoading] = useState12(true);
   const [error, setError] = useState12(null);
@@ -3660,7 +3715,6 @@ function useDocumentOutline(options) {
         setIsLoading(true);
         setError(null);
         const rawOutline = await pdfDocument.getOutline();
-        console.log("Raw outline from PDF:", rawOutline);
         if (cancelled) return;
         if (!rawOutline || rawOutline.length === 0) {
           setOutline([]);
@@ -3672,11 +3726,9 @@ function useDocumentOutline(options) {
           0
         );
         if (cancelled) return;
-        console.log("Processed outline:", processedOutline);
         setOutline(processedOutline);
       } catch (err) {
         if (cancelled) return;
-        console.error("Failed to load outline:", err);
         setError(err instanceof Error ? err : new Error("Failed to load outline"));
       } finally {
         if (!cancelled) {
@@ -3691,12 +3743,11 @@ function useDocumentOutline(options) {
   }, [pdfDocument]);
   const navigateToItem = useCallback5(
     (item) => {
-      console.log("Navigating to outline item:", item);
-      if (linkService && item.dest && typeof linkService === "object" && "goToDestination" in linkService) {
-        linkService.goToDestination(item.dest);
+      if (goToPage && item.pageNumber) {
+        goToPage(item.pageNumber);
       }
     },
-    [linkService]
+    [goToPage]
   );
   const flatOutline = useMemo2(() => {
     if (!outline) return [];
@@ -3903,7 +3954,9 @@ function usePageNavigation(options) {
   const viewerRef = useRef16(viewer);
   viewerRef.current = viewer;
   useEffect15(() => {
-    if (!eventBus || !isEventBus(eventBus)) return;
+    if (!eventBus || !isEventBus(eventBus)) {
+      return;
+    }
     const handlePageChange = (evt) => {
       setCurrentPage(evt.pageNumber);
     };
@@ -3912,11 +3965,11 @@ function usePageNavigation(options) {
       eventBus.off("pagechanging", handlePageChange);
     };
   }, [eventBus]);
-  const syncedRef = useRef16(false);
+  const prevViewerRef = useRef16(viewer);
   useEffect15(() => {
-    if (viewer && isViewer(viewer) && viewer.currentPageNumber && !syncedRef.current) {
-      setCurrentPage(viewer.currentPageNumber);
-      syncedRef.current = true;
+    if (viewer !== prevViewerRef.current) {
+      setCurrentPage(1);
+      prevViewerRef.current = viewer;
     }
   }, [viewer]);
   const goToPage = useCallback7(
@@ -3925,10 +3978,13 @@ function usePageNavigation(options) {
       if (v && isViewer(v)) {
         const totalPages2 = v.pagesCount || 0;
         if (pageNumber >= 1 && pageNumber <= totalPages2) {
-          try {
-            v.scrollPageIntoView({ pageNumber });
-            return;
-          } catch (e) {
+          const container = v.container;
+          if (container && container.offsetParent) {
+            try {
+              v.scrollPageIntoView({ pageNumber });
+              return;
+            } catch {
+            }
           }
         }
       }
@@ -4576,6 +4632,7 @@ var LeftPanel = ({
   viewer = null,
   linkService = null,
   eventBus = null,
+  goToPage: goToPageProp,
   isOpen: controlledIsOpen,
   onOpenChange,
   defaultTab = "thumbnails",
@@ -4616,30 +4673,38 @@ var LeftPanel = ({
     },
     [onOpenChange]
   );
-  const {
-    outline,
-    isLoading: isOutlineLoading,
-    hasOutline,
-    navigateToItem
-  } = useDocumentOutline({
-    pdfDocument,
-    linkService
-  });
   const { thumbnails, loadThumbnail, totalPages } = useThumbnails({
     pdfDocument,
     thumbnailWidth
   });
-  const { currentPage, goToPage } = usePageNavigation({
+  const { currentPage, goToPage: goToPageFromHook } = usePageNavigation({
     viewer,
     eventBus
   });
+  const goToPagePropRef = useRef19(goToPageProp);
+  useEffect18(() => {
+    goToPagePropRef.current = goToPageProp;
+  }, [goToPageProp]);
   const handlePageSelect = useCallback8(
     (pageNumber) => {
-      goToPage(pageNumber);
+      if (goToPagePropRef.current) {
+        goToPagePropRef.current(pageNumber);
+      } else {
+        goToPageFromHook(pageNumber);
+      }
       onPageSelect?.(pageNumber);
     },
-    [goToPage, onPageSelect]
+    [goToPageFromHook, onPageSelect]
   );
+  const {
+    outline,
+    isLoading: isOutlineLoading,
+    hasOutline,
+    navigateToItem
+  } = useDocumentOutline({
+    pdfDocument,
+    goToPage: handlePageSelect
+  });
   const handleOutlineNavigate = useCallback8(
     (item) => {
       navigateToItem(item);