Fix + debounce epub text extraction on window resize

Author: richardr1126

src/app/epub/[id]/page.tsx

@@ -65,7 +65,7 @@ export default function EPUBPage() {
     <>
       <div className="p-2 pb-2 border-b border-offbase">
         <div className="flex flex-wrap items-center justify-between">
-          <div className="flex items-center gap-2">
+          <div className="flex items-center gap-1">
             <Link
               href="/"
               onClick={() => clearCurrDoc()}

src/components/EPUBViewer.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useRef, useCallback, useState } from 'react';
+import { useEffect, useRef, useCallback, useState, useMemo } from 'react';
 import { useParams } from 'next/navigation';
 import dynamic from 'next/dynamic';
 import { useEPUB } from '@/contexts/EPUBContext';
@@ -139,12 +139,40 @@ export function EPUBViewer({ className = '' }: EPUBViewerProps) {
     }
   }, [id, setEPUBPageInChapter, extractPageText]);
 
-  // Load the initial location
+  // Replace the debounced text extraction with a proper implementation using useMemo
+  const debouncedExtractText = useMemo(() => {
+    let timeout: NodeJS.Timeout;
+    return (book: Book, rendition: Rendition) => {
+      clearTimeout(timeout);
+      timeout = setTimeout(() => {
+        extractPageText(book, rendition);
+      }, 150);
+    };
+  }, [extractPageText]);
+
+  // Load the initial location and setup resize handler
   useEffect(() => {
     if (bookRef.current && rendition.current) {
       extractPageText(bookRef.current, rendition.current);
+
+      // Add resize observer
+      const resizeObserver = new ResizeObserver(() => {
+        if (bookRef.current && rendition.current) {
+          debouncedExtractText(bookRef.current, rendition.current);
+        }
+      });
+
+      // Observe the container element
+      const container = document.querySelector('.epub-container');
+      if (container) {
+        resizeObserver.observe(container);
+      }
+
+      return () => {
+        resizeObserver.disconnect();
+      };
     }
-  }, [extractPageText, initialPrevLocLoad]);
+  }, [extractPageText, debouncedExtractText, initialPrevLocLoad]);
 
   const updateTheme = useCallback((rendition: Rendition) => {
     if (!epubTheme) return; // Only apply theme if enabled

src/utils/pdf.ts

@@ -260,7 +260,7 @@ export function handleTextClick(
   }
 }
 
-// Add debounce utility at the top of the file
+// Debounce for PDF viewer
 export function debounce<T extends (...args: unknown[]) => unknown>(
   func: T,
   wait: number