feat(pdf): modernize text highlighting and parsing for fluidity

- Offload computationally intensive text matching for real-time highlighting to a dedicated Web Worker, ensuring the main thread remains responsive during playback.
- Implement a new overlay-based highlighting system that renders independently of the PDF's text layer, providing smoother and more reliable visual feedback without interfering with document rendering.
- Introduce a new setting allowing users to enable or disable real-time text highlighting in PDFs, offering personalized control over the reading interface.
- Upgrade the underlying text comparison algorithm to Dice similarity for more accurate and context-aware matching of spoken words to on-screen text, improving synchronization precision.
- Improve sentence boundary detection, especially for quoted dialogue and complex structures, by enhancing the NLP processing logic, leading to a more natural audio-text flow.

Author: richardr1126

src/components/DocumentSettings.tsx

@@ -32,7 +32,8 @@ export function DocumentSettings({ isOpen, setIsOpen, epub, html }: {
     footerMargin,
     leftMargin,
     rightMargin,
-    updateConfigKey
+    updateConfigKey,
+    pdfHighlightEnabled,
   } = useConfig();
   const { createFullAudioBook: createEPUBAudioBook, regenerateChapter: regenerateEPUBChapter } = useEPUB();
   const { createFullAudioBook: createPDFAudioBook, regenerateChapter: regeneratePDFChapter } = usePDF();
@@ -327,6 +328,22 @@ export function DocumentSettings({ isOpen, setIsOpen, epub, html }: {
                         </p>
                       </div>
                     )}
+                    {!epub && !html && (
+                      <div className="space-y-1">
+                        <label className="flex items-center space-x-2">
+                          <input
+                            type="checkbox"
+                            checked={pdfHighlightEnabled}
+                            onChange={(e) => updateConfigKey('pdfHighlightEnabled', e.target.checked)}
+                            className="form-checkbox h-4 w-4 text-accent rounded border-muted"
+                          />
+                          <span className="text-sm font-medium text-foreground">Highlight text during playback</span>
+                        </label>
+                        <p className="text-sm text-muted pl-6">
+                          Show visual highlighting in the PDF viewer while TTS is reading.
+                        </p>
+                      </div>
+                    )}
                     {epub && (
                       <div className="space-y-1">
                         <label className="flex items-center space-x-2">

src/components/PDFViewer.tsx

@@ -25,73 +25,25 @@ export function PDFViewer({ zoomLevel }: PDFViewerProps) {
   const { containerWidth } = usePDFResize(containerRef);
 
   // Config context
-  const { viewType } = useConfig();
+  const { viewType, pdfHighlightEnabled } = useConfig();
 
   // TTS context
   const {
     currentSentence,
-    stopAndPlayFromIndex,
-    isProcessing,
     skipToLocation,
   } = useTTS();
 
   // PDF context
   const {
     highlightPattern,
     clearHighlights,
-    handleTextClick,
     onDocumentLoadSuccess,
     currDocData,
     currDocPages,
     currDocText,
     currDocPage,
   } = usePDF();
 
-  // Add static styles once during component mount
-  useEffect(() => {
-    const styleElement = document.createElement('style');
-    styleElement.textContent = `
-      .react-pdf__Page__textContent span {
-        cursor: pointer;
-        transition: background-color 0.2s ease;
-      }
-      .react-pdf__Page__textContent span:hover {
-        background-color: rgba(255, 255, 0, 0.2) !important;
-      }
-    `;
-    document.head.appendChild(styleElement);
-    return () => {
-      styleElement.remove();
-    };
-  }, []);
-
-  useEffect(() => {
-    /*
-     * Sets up click event listeners for text selection in the PDF.
-     * Cleans up by removing the event listener when component unmounts.
-     * 
-     * Dependencies:
-     * - pdfText: Re-run when the extracted text content changes
-     * - handleTextClick: Function from context that could change
-     * - stopAndPlayFromIndex: Function from context that could change
-     */
-    const container = containerRef.current;
-    if (!container) return;
-    if (!currDocText) return;
-
-    const handleClick = (event: MouseEvent) => handleTextClick(
-      event,
-      currDocText,
-      containerRef as RefObject<HTMLDivElement>,
-      stopAndPlayFromIndex,
-      isProcessing
-    );
-    container.addEventListener('click', handleClick);
-    return () => {
-      container.removeEventListener('click', handleClick);
-    };
-  }, [currDocText, handleTextClick, stopAndPlayFromIndex, isProcessing]);
-
   useEffect(() => {
     /*
      * Handles highlighting the current sentence being read by TTS.
@@ -103,7 +55,11 @@ export function PDFViewer({ zoomLevel }: PDFViewerProps) {
      * - highlightPattern: Function from context that could change
      * - clearHighlights: Function from context that could change
      */
-    if (!currDocText) return;
+
+    if (!currDocText || !pdfHighlightEnabled) {
+      clearHighlights();
+      return;
+    }
 
     const highlightTimeout = setTimeout(() => {
       if (containerRef.current) {
@@ -115,7 +71,7 @@ export function PDFViewer({ zoomLevel }: PDFViewerProps) {
       clearTimeout(highlightTimeout);
       clearHighlights();
     };
-  }, [currDocText, currentSentence, highlightPattern, clearHighlights]);
+  }, [currDocText, currentSentence, highlightPattern, clearHighlights, pdfHighlightEnabled]);
 
   // Add page dimensions state
   const [pageWidth, setPageWidth] = useState<number>(595); // default A4 width

src/contexts/ConfigContext.tsx

@@ -30,6 +30,7 @@ type ConfigValues = {
   ttsInstructions: string;
   savedVoices: SavedVoices;
   smartSentenceSplitting: boolean;
+  pdfHighlightEnabled: boolean;
 };
 
 /** Interface defining the configuration context shape and functionality */
@@ -55,6 +56,7 @@ interface ConfigContextType {
   updateConfigKey: <K extends keyof ConfigValues>(key: K, value: ConfigValues[K]) => Promise<void>;
   isLoading: boolean;
   isDBReady: boolean;
+  pdfHighlightEnabled: boolean;
 }
 
 const ConfigContext = createContext<ConfigContextType | undefined>(undefined);
@@ -76,14 +78,15 @@ export function ConfigProvider({ children }: { children: ReactNode }) {
   const [skipBlank, setSkipBlank] = useState<boolean>(true);
   const [epubTheme, setEpubTheme] = useState<boolean>(false);
   const [smartSentenceSplitting, setSmartSentenceSplitting] = useState<boolean>(true);
-  const [headerMargin, setHeaderMargin] = useState<number>(0.07);
-  const [footerMargin, setFooterMargin] = useState<number>(0.07);
-  const [leftMargin, setLeftMargin] = useState<number>(0.07);
-  const [rightMargin, setRightMargin] = useState<number>(0.07);
+  const [headerMargin, setHeaderMargin] = useState<number>(0.0);
+  const [footerMargin, setFooterMargin] = useState<number>(0.0);
+  const [leftMargin, setLeftMargin] = useState<number>(0.0);
+  const [rightMargin, setRightMargin] = useState<number>(0.0);
   const [ttsProvider, setTTSProvider] = useState<string>('custom-openai');
   const [ttsModel, setTTSModel] = useState<string>('kokoro');
   const [ttsInstructions, setTTSInstructions] = useState<string>('');
   const [savedVoices, setSavedVoices] = useState<SavedVoices>({});
+  const [pdfHighlightEnabled, setPdfHighlightEnabled] = useState<boolean>(true);
 
   const [isLoading, setIsLoading] = useState(true);
   const [isDBReady, setIsDBReady] = useState(false);
@@ -115,6 +118,7 @@ export function ConfigProvider({ children }: { children: ReactNode }) {
         const cachedTTSModel = await getItem('ttsModel');
         const cachedTTSInstructions = await getItem('ttsInstructions');
         const cachedSavedVoices = await getItem('savedVoices');
+        const cachedPdfHighlightEnabled = await getItem('pdfHighlightEnabled');
 
         // Migration logic: infer provider and baseUrl for returning users
         let inferredProvider = cachedTTSProvider || '';
@@ -200,6 +204,7 @@ export function ConfigProvider({ children }: { children: ReactNode }) {
         const finalModel = cachedTTSModel || (inferredProvider === 'openai' ? 'tts-1' : inferredProvider === 'deepinfra' ? 'hexgrad/Kokoro-82M' : 'kokoro');
         setTTSModel(finalModel);
         setTTSInstructions(cachedTTSInstructions || '');
+        setPdfHighlightEnabled(cachedPdfHighlightEnabled === 'false' ? false : true);
 
         // Restore voice for current provider-model if available in savedVoices
         const voiceKey = getVoiceKey(inferredProvider || 'custom-openai', finalModel);
@@ -219,8 +224,8 @@ export function ConfigProvider({ children }: { children: ReactNode }) {
         if (cachedSmartSentenceSplitting === null) {
           await setItem('smartSentenceSplitting', 'true');
         }
-        if (cachedHeaderMargin === null) await setItem('headerMargin', '0.07');
-        if (cachedFooterMargin === null) await setItem('footerMargin', '0.07');
+        if (cachedHeaderMargin === null) await setItem('headerMargin', '0.0');
+        if (cachedFooterMargin === null) await setItem('footerMargin', '0.0');
         if (cachedLeftMargin === null) await setItem('leftMargin', '0.0');
         if (cachedRightMargin === null) await setItem('rightMargin', '0.0');
         if (cachedTTSProvider === null && inferredProvider) {
@@ -247,6 +252,10 @@ export function ConfigProvider({ children }: { children: ReactNode }) {
         // Always ensure voice is not stored standalone - only in savedVoices
         await removeItem('voice');
 
+        if (cachedPdfHighlightEnabled === null) {
+          await setItem('pdfHighlightEnabled', 'true');
+        }
+        
       } catch (error) {
         console.error('Error initializing:', error);
       } finally {
@@ -379,6 +388,9 @@ export function ConfigProvider({ children }: { children: ReactNode }) {
           case 'ttsInstructions':
             setTTSInstructions(value as string);
             break;
+          case 'pdfHighlightEnabled':
+            setPdfHighlightEnabled(value as boolean);
+            break;
         }
       }
     } catch (error) {
@@ -411,7 +423,8 @@ export function ConfigProvider({ children }: { children: ReactNode }) {
       updateConfig,
       updateConfigKey,
       isLoading,
-      isDBReady
+      isDBReady,
+      pdfHighlightEnabled
     }}>
       {children}
     </ConfigContext.Provider>

src/contexts/PDFContext.tsx

@@ -62,7 +62,8 @@ interface PDFContextType {
     pdfText: string,
     containerRef: RefObject<HTMLDivElement>,
     stopAndPlayFromIndex: (index: number) => void,
-    isProcessing: boolean
+    isProcessing: boolean,
+    enableHighlight?: boolean
   ) => void;
   createFullAudioBook: (onProgress: (progress: number) => void, signal?: AbortSignal, onChapterComplete?: (chapter: { index: number; title: string; duration?: number; status: 'pending' | 'generating' | 'completed' | 'error'; bookId?: string; format?: 'mp3' | 'm4b' }) => void, bookId?: string, format?: 'mp3' | 'm4b') => Promise<string>;
   regenerateChapter: (chapterIndex: number, bookId: string, format: 'mp3' | 'm4b', onProgress: (progress: number) => void, signal: AbortSignal) => Promise<{ index: number; title: string; duration?: number; status: 'pending' | 'generating' | 'completed' | 'error'; bookId?: string; format?: 'mp3' | 'm4b' }>;

src/utils/nlp.ts

@@ -7,7 +7,7 @@
 
 import nlp from 'compromise';
 
-const MAX_BLOCK_LENGTH = 300;
+const MAX_BLOCK_LENGTH = 450;
 
 /**
  * Preprocesses text for audio generation by cleaning up various text artifacts
@@ -79,13 +79,8 @@ export const processTextToSentences = (text: string): string[] => {
     return [];
   }
 
-  if (text.length <= MAX_BLOCK_LENGTH) {
-    // Single sentence preprocessing
-    const cleanedText = preprocessSentenceForAudio(text);
-    return [cleanedText];
-  }
-
-  // Full text splitting into sentences
+  // Always use the full splitting logic so we consistently respect
+  // sentence boundaries and quoted dialogue, even for shorter texts.
   return splitIntoSentences(text);
 };
 
@@ -160,20 +155,18 @@ const countDoubleQuotes = (s: string): number => {
   return matches ? matches.length : 0;
 };
 
-const countCurlySingleQuotes = (s: string): number => {
-  const matches = s.match(/[‘’]/g);
-  return matches ? matches.length : 0;
-};
-
-const countStandaloneStraightSingles = (s: string): number => {
+// Replace the old curly single-quote counter and standalone-straight counter with a unified, context-aware counter
+const countNonApostropheSingleQuotes = (s: string): number => {
   let count = 0;
   for (let i = 0; i < s.length; i++) {
-    if (s[i] === "'") {
+    const ch = s[i];
+    if (ch === "'" || ch === '‘' || ch === '’') {
       const prev = i > 0 ? s[i - 1] : '';
       const next = i + 1 < s.length ? s[i + 1] : '';
       const isPrevAlphaNum = /[A-Za-z0-9]/.test(prev);
       const isNextAlphaNum = /[A-Za-z0-9]/.test(next);
-      // Count only when not clearly an apostrophe inside a word (e.g., don't)
+      // Treat as a real quote mark only when it's not clearly an apostrophe
+      // between two alphanumeric characters (e.g., don't, WizardLM’s).
       if (!(isPrevAlphaNum && isNextAlphaNum)) {
         count++;
       }
@@ -191,7 +184,10 @@ const mergeQuotedDialogue = (rawSentences: string[]): string[] => {
   for (const s of rawSentences) {
     const t = s.trim();
     const dblCount = countDoubleQuotes(t);
-    const singleCount = countCurlySingleQuotes(t) + countStandaloneStraightSingles(t);
+    // Use the new context-aware single-quote counter so curly apostrophes
+    // inside words don't incorrectly toggle quote state and merge large
+    // regions of plain prose into one block.
+    const singleCount = countNonApostropheSingleQuotes(t);
 
     if (insideDouble || insideSingle) {
       buffer = buffer ? `${buffer} ${t}` : t;