pdf-search-highlight 0.2.2 → 0.3.1

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 or fuzzy (approximate) 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.
 
@@ -15,6 +15,7 @@ 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
@@ -52,6 +53,19 @@ 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();
@@ -76,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();
@@ -87,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));
@@ -101,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>
@@ -139,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' }}
@@ -149,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')
 }
@@ -161,18 +199,20 @@ function App() {
 | Export | Description |
 |---|---|
 | `PDFRenderer` | Renders PDF pages into a container (canvas + text layer) |
-| `SearchController` | Headless search + highlight controller |
-| `PDFSearchViewer` | All-in-one: render + search + highlight + zoom + download |
+| `SearchController` | Headless search + highlight controller. `search()` for single query, `searchMultiple()` for multi-context |
+| `PDFSearchViewer` | All-in-one: render + search + highlight + zoom + download. `search()` + `searchMultiple()` |
 | `searchPage` | Low-level: search spans with flexible regex |
 | `HighlightManager` | Low-level: apply/clear highlights on spans |
+| `SearchContext` | Type: `{ query: string; options?: SearchOptions }` — used with `searchMultiple()` |
 
 ### React (`pdf-search-highlight/react`)
 
 | 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 }` |
-| `PDFSearchViewer` | All-in-one component with ref handle for imperative control |
+| `useSearchController(pages, options?)` | Hook: search + highlight, returns `{ search, searchMultiple, next, prev, goTo, clear, current, total }` |
+| `PDFSearchViewer` | All-in-one component. Props: `searchQuery` (single) or `searchContexts` (multi). Ref handle: `nextMatch`, `prevMatch`, `searchMultiple`, `clearSearch`, ... |
+| `SearchContext` | Type re-exported from core |
 
 ### PDFRenderer
 
@@ -200,17 +240,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)
@@ -219,10 +270,21 @@ search.query    // last query
 const viewer = new PDFSearchViewer(container, pdfjsLib, options);
 
 await viewer.loadPDF(source);
+
+// Single search
 viewer.search('query', { caseSensitive: true });
-viewer.nextMatch();
-viewer.prevMatch();
-viewer.clearSearch();
+
+// Multi-context search — each context highlighted with a different color
+viewer.searchMultiple([
+  { query: 'contract' },
+  { query: 'payment' },
+  { query: 'deadline', options: { fuzzy: true } },
+]);
+
+// Navigation — works for both single and multi-context
+viewer.nextMatch();                        // Next match (all contexts, document order)
+viewer.prevMatch();                        // Previous match
+viewer.clearSearch();                      // Clear all highlights
 
 await viewer.zoomIn();                     // Zoom in by 0.25
 await viewer.zoomOut();                    // Zoom out by 0.25
@@ -233,6 +295,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 }
@@ -256,8 +319,42 @@ interface SearchOptions {
   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:
@@ -279,12 +376,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
@@ -294,8 +402,9 @@ Default styles:
 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. **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. **Navigate**: Prev/next with wrap-around, auto-scroll to active match
-7. **Zoom**: Re-renders all pages at new scale, search highlights are automatically re-applied
+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-rNp5NirR.d.cts → PDFSearchViewer-DkU4bVBD.d.cts}

@@ -36,6 +36,8 @@ interface PDFSearchViewerOptions {
     workerSrc?: string;
     /** Gap in pixels between rendered pages. Defaults to 20. */
     pageGap?: number;
+    /** Auto-scroll to active match on search/next/prev. Defaults to true. */
+    autoScroll?: boolean;
     /**
      * Custom CSS class names for viewer elements.
      * Override any or all to apply your own styles.
@@ -70,32 +72,6 @@ interface SearchOptions {
     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
@@ -125,6 +101,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;
 /**
@@ -153,6 +171,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);
     /**
@@ -164,6 +184,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).
      */
@@ -206,4 +233,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-rNp5NirR.d.ts → PDFSearchViewer-DkU4bVBD.d.ts}

@@ -36,6 +36,8 @@ interface PDFSearchViewerOptions {
     workerSrc?: string;
     /** Gap in pixels between rendered pages. Defaults to 20. */
     pageGap?: number;
+    /** Auto-scroll to active match on search/next/prev. Defaults to true. */
+    autoScroll?: boolean;
     /**
      * Custom CSS class names for viewer elements.
      * Override any or all to apply your own styles.
@@ -70,32 +72,6 @@ interface SearchOptions {
     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
@@ -125,6 +101,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;
 /**
@@ -153,6 +171,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);
     /**
@@ -164,6 +184,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).
      */
@@ -206,4 +233,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 };