pdf-search-highlight 0.2.1 → 0.3.0

package/README.md

@@ -1,6 +1,6 @@
 # pdf-search-highlight
 
-PDF viewer with text search and highlight. Render PDF, search text with flexible whitespace matching, and navigate between highlighted results. Zoom in/out and download PDF files.
+PDF viewer with text search and highlight. Render PDF, search text with flexible whitespace matching or fuzzy (approximate) matching, and navigate between highlighted results. Supports multi-context search with different highlight colors. Zoom in/out and download PDF files.
 
 Built on [pdf.js](https://mozilla.github.io/pdf.js/). Works with Vanilla JS and React.
 
@@ -14,6 +14,8 @@ npm install pdf-search-highlight pdfjs-dist
 
 - Render PDF pages (canvas + text layer)
 - Search with flexible whitespace matching — handles inconsistent PDF text splitting
+- Fuzzy (approximate) search — find text even with typos or OCR errors
+- **Multi-context search** — search multiple queries simultaneously, each highlighted with a different color
 - Cross-span highlight using `<mark>` elements
 - Navigate between matches (next/prev, auto-scroll)
 - Zoom in/out with configurable scale
@@ -46,10 +48,24 @@ search.onChange = ({ current, total }) => {
 };
 
 search.search('hello world');
+search.search('helo wrld', { fuzzy: true, fuzzyThreshold: 0.6 }); // approximate match
 search.next();
 search.prev();
 search.clear();
 
+// Multi-context search — each query gets a different highlight color
+search.searchMultiple([
+  { query: 'contract' },
+  { query: 'payment' },
+  { query: 'deadline' },
+]);
+
+// With per-context options
+search.searchMultiple([
+  { query: 'contract' },
+  { query: 'payement', options: { fuzzy: true, fuzzyThreshold: 0.7 } },
+]);
+
 // Zoom
 renderer.setScale(1.5);
 const newPages = await renderer.renderAllPages();
@@ -74,6 +90,14 @@ await viewer.loadPDF(file);
 viewer.search('query');
 viewer.nextMatch();
 
+// Multi-context search
+viewer.searchMultiple([
+  { query: 'contract' },
+  { query: 'payment' },
+  { query: 'deadline' },
+]);
+viewer.nextMatch(); // navigates through ALL matches in document order
+
 // Zoom
 await viewer.zoomIn();
 await viewer.zoomOut();
@@ -85,6 +109,9 @@ await viewer.download('document.pdf');
 // Events
 viewer.on('load', ({ pageCount }) => console.log('Pages:', pageCount));
 viewer.on('search', ({ query, total }) => console.log('Found:', total));
+viewer.on('searchmultiple', ({ contexts, total, totalsPerContext }) => {
+  console.log('Multi-search:', total, 'total matches');
+});
 viewer.on('matchchange', ({ current, total }) => console.log(`${current + 1}/${total}`));
 viewer.on('zoom', ({ scale }) => console.log('Scale:', scale));
 viewer.on('error', ({ error, context }) => console.error(context, error));
@@ -99,16 +126,25 @@ import 'pdf-search-highlight/styles.css';
 function App() {
   const { containerRef, pages, loadPDF, zoomIn, zoomOut, download, scale } =
     usePDFRenderer(pdfjsLib);
-  const { search, next, prev, current, total } = useSearchController(pages);
+  const { search, searchMultiple, next, prev, current, total } =
+    useSearchController(pages);
 
   return (
     <>
-      {/* Search UI — anywhere you want */}
+      {/* Single search */}
       <input onChange={e => search(e.target.value)} />
       <span>{total > 0 ? `${current + 1}/${total}` : ''}</span>
       <button onClick={prev}>Prev</button>
       <button onClick={next}>Next</button>
 
+      {/* Multi-context search */}
+      <button onClick={() => searchMultiple([
+        { query: 'contract' },
+        { query: 'payment' },
+      ])}>
+        Search Multiple
+      </button>
+
       {/* Zoom & download */}
       <button onClick={zoomOut}>-</button>
       <button onClick={zoomIn}>+</button>
@@ -137,8 +173,11 @@ function App() {
       pdfjsLib={pdfjsLib}
       source={file}
       searchQuery={query}
+      // OR multi-context search:
+      // searchContexts={[{ query: 'contract' }, { query: 'payment' }]}
       onLoad={({ pageCount }) => console.log('Pages:', pageCount)}
       onSearch={({ query, total }) => console.log('Found:', total)}
+      onSearchMultiple={({ contexts, total }) => console.log('Multi:', total)}
       onMatchChange={({ current, total }) => console.log(`${current + 1}/${total}`)}
       onZoom={({ scale }) => console.log('Scale:', scale)}
       style={{ height: '80vh', overflow: 'auto' }}
@@ -147,6 +186,7 @@ function App() {
 
   // Imperative access via ref
   // ref.current.nextMatch()
+  // ref.current.searchMultiple([{ query: 'a' }, { query: 'b' }])
   // ref.current.zoomIn()
   // ref.current.download('doc.pdf')
 }
@@ -169,7 +209,7 @@ function App() {
 | Export | Description |
 |---|---|
 | `usePDFRenderer(pdfjsLib, options?)` | Hook: render PDF, returns `{ containerRef, pages, loadPDF, scale, setScale, zoomIn, zoomOut, download, ... }` |
-| `useSearchController(pages, options?)` | Hook: search + highlight, returns `{ search, next, prev, goTo, clear, current, total }` |
+| `useSearchController(pages, options?)` | Hook: search + highlight, returns `{ search, searchMultiple, next, prev, goTo, clear, current, total }` |
 | `PDFSearchViewer` | All-in-one component with ref handle for imperative control |
 
 ### PDFRenderer
@@ -198,16 +238,28 @@ const search = new SearchController({
 });
 
 search.setPages(pages);
+
+// Single search
 search.search('query', { caseSensitive: false, flexibleWhitespace: true });
+search.search('query', { fuzzy: true, fuzzyThreshold: 0.6 });
+
+// Multi-context search
+search.searchMultiple([
+  { query: 'contract' },
+  { query: 'payment' },
+  { query: 'deadline', options: { fuzzy: true } },
+]);
+
 search.next();
 search.prev();
 search.goTo(5);
 search.clear();
 search.onChange = ({ current, total, query }) => {};
 
-search.current  // current match index
-search.total    // total matches
-search.query    // last query
+search.current   // current match index
+search.total     // total matches
+search.query     // last single query
+search.contexts  // last multi-context queries
 ```
 
 ### PDFSearchViewer (Core)
@@ -217,6 +269,13 @@ const viewer = new PDFSearchViewer(container, pdfjsLib, options);
 
 await viewer.loadPDF(source);
 viewer.search('query', { caseSensitive: true });
+
+// Multi-context search
+viewer.searchMultiple([
+  { query: 'contract' },
+  { query: 'payment' },
+]);
+
 viewer.nextMatch();
 viewer.prevMatch();
 viewer.clearSearch();
@@ -230,6 +289,7 @@ await viewer.download('file.pdf');         // Download PDF
 
 viewer.on('load', (data) => {});           // { pageCount }
 viewer.on('search', (data) => {});         // { query, total }
+viewer.on('searchmultiple', (data) => {}); // { contexts, total, totalsPerContext }
 viewer.on('matchchange', (data) => {});    // { current, total }
 viewer.on('zoom', (data) => {});           // { scale }
 viewer.on('error', (data) => {});          // { error, context }
@@ -249,10 +309,46 @@ interface PDFSearchViewerOptions {
 
 interface SearchOptions {
   caseSensitive?: boolean;      // Default: false
-  flexibleWhitespace?: boolean; // Default: true
+  flexibleWhitespace?: boolean; // Default: true (ignored when fuzzy is true)
+  fuzzy?: boolean;              // Default: false — enable approximate matching
+  fuzzyThreshold?: number;      // Default: 0.6 — similarity 0.0–1.0
+}
+
+interface SearchContext {
+  query: string;                // The search query
+  options?: SearchOptions;      // Optional per-context overrides
 }
 ```
 
+### Multi-Context Search
+
+Search for multiple terms simultaneously, each highlighted with a different color:
+
+```js
+// Each context gets an auto-assigned color (highlight-0 through highlight-7, cycles)
+search.searchMultiple([
+  { query: 'contract' },          // Yellow
+  { query: 'payment' },           // Cyan
+  { query: 'deadline' },          // Green
+  { query: 'penalty' },           // Orange
+]);
+
+// Per-context options override shared options
+search.searchMultiple(
+  [
+    { query: 'contract' },
+    { query: 'payement', options: { fuzzy: true, fuzzyThreshold: 0.7 } },
+  ],
+  { caseSensitive: false } // shared options
+);
+
+// Navigate through ALL matches in document order
+search.next();  // goes to next match regardless of which context
+search.prev();  // goes to previous match
+```
+
+8 colors are provided by default (CSS classes `highlight-0` through `highlight-7`). Colors cycle for more than 8 contexts.
+
 ### Custom CSS
 
 Override any class name:
@@ -274,12 +370,23 @@ const renderer = new PDFRenderer(container, {
 Default styles:
 
 ```css
+/* Single search */
 .highlight {
   background: rgba(255, 230, 0, 0.45) !important;
 }
 .highlight.active {
   background: rgba(233, 69, 96, 0.55) !important;
 }
+
+/* Multi-context search (8 colors) */
+.highlight-0 { /* Yellow  */ }
+.highlight-1 { /* Cyan    */ }
+.highlight-2 { /* Green   */ }
+.highlight-3 { /* Orange  */ }
+.highlight-4 { /* Purple  */ }
+.highlight-5 { /* Pink    */ }
+.highlight-6 { /* Blue    */ }
+.highlight-7 { /* Lime    */ }
 ```
 
 ## How it works
@@ -287,9 +394,11 @@ Default styles:
 1. **Render**: PDF.js renders each page as `<canvas>` + transparent `<span>` text layer overlay
 2. **Search**: Concatenate all span texts into one string per page, build a `charMap` mapping each character back to its source span
 3. **Flexible whitespace**: Query `"and expensive"` becomes regex `a\s*n\s*d\s*e\s*x\s*p\s*e\s*n\s*s\s*i\s*v\s*e` — matches regardless of whitespace differences in PDF text
-4. **Highlight**: Regex matches on concatenated text → charMap maps back to spans → split span DOM into text nodes + `<mark>` elements
-5. **Navigate**: Prev/next with wrap-around, auto-scroll to active match
-6. **Zoom**: Re-renders all pages at new scale, search highlights are automatically re-applied
+4. **Fuzzy search**: Semi-global Levenshtein alignment finds substrings within edit distance ≤ `queryLength × (1 - threshold)` — handles typos, OCR errors, and garbled text extraction
+5. **Highlight**: Regex/fuzzy matches on concatenated text → charMap maps back to spans → split span DOM into text nodes + `<mark>` elements
+6. **Multi-context**: Each context runs independently, matches are sorted by document position, and each context's `<mark>` elements receive a distinct CSS class (`highlight-0`, `highlight-1`, ...)
+7. **Navigate**: Prev/next with wrap-around, auto-scroll to active match — in multi-context mode, navigation cycles through all matches across all contexts
+8. **Zoom**: Re-renders all pages at new scale, search highlights are automatically re-applied
 
 ## License
 

package/dist/{PDFSearchViewer-CQaAFXQs.d.cts → PDFSearchViewer-DzKHoKTp.d.cts}

@@ -57,36 +57,19 @@ interface SearchOptions {
      * Flexible whitespace matching: insert \s* between every character.
      * Handles PDF text split inconsistencies. Defaults to true.
      * Only applies for queries < 200 chars (performance).
+     * Ignored when `fuzzy` is true.
      */
     flexibleWhitespace?: boolean;
+    /** Enable approximate (fuzzy) matching. Defaults to false. */
+    fuzzy?: boolean;
+    /**
+     * Similarity threshold for fuzzy matching: 0.0–1.0.
+     * similarity = 1 - (editDistance / queryLength).
+     * Higher values require closer matches. Defaults to 0.6.
+     */
+    fuzzyThreshold?: number;
 }
 
-type PDFSearchViewerEventMap = {
-    /** Fired when PDF finishes loading. */
-    load: {
-        pageCount: number;
-    };
-    /** Fired when a search completes. */
-    search: {
-        query: string;
-        total: number;
-    };
-    /** Fired when active match changes (via next/prev). */
-    matchchange: {
-        current: number;
-        total: number;
-    };
-    /** Fired when zoom/scale changes. */
-    zoom: {
-        scale: number;
-    };
-    /** Fired on error. */
-    error: {
-        error: Error;
-        context: string;
-    };
-};
-
 /**
  * A single search match, potentially spanning multiple spans.
  * Each match contains an array of <mark> elements that highlight
@@ -116,6 +99,48 @@ interface PageData {
     /** All text spans on this page. */
     spans: SpanData[];
 }
+/**
+ * A single search context for multi-context search.
+ * Each context represents a separate query highlighted with a distinct color.
+ */
+interface SearchContext {
+    /** The query string to search for. */
+    query: string;
+    /** Optional per-context search options (overrides shared options). */
+    options?: SearchOptions;
+}
+
+type PDFSearchViewerEventMap = {
+    /** Fired when PDF finishes loading. */
+    load: {
+        pageCount: number;
+    };
+    /** Fired when a search completes. */
+    search: {
+        query: string;
+        total: number;
+    };
+    /** Fired when a multi-context search completes. */
+    searchmultiple: {
+        contexts: SearchContext[];
+        total: number;
+        totalsPerContext: number[];
+    };
+    /** Fired when active match changes (via next/prev). */
+    matchchange: {
+        current: number;
+        total: number;
+    };
+    /** Fired when zoom/scale changes. */
+    zoom: {
+        scale: number;
+    };
+    /** Fired on error. */
+    error: {
+        error: Error;
+        context: string;
+    };
+};
 
 type PDFSource = File | ArrayBuffer | Uint8Array | string;
 /**
@@ -144,6 +169,8 @@ declare class PDFSearchViewer extends EventEmitter<PDFSearchViewerEventMap> {
     private pageData;
     private lastQuery;
     private lastSearchOptions;
+    private lastContexts;
+    private lastIsMultiContext;
     private destroyed;
     constructor(container: HTMLElement, pdfjsLib: any, options?: PDFSearchViewerOptions);
     /**
@@ -155,6 +182,13 @@ declare class PDFSearchViewer extends EventEmitter<PDFSearchViewerEventMap> {
      * Clears previous highlights and creates new ones.
      */
     search(query: string, options?: SearchOptions): number;
+    /**
+     * Search for multiple query contexts across all pages.
+     * Each context is highlighted with a different color (highlight-0, highlight-1, ...).
+     * Navigation (nextMatch/prevMatch) cycles through ALL matches in document order.
+     * Returns total number of matches across all contexts.
+     */
+    searchMultiple(contexts: SearchContext[], sharedOptions?: SearchOptions): number;
     /**
      * Navigate to next match (wraps around).
      */
@@ -197,4 +231,4 @@ declare class PDFSearchViewer extends EventEmitter<PDFSearchViewerEventMap> {
     destroy(): void;
 }
 
-export { type ClassNames as C, EventEmitter as E, type PageData as P, type SearchOptions as S, type PDFSearchViewerOptions as a, type SpanData as b, type SearchMatch as c, PDFSearchViewer as d, type PDFSearchViewerEventMap as e, type PDFSource as f };
+export { type ClassNames as C, EventEmitter as E, type PageData as P, type SearchOptions as S, type SearchContext as a, type PDFSearchViewerOptions as b, type SpanData as c, type SearchMatch as d, PDFSearchViewer as e, type PDFSearchViewerEventMap as f, type PDFSource as g };

package/dist/{PDFSearchViewer-CQaAFXQs.d.ts → PDFSearchViewer-DzKHoKTp.d.ts}

@@ -57,36 +57,19 @@ interface SearchOptions {
      * Flexible whitespace matching: insert \s* between every character.
      * Handles PDF text split inconsistencies. Defaults to true.
      * Only applies for queries < 200 chars (performance).
+     * Ignored when `fuzzy` is true.
      */
     flexibleWhitespace?: boolean;
+    /** Enable approximate (fuzzy) matching. Defaults to false. */
+    fuzzy?: boolean;
+    /**
+     * Similarity threshold for fuzzy matching: 0.0–1.0.
+     * similarity = 1 - (editDistance / queryLength).
+     * Higher values require closer matches. Defaults to 0.6.
+     */
+    fuzzyThreshold?: number;
 }
 
-type PDFSearchViewerEventMap = {
-    /** Fired when PDF finishes loading. */
-    load: {
-        pageCount: number;
-    };
-    /** Fired when a search completes. */
-    search: {
-        query: string;
-        total: number;
-    };
-    /** Fired when active match changes (via next/prev). */
-    matchchange: {
-        current: number;
-        total: number;
-    };
-    /** Fired when zoom/scale changes. */
-    zoom: {
-        scale: number;
-    };
-    /** Fired on error. */
-    error: {
-        error: Error;
-        context: string;
-    };
-};
-
 /**
  * A single search match, potentially spanning multiple spans.
  * Each match contains an array of <mark> elements that highlight
@@ -116,6 +99,48 @@ interface PageData {
     /** All text spans on this page. */
     spans: SpanData[];
 }
+/**
+ * A single search context for multi-context search.
+ * Each context represents a separate query highlighted with a distinct color.
+ */
+interface SearchContext {
+    /** The query string to search for. */
+    query: string;
+    /** Optional per-context search options (overrides shared options). */
+    options?: SearchOptions;
+}
+
+type PDFSearchViewerEventMap = {
+    /** Fired when PDF finishes loading. */
+    load: {
+        pageCount: number;
+    };
+    /** Fired when a search completes. */
+    search: {
+        query: string;
+        total: number;
+    };
+    /** Fired when a multi-context search completes. */
+    searchmultiple: {
+        contexts: SearchContext[];
+        total: number;
+        totalsPerContext: number[];
+    };
+    /** Fired when active match changes (via next/prev). */
+    matchchange: {
+        current: number;
+        total: number;
+    };
+    /** Fired when zoom/scale changes. */
+    zoom: {
+        scale: number;
+    };
+    /** Fired on error. */
+    error: {
+        error: Error;
+        context: string;
+    };
+};
 
 type PDFSource = File | ArrayBuffer | Uint8Array | string;
 /**
@@ -144,6 +169,8 @@ declare class PDFSearchViewer extends EventEmitter<PDFSearchViewerEventMap> {
     private pageData;
     private lastQuery;
     private lastSearchOptions;
+    private lastContexts;
+    private lastIsMultiContext;
     private destroyed;
     constructor(container: HTMLElement, pdfjsLib: any, options?: PDFSearchViewerOptions);
     /**
@@ -155,6 +182,13 @@ declare class PDFSearchViewer extends EventEmitter<PDFSearchViewerEventMap> {
      * Clears previous highlights and creates new ones.
      */
     search(query: string, options?: SearchOptions): number;
+    /**
+     * Search for multiple query contexts across all pages.
+     * Each context is highlighted with a different color (highlight-0, highlight-1, ...).
+     * Navigation (nextMatch/prevMatch) cycles through ALL matches in document order.
+     * Returns total number of matches across all contexts.
+     */
+    searchMultiple(contexts: SearchContext[], sharedOptions?: SearchOptions): number;
     /**
      * Navigate to next match (wraps around).
      */
@@ -197,4 +231,4 @@ declare class PDFSearchViewer extends EventEmitter<PDFSearchViewerEventMap> {
     destroy(): void;
 }
 
-export { type ClassNames as C, EventEmitter as E, type PageData as P, type SearchOptions as S, type PDFSearchViewerOptions as a, type SpanData as b, type SearchMatch as c, PDFSearchViewer as d, type PDFSearchViewerEventMap as e, type PDFSource as f };
+export { type ClassNames as C, EventEmitter as E, type PageData as P, type SearchOptions as S, type SearchContext as a, type PDFSearchViewerOptions as b, type SpanData as c, type SearchMatch as d, PDFSearchViewer as e, type PDFSearchViewerEventMap as f, type PDFSource as g };