Merge pull request #2 from ahmetkursatd/pdf-viewer-zoom-highlight-improvement

fix: Keep highlight when page is zoomed in/out

Author: MauritsBrinkman

src/components/document-viewer.tsx

@@ -418,7 +418,7 @@ const DocumentViewer: React.FC<DocumentViewerProps> = ({
         pdfDocumentInstance.destroy();
       }
     };
-  }, [pdfDocument?.originalFileUrl, pdfJsLoaded, zoomLevel, isBrowser, effectivePageNumber]);
+  }, [pdfDocument?.originalFileUrl, pdfJsLoaded, isBrowser, effectivePageNumber]);
 
   // Handle text highlighting when citationSnippet changes
   useEffect(() => {
@@ -440,12 +440,12 @@ const DocumentViewer: React.FC<DocumentViewerProps> = ({
         targetPage = effectivePageNumber;
       }
       (async () => {
-        const newHighlight = await createRectangleHighlight(
-          citationSnippet, 
-          viewer, 
-          targetPage, 
-          currentHighlight
-        );
+        const newHighlight = await createRectangleHighlight({
+          searchText: citationSnippet,
+          pdfViewerInstance: viewer,
+          targetPage: targetPage,
+          currentHighlight: currentHighlight,
+        });
         if (newHighlight) {
           removeCurrentHighlight();
           setCurrentHighlight(newHighlight);
@@ -516,12 +516,13 @@ const DocumentViewer: React.FC<DocumentViewerProps> = ({
 
       // Recreate highlight without changing page navigation
       const recreateHighlight = async () => {
-        const newHighlight = await createRectangleHighlight(
-          citationSnippet,
-          viewer,
-          undefined, // Don't specify target page to avoid navigation
-          null
-        );
+        const newHighlight = await createRectangleHighlight({
+          searchText: citationSnippet,
+          pdfViewerInstance: viewer,
+          targetPage: currentHighlight?.page,
+          currentHighlight,
+          shouldNavigateOnMatch: false,
+        });
         if (newHighlight) {
           removeCurrentHighlight();
           setCurrentHighlight(newHighlight);

src/utils/pdf-highlighting.ts

@@ -146,13 +146,21 @@ export const findTextInPDF = async (
 /**
  * Create a rectangle highlight overlay on a PDF page
  */
-export const createRectangleHighlight = async (
+export const createRectangleHighlight = async ({
+  searchText,
+  pdfViewerInstance,
+  targetPage,
+  currentHighlight = null,
+  forceRecreate = false,
+  shouldNavigateOnMatch = true
+}: {
   searchText: string,
-  pdfViewerInstance: any,
-  targetPage?: number,
-  currentHighlight?: CurrentHighlight | null,
-  forceRecreate?: boolean
-): Promise<CurrentHighlight | null> => {
+  pdfViewerInstance: any;
+  targetPage?: number;
+  currentHighlight?: CurrentHighlight | null;
+  forceRecreate?: boolean;
+  shouldNavigateOnMatch?: boolean;
+}): Promise<CurrentHighlight | null> => {
   if (!searchText || !pdfViewerInstance || !pdfViewerInstance.pagesCount) return null;
 
   // Check if we already have a highlight for the same text and page
@@ -178,9 +186,8 @@ export const createRectangleHighlight = async (
   }
   if (!result) return null;
 
-  // Only navigate to the page if we're explicitly targeting a specific page
   // Don't auto-navigate when user is scrolling around
-  if (targetPage && result.page !== pdfViewerInstance.currentPageNumber) {
+  if (shouldNavigateOnMatch && targetPage && result.page !== pdfViewerInstance.currentPageNumber) {
     try {
       const pageNumber = Number(result.page);
       if (pageNumber >= 1 && pageNumber <= pdfViewerInstance.pagesCount) {