react-pdf-highlight-viewer 1.0.0

package/README.md

@@ -0,0 +1,345 @@
+# React PDF Highlighter
+
+A lightweight, production-ready React library for rendering PDFs with text highlighting support. Built on top of `react-pdf` with a simple, intuitive API.
+
+## Features
+
+✨ **Simple API** - Just pass a PDF file and an array of highlights  
+🎨 **Customizable Colors** - Set default or per-highlight colors  
+🔤 **Case-Insensitive Matching** - Optional case-insensitive text matching  
+📱 **Responsive** - Automatically adapts to container width  
+⚡ **Performance Optimized** - Efficient DOM manipulation and memoization  
+🔄 **Dynamic Updates** - Add/remove highlights on the fly  
+📦 **Lightweight** - Minimal bundle size with peer dependencies  
+🎯 **TypeScript Support** - Full type definitions included  
+
+## Installation
+
+```bash
+npm install react-pdf-highlight-viewer react react-dom react-pdf
+```
+
+### Peer Dependencies
+
+This library requires the following peer dependencies:
+
+- `react` ^19.2.0
+- `react-dom` ^19.2.0
+- `react-pdf` ^10.3.0
+
+## Quick Start
+
+```tsx
+import { PdfHighlighter } from 'react-pdf-highlight-viewer';
+import 'react-pdf-highlight-viewer/dist/react-pdf-highlight-viewer.css';
+
+function App() {
+  const highlights = [
+    { pageNumber: 1, content: "important text" },
+    { pageNumber: 2, content: "another highlight", color: "#ff0000" }
+  ];
+
+  return (
+    <PdfHighlighter 
+      file="https://example.com/document.pdf"
+      highlights={highlights}
+    />
+  );
+}
+```
+
+## API Reference
+
+### `<PdfHighlighter />`
+
+Main component for rendering PDFs with highlights.
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `file` | `string \| File \| null` | **required** | PDF source (URL, data URI, or File object) |
+| `highlights` | `Highlight[]` | `[]` | Array of text highlights to apply |
+| `width` | `number` | `undefined` | Page width in pixels (responsive if not set) |
+| `loading` | `React.ReactNode` | `<div>Loading PDF...</div>` | Custom loading component |
+| `defaultHighlightColor` | `string` | `'#ffeb3b'` | Default highlight background color |
+| `defaultCaseSensitive` | `boolean` | `true` | Default case sensitivity for all highlights |
+| `pageProps` | `Omit<PageProps, ...>` | `undefined` | Additional props to pass to each Page component |
+| `...documentProps` | `DocumentProps` | - | All other react-pdf Document props are supported |
+
+### `Highlight` Interface
+
+```typescript
+interface Highlight {
+  pageNumber: number;     // 1-indexed page number
+  content: string;        // Exact text to highlight
+  color?: string;         // Optional custom color (overrides default)
+  caseSensitive?: boolean; // Whether to match case-sensitively (default: true)
+}
+```
+
+## Usage Examples
+
+### Basic Highlighting
+
+```tsx
+import { PdfHighlighter } from 'npm-react-pdf-lib';
+import 'npm-react-pdf-lib/dist/npm-react-pdf-lib.css';
+
+function BasicExample() {
+  return (
+    <PdfHighlighter 
+      file="/path/to/document.pdf"
+      highlights={[
+        { pageNumber: 1, content: "Chapter 1" }
+      ]}
+    />
+  );
+}
+```
+
+### Custom Colors
+
+```tsx
+function ColorExample() {
+  return (
+    <PdfHighlighter 
+      file="/document.pdf"
+      defaultHighlightColor="#ffeb3b"  // Yellow default
+      highlights={[
+        { pageNumber: 1, content: "Important", color: "#ff0000" },  // Red
+        { pageNumber: 1, content: "Note", color: "#00ff00" },       // Green
+        { pageNumber: 2, content: "Warning" }                        // Uses default yellow
+      ]}
+    />
+  );
+}
+```
+
+### Case-Insensitive Matching
+
+```tsx
+function CaseInsensitiveExample() {
+  return (
+    <PdfHighlighter 
+      file="/document.pdf"
+      highlights={[
+        // Will match "Hello World", "HELLO WORLD", "hello world", etc.
+        { pageNumber: 1, content: "hello world", caseSensitive: false },
+        
+        // Case-sensitive (default behavior)
+        { pageNumber: 1, content: "Exact Match" },
+        
+        // Override default with custom color
+        { pageNumber: 2, content: "sample", caseSensitive: false, color: "#00ff00" }
+      ]}
+    />
+  );
+}
+
+// Set default case-insensitivity for all highlights
+function GlobalCaseInsensitive() {
+  return (
+    <PdfHighlighter 
+      file="/document.pdf"
+      defaultCaseSensitive={false}  // All highlights are case-insensitive by default
+      highlights={[
+        { pageNumber: 1, content: "sample text" },  // Case-insensitive
+        { pageNumber: 2, content: "another example" },  // Case-insensitive
+        // Override to be case-sensitive for this one
+        { pageNumber: 3, content: "ExactCase", caseSensitive: true }
+      ]}
+    />
+  );
+}
+```
+
+### Using React-PDF Props
+
+The component extends `react-pdf`'s `DocumentProps`, so you can pass any Document or Page props:
+
+```tsx
+function AdvancedExample() {
+  return (
+    <PdfHighlighter 
+      file="/document.pdf"
+      highlights={[{ pageNumber: 1, content: "highlight me" }]}
+      
+      // Document props (from react-pdf)
+      onLoadSuccess={(pdf) => console.log('Loaded', pdf.numPages, 'pages')}
+      onLoadError={(error) => console.error('Load error:', error)}
+      onSourceSuccess={() => console.log('Source loaded')}
+      
+      // Page props (applied to all pages)
+      pageProps={{
+        scale: 1.5,                    // Zoom level
+        renderTextLayer: true,         // Enable text selection
+        renderAnnotationLayer: false,  // Disable annotations
+        renderMode: 'canvas'           // Render mode: 'canvas' | 'svg'
+      }}
+    />
+  );
+}
+```
+
+### Dynamic Highlights
+
+```tsx
+function DynamicExample() {
+  const [highlights, setHighlights] = useState([]);
+
+  const addHighlight = (text) => {
+    setHighlights(prev => [...prev, { 
+      pageNumber: 1, 
+      content: text 
+    }]);
+  };
+
+  const clearHighlights = () => setHighlights([]);
+
+  return (
+    <div>
+      <button onClick={() => addHighlight("search term")}>
+        Add Highlight
+      </button>
+      <button onClick={clearHighlights}>
+        Clear All
+      </button>
+      <PdfHighlighter 
+        file="/document.pdf"
+        highlights={highlights}
+      />
+    </div>
+  );
+}
+```
+
+### With File Upload
+
+```tsx
+function FileUploadExample() {
+  const [file, setFile] = useState(null);
+
+  const handleFileChange = (e) => {
+    setFile(e.target.files[0]);
+  };
+
+  return (
+    <div>
+      <input type="file" accept=".pdf" onChange={handleFileChange} />
+      {file && (
+        <PdfHighlighter 
+          file={file}
+          highlights={[{ pageNumber: 1, content: "example" }]}
+        />
+      )}
+    </div>
+  );
+}
+```
+
+### Responsive Width
+
+```tsx
+function ResponsiveExample() {
+  return (
+    <div style={{ maxWidth: '800px', margin: '0 auto' }}>
+      {/* PDF will adapt to container width */}
+      <PdfHighlighter 
+        file="/document.pdf"
+        highlights={[]}
+      />
+    </div>
+  );
+}
+```
+
+### Fixed Width
+
+```tsx
+function FixedWidthExample() {
+  return (
+    <PdfHighlighter 
+      file="/document.pdf"
+      width={600}  // Fixed 600px width
+      highlights={[]}
+    />
+  );
+}
+```
+
+## Important Notes
+
+### Text Matching
+
+By default, the `content` field must **exactly match** the PDF's internal text representation:
+
+- ✅ Correct: `"Hello World"` (if PDF has this exact text)
+- ✅ Also works: `"hello world"` with `caseSensitive: false`
+- ❌ Wrong: `"Hello  World"` (extra space - whitespace must still match exactly)
+
+**Tips**: 
+- Use `caseSensitive: false` to ignore case differences
+- Copy text directly from the PDF viewer to ensure exact matching
+- Whitespace must always match exactly, even with case-insensitive mode
+
+### Whitespace Issues
+
+PDFs sometimes store text differently than it appears visually. If highlighting doesn't work:
+
+1. Open browser DevTools
+2. Inspect the PDF text layer
+3. Copy the exact text from the DOM
+4. Use that text in your `content` field
+
+Example:
+```tsx
+// Visual text: "purus aliquam"
+// PDF internal: "purusaliquam" (no space!)
+
+// Use the internal representation:
+{ pageNumber: 1, content: "purusaliquam" }
+```
+
+## Troubleshooting
+
+### Highlights Not Appearing
+
+1. **Check text matching**: Ensure `content` exactly matches PDF text
+2. **Verify page number**: Page numbers are 1-indexed (first page = 1)
+3. **Check console**: Look for errors or warnings
+4. **Inspect DOM**: Verify text exists in `.react-pdf__Page__textContent`
+
+### PDF Not Loading
+
+1. **CORS issues**: Ensure PDF URL allows cross-origin requests
+2. **File path**: Verify the file path or URL is correct
+3. **Worker error**: The library uses a CDN-hosted PDF.js worker by default
+
+### Performance Issues
+
+For large PDFs with many highlights:
+
+1. Limit visible pages (implement pagination)
+2. Debounce highlight updates
+3. Use `React.memo` on parent components
+
+## Browser Support
+
+- Chrome/Edge: ✅ Latest 2 versions
+- Firefox: ✅ Latest 2 versions  
+- Safari: ✅ Latest 2 versions
+
+## License
+
+MIT
+
+## Contributing
+
+Contributions are welcome! Please open an issue or PR on GitHub.
+
+## Credits
+
+Built with:
+- [react-pdf](https://github.com/wojtekmaj/react-pdf) - PDF rendering
+- [PDF.js](https://mozilla.github.io/pdf.js/) - PDF parsing (Mozilla)

package/dist/components/PdfHighlighter.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+import { PdfHighlighterProps } from '../types';
+/**
+ * PdfHighlighter - A React component for rendering PDFs with text highlighting
+ *
+ * @example
+ * ```tsx
+ * <PdfHighlighter
+ *   file="https://example.com/document.pdf"
+ *   highlights={[
+ *     { pageNumber: 1, content: "important text" }
+ *   ]}
+ * />
+ * ```
+ */
+export declare const PdfHighlighter: React.FC<PdfHighlighterProps>;

package/dist/components/__tests__/PdfHighlighter.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/__tests__/highlighting.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './components/PdfHighlighter';
+export type * from './types';

package/dist/react-pdf-highlight-viewer.css

@@ -0,0 +1 @@
+:root{--react-pdf-annotation-layer: 1;--annotation-unfocused-field-background: url("data:image/svg+xml;charset=UTF-8,<svg width='1px' height='1px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' style='fill:rgba(0, 54, 255, 0.13);'/></svg>");--input-focus-border-color: Highlight;--input-focus-outline: 1px solid Canvas;--input-unfocused-border-color: transparent;--input-disabled-border-color: transparent;--input-hover-border-color: black;--link-outline: none}@media screen and (forced-colors:active){:root{--input-focus-border-color: CanvasText;--input-unfocused-border-color: ActiveText;--input-disabled-border-color: GrayText;--input-hover-border-color: Highlight;--link-outline: 1.5px solid LinkText}.annotationLayer .textWidgetAnnotation :is(input,textarea):required,.annotationLayer .choiceWidgetAnnotation select:required,.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input:required{outline:1.5px solid selectedItem}.annotationLayer .linkAnnotation:hover{-webkit-backdrop-filter:invert(100%);backdrop-filter:invert(100%)}}.annotationLayer{position:absolute;top:0;left:0;pointer-events:none;transform-origin:0 0;z-index:3}.annotationLayer[data-main-rotation="90"] .norotate{transform:rotate(270deg) translate(-100%)}.annotationLayer[data-main-rotation="180"] .norotate{transform:rotate(180deg) translate(-100%,-100%)}.annotationLayer[data-main-rotation="270"] .norotate{transform:rotate(90deg) translateY(-100%)}.annotationLayer canvas{position:absolute;width:100%;height:100%}.annotationLayer section{position:absolute;text-align:initial;pointer-events:auto;box-sizing:border-box;margin:0;transform-origin:0 0}.annotationLayer .linkAnnotation{outline:var(--link-outline)}.textLayer.selecting~.annotationLayer section{pointer-events:none}.annotationLayer :is(.linkAnnotation,.buttonWidgetAnnotation.pushButton)>a{position:absolute;font-size:1em;top:0;left:0;width:100%;height:100%}.annotationLayer :is(.linkAnnotation,.buttonWidgetAnnotation.pushButton)>a:hover{opacity:.2;background:#ff0;box-shadow:0 2px 10px #ff0}.annotationLayer .textAnnotation img{position:absolute;cursor:pointer;width:100%;height:100%;top:0;left:0}.annotationLayer .textWidgetAnnotation :is(input,textarea),.annotationLayer .choiceWidgetAnnotation select,.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input{background-image:var(--annotation-unfocused-field-background);border:2px solid var(--input-unfocused-border-color);box-sizing:border-box;font:calc(9px * var(--total-scale-factor)) sans-serif;height:100%;margin:0;vertical-align:top;width:100%}.annotationLayer .textWidgetAnnotation :is(input,textarea):required,.annotationLayer .choiceWidgetAnnotation select:required,.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input:required{outline:1.5px solid red}.annotationLayer .choiceWidgetAnnotation select option{padding:0}.annotationLayer .buttonWidgetAnnotation.radioButton input{border-radius:50%}.annotationLayer .textWidgetAnnotation textarea{resize:none}.annotationLayer .textWidgetAnnotation :is(input,textarea)[disabled],.annotationLayer .choiceWidgetAnnotation select[disabled],.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input[disabled]{background:none;border:2px solid var(--input-disabled-border-color);cursor:not-allowed}.annotationLayer .textWidgetAnnotation :is(input,textarea):hover,.annotationLayer .choiceWidgetAnnotation select:hover,.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input:hover{border:2px solid var(--input-hover-border-color)}.annotationLayer .textWidgetAnnotation :is(input,textarea):hover,.annotationLayer .choiceWidgetAnnotation select:hover,.annotationLayer .buttonWidgetAnnotation.checkBox input:hover{border-radius:2px}.annotationLayer .textWidgetAnnotation :is(input,textarea):focus,.annotationLayer .choiceWidgetAnnotation select:focus{background:none;border:2px solid var(--input-focus-border-color);border-radius:2px;outline:var(--input-focus-outline)}.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) :focus{background-image:none;background-color:transparent}.annotationLayer .buttonWidgetAnnotation.checkBox :focus{border:2px solid var(--input-focus-border-color);border-radius:2px;outline:var(--input-focus-outline)}.annotationLayer .buttonWidgetAnnotation.radioButton :focus{border:2px solid var(--input-focus-border-color);outline:var(--input-focus-outline)}.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:before,.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:after,.annotationLayer .buttonWidgetAnnotation.radioButton input:checked:before{background-color:CanvasText;content:"";display:block;position:absolute}.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:before,.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:after{height:80%;left:45%;width:1px}.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:before{transform:rotate(45deg)}.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:after{transform:rotate(-45deg)}.annotationLayer .buttonWidgetAnnotation.radioButton input:checked:before{border-radius:50%;height:50%;left:30%;top:20%;width:50%}.annotationLayer .textWidgetAnnotation input.comb{font-family:monospace;padding-left:2px;padding-right:0}.annotationLayer .textWidgetAnnotation input.comb:focus{width:103%}.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input{appearance:none}.annotationLayer .popupTriggerArea{height:100%;width:100%}.annotationLayer .fileAttachmentAnnotation .popupTriggerArea{position:absolute}.annotationLayer .popupWrapper{position:absolute;font-size:calc(9px * var(--total-scale-factor));width:100%;min-width:calc(180px * var(--total-scale-factor));pointer-events:none}.annotationLayer .popup{position:absolute;max-width:calc(180px * var(--total-scale-factor));background-color:#ff9;box-shadow:0 calc(2px * var(--total-scale-factor)) calc(5px * var(--total-scale-factor)) #888;border-radius:calc(2px * var(--total-scale-factor));padding:calc(6px * var(--total-scale-factor));margin-left:calc(5px * var(--total-scale-factor));cursor:pointer;font:message-box;white-space:normal;word-wrap:break-word;pointer-events:auto}.annotationLayer .popup>*{font-size:calc(9px * var(--total-scale-factor))}.annotationLayer .popup h1{display:inline-block}.annotationLayer .popupDate{display:inline-block;margin-left:calc(5px * var(--total-scale-factor))}.annotationLayer .popupContent{border-top:1px solid rgba(51,51,51,1);margin-top:calc(2px * var(--total-scale-factor));padding-top:calc(2px * var(--total-scale-factor))}.annotationLayer .richText>*{white-space:pre-wrap;font-size:calc(9px * var(--total-scale-factor))}.annotationLayer .highlightAnnotation,.annotationLayer .underlineAnnotation,.annotationLayer .squigglyAnnotation,.annotationLayer .strikeoutAnnotation,.annotationLayer .freeTextAnnotation,.annotationLayer .lineAnnotation svg line,.annotationLayer .squareAnnotation svg rect,.annotationLayer .circleAnnotation svg ellipse,.annotationLayer .polylineAnnotation svg polyline,.annotationLayer .polygonAnnotation svg polygon,.annotationLayer .caretAnnotation,.annotationLayer .inkAnnotation svg polyline,.annotationLayer .stampAnnotation,.annotationLayer .fileAttachmentAnnotation{cursor:pointer}.annotationLayer section svg{position:absolute;width:100%;height:100%;top:0;left:0}.annotationLayer .annotationTextContent{position:absolute;width:100%;height:100%;opacity:0;color:transparent;-webkit-user-select:none;user-select:none;pointer-events:none}.annotationLayer .annotationTextContent span{width:100%;display:inline-block}:root{--react-pdf-text-layer: 1;--highlight-bg-color: rgba(180, 0, 170, 1);--highlight-selected-bg-color: rgba(0, 100, 0, 1)}@media screen and (forced-colors:active){:root{--highlight-bg-color: Highlight;--highlight-selected-bg-color: ButtonText}}[data-main-rotation="90"]{transform:rotate(90deg) translateY(-100%)}[data-main-rotation="180"]{transform:rotate(180deg) translate(-100%,-100%)}[data-main-rotation="270"]{transform:rotate(270deg) translate(-100%)}.textLayer{position:absolute;text-align:initial;inset:0;overflow:hidden;line-height:1;text-size-adjust:none;forced-color-adjust:none;transform-origin:0 0;z-index:2}.textLayer :is(span,br){color:transparent;position:absolute;white-space:pre;cursor:text;margin:0;transform-origin:0 0}.textLayer span.markedContent{top:0;height:0}.textLayer .highlight{margin:-1px;padding:1px;background-color:var(--highlight-bg-color);border-radius:4px}.textLayer .highlight.appended{position:initial}.textLayer .highlight.begin{border-radius:4px 0 0 4px}.textLayer .highlight.end{border-radius:0 4px 4px 0}.textLayer .highlight.middle{border-radius:0}.textLayer .highlight.selected{background-color:var(--highlight-selected-bg-color)}.textLayer br::selection{background:transparent}.textLayer .endOfContent{display:block;position:absolute;inset:100% 0 0;z-index:-1;cursor:default;-webkit-user-select:none;user-select:none}.textLayer.selecting .endOfContent{top:0}.hiddenCanvasElement{position:absolute;top:0;left:0;width:0;height:0;display:none}

package/dist/react-pdf-highlighter.es.js

@@ -0,0 +1,372 @@
+import ae, { useState as te, useCallback as ne, useMemo as se, useRef as B, useEffect as Z } from "react";
+import { pdfjs as Q, Document as ce, Page as le } from "react-pdf";
+var W = { exports: {} }, Y = {};
+var K;
+function ue() {
+  if (K) return Y;
+  K = 1;
+  var c = /* @__PURE__ */ Symbol.for("react.transitional.element"), v = /* @__PURE__ */ Symbol.for("react.fragment");
+  function f(_, a, l) {
+    var u = null;
+    if (l !== void 0 && (u = "" + l), a.key !== void 0 && (u = "" + a.key), "key" in a) {
+      l = {};
+      for (var d in a)
+        d !== "key" && (l[d] = a[d]);
+    } else l = a;
+    return a = l.ref, {
+      $$typeof: c,
+      type: _,
+      key: u,
+      ref: a !== void 0 ? a : null,
+      props: l
+    };
+  }
+  return Y.Fragment = v, Y.jsx = f, Y.jsxs = f, Y;
+}
+var $ = {};
+var ee;
+function ie() {
+  return ee || (ee = 1, process.env.NODE_ENV !== "production" && (function() {
+    function c(e) {
+      if (e == null) return null;
+      if (typeof e == "function")
+        return e.$$typeof === O ? null : e.displayName || e.name || null;
+      if (typeof e == "string") return e;
+      switch (e) {
+        case i:
+          return "Fragment";
+        case z:
+          return "Profiler";
+        case T:
+          return "StrictMode";
+        case h:
+          return "Suspense";
+        case V:
+          return "SuspenseList";
+        case R:
+          return "Activity";
+      }
+      if (typeof e == "object")
+        switch (typeof e.tag == "number" && console.error(
+          "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
+        ), e.$$typeof) {
+          case I:
+            return "Portal";
+          case G:
+            return e.displayName || "Context";
+          case M:
+            return (e._context.displayName || "Context") + ".Consumer";
+          case J:
+            var r = e.render;
+            return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
+          case A:
+            return r = e.displayName || null, r !== null ? r : c(e.type) || "Memo";
+          case p:
+            r = e._payload, e = e._init;
+            try {
+              return c(e(r));
+            } catch {
+            }
+        }
+      return null;
+    }
+    function v(e) {
+      return "" + e;
+    }
+    function f(e) {
+      try {
+        v(e);
+        var r = !1;
+      } catch {
+        r = !0;
+      }
+      if (r) {
+        r = console;
+        var t = r.error, n = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return t.call(
+          r,
+          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
+          n
+        ), v(e);
+      }
+    }
+    function _(e) {
+      if (e === i) return "<>";
+      if (typeof e == "object" && e !== null && e.$$typeof === p)
+        return "<...>";
+      try {
+        var r = c(e);
+        return r ? "<" + r + ">" : "<...>";
+      } catch {
+        return "<...>";
+      }
+    }
+    function a() {
+      var e = j.A;
+      return e === null ? null : e.getOwner();
+    }
+    function l() {
+      return Error("react-stack-top-frame");
+    }
+    function u(e) {
+      if (w.call(e, "key")) {
+        var r = Object.getOwnPropertyDescriptor(e, "key").get;
+        if (r && r.isReactWarning) return !1;
+      }
+      return e.key !== void 0;
+    }
+    function d(e, r) {
+      function t() {
+        C || (C = !0, console.error(
+          "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
+          r
+        ));
+      }
+      t.isReactWarning = !0, Object.defineProperty(e, "key", {
+        get: t,
+        configurable: !0
+      });
+    }
+    function g() {
+      var e = c(this.type);
+      return N[e] || (N[e] = !0, console.error(
+        "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
+      )), e = this.props.ref, e !== void 0 ? e : null;
+    }
+    function x(e, r, t, n, q, H) {
+      var o = t.ref;
+      return e = {
+        $$typeof: U,
+        type: e,
+        key: r,
+        props: t,
+        _owner: n
+      }, (o !== void 0 ? o : null) !== null ? Object.defineProperty(e, "ref", {
+        enumerable: !1,
+        get: g
+      }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: 0
+      }), Object.defineProperty(e, "_debugInfo", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: null
+      }), Object.defineProperty(e, "_debugStack", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: q
+      }), Object.defineProperty(e, "_debugTask", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: H
+      }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
+    }
+    function k(e, r, t, n, q, H) {
+      var o = r.children;
+      if (o !== void 0)
+        if (n)
+          if (D(o)) {
+            for (n = 0; n < o.length; n++)
+              E(o[n]);
+            Object.freeze && Object.freeze(o);
+          } else
+            console.error(
+              "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
+            );
+        else E(o);
+      if (w.call(r, "key")) {
+        o = c(e);
+        var S = Object.keys(r).filter(function(oe) {
+          return oe !== "key";
+        });
+        n = 0 < S.length ? "{key: someKey, " + S.join(": ..., ") + ": ...}" : "{key: someKey}", b[o + n] || (S = 0 < S.length ? "{" + S.join(": ..., ") + ": ...}" : "{}", console.error(
+          `A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,
+          n,
+          o,
+          S,
+          o
+        ), b[o + n] = !0);
+      }
+      if (o = null, t !== void 0 && (f(t), o = "" + t), u(r) && (f(r.key), o = "" + r.key), "key" in r) {
+        t = {};
+        for (var X in r)
+          X !== "key" && (t[X] = r[X]);
+      } else t = r;
+      return o && d(
+        t,
+        typeof e == "function" ? e.displayName || e.name || "Unknown" : e
+      ), x(
+        e,
+        o,
+        t,
+        a(),
+        q,
+        H
+      );
+    }
+    function E(e) {
+      s(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === p && (e._payload.status === "fulfilled" ? s(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
+    }
+    function s(e) {
+      return typeof e == "object" && e !== null && e.$$typeof === U;
+    }
+    var m = ae, U = /* @__PURE__ */ Symbol.for("react.transitional.element"), I = /* @__PURE__ */ Symbol.for("react.portal"), i = /* @__PURE__ */ Symbol.for("react.fragment"), T = /* @__PURE__ */ Symbol.for("react.strict_mode"), z = /* @__PURE__ */ Symbol.for("react.profiler"), M = /* @__PURE__ */ Symbol.for("react.consumer"), G = /* @__PURE__ */ Symbol.for("react.context"), J = /* @__PURE__ */ Symbol.for("react.forward_ref"), h = /* @__PURE__ */ Symbol.for("react.suspense"), V = /* @__PURE__ */ Symbol.for("react.suspense_list"), A = /* @__PURE__ */ Symbol.for("react.memo"), p = /* @__PURE__ */ Symbol.for("react.lazy"), R = /* @__PURE__ */ Symbol.for("react.activity"), O = /* @__PURE__ */ Symbol.for("react.client.reference"), j = m.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, w = Object.prototype.hasOwnProperty, D = Array.isArray, y = console.createTask ? console.createTask : function() {
+      return null;
+    };
+    m = {
+      react_stack_bottom_frame: function(e) {
+        return e();
+      }
+    };
+    var C, N = {}, F = m.react_stack_bottom_frame.bind(
+      m,
+      l
+    )(), L = y(_(l)), b = {};
+    $.Fragment = i, $.jsx = function(e, r, t) {
+      var n = 1e4 > j.recentlyCreatedOwnerStacks++;
+      return k(
+        e,
+        r,
+        t,
+        !1,
+        n ? Error("react-stack-top-frame") : F,
+        n ? y(_(e)) : L
+      );
+    }, $.jsxs = function(e, r, t) {
+      var n = 1e4 > j.recentlyCreatedOwnerStacks++;
+      return k(
+        e,
+        r,
+        t,
+        !0,
+        n ? Error("react-stack-top-frame") : F,
+        n ? y(_(e)) : L
+      );
+    };
+  })()), $;
+}
+var re;
+function fe() {
+  return re || (re = 1, process.env.NODE_ENV === "production" ? W.exports = ue() : W.exports = ie()), W.exports;
+}
+var P = fe();
+Q.GlobalWorkerOptions.workerSrc = `https://unpkg.com/pdfjs-dist@${Q.version}/build/pdf.worker.min.mjs`;
+const _e = ({
+  file: c,
+  highlights: v = [],
+  width: f,
+  loading: _,
+  defaultHighlightColor: a = "#ffeb3b",
+  defaultCaseSensitive: l = !0,
+  pageProps: u,
+  // Destructure all other DocumentProps to pass through
+  ...d
+}) => {
+  const [g, x] = te(0), k = ne(({ numPages: s }) => {
+    x(s);
+  }, []), E = se(
+    () => Array.from({ length: g }, (s, m) => m + 1),
+    [g]
+  );
+  return /* @__PURE__ */ P.jsx("div", { className: "pdf-highlighter-container", "data-testid": "pdf-highlighter-container", children: /* @__PURE__ */ P.jsx(
+    ce,
+    {
+      file: c,
+      onLoadSuccess: k,
+      loading: _ || /* @__PURE__ */ P.jsx("div", { children: "Loading PDF..." }),
+      ...d,
+      children: E.map((s) => /* @__PURE__ */ P.jsx(
+        de,
+        {
+          pageNumber: s,
+          width: f,
+          highlights: v,
+          defaultColor: a,
+          defaultCaseSensitive: l,
+          pageProps: u
+        },
+        `page_${s}`
+      ))
+    }
+  ) });
+}, de = ({
+  pageNumber: c,
+  width: v,
+  highlights: f,
+  defaultColor: _,
+  defaultCaseSensitive: a,
+  pageProps: l
+}) => {
+  const u = B(null), [d, g] = te(!1), x = B(/* @__PURE__ */ new Map()), k = ne(() => {
+    setTimeout(() => {
+      g(!0);
+    }, 100);
+  }, []);
+  return Z(() => {
+    if (!d || !u.current) return;
+    const E = u.current.querySelector(".react-pdf__Page__textContent");
+    if (!E) return;
+    const s = Array.from(E.querySelectorAll('span[role="presentation"]'));
+    x.current.size === 0 && s.forEach((m) => {
+      x.current.set(m, m.textContent || "");
+    });
+  }, [d]), Z(() => {
+    if (!d || !u.current) return;
+    const E = u.current.querySelector(".react-pdf__Page__textContent");
+    if (!E) return;
+    const s = Array.from(E.querySelectorAll('span[role="presentation"]'));
+    if (s.length === 0 || (s.forEach((i) => {
+      const T = x.current.get(i);
+      T !== void 0 && (i.innerHTML = "", i.appendChild(document.createTextNode(T)));
+    }), !f || f.length === 0)) return;
+    const m = f.filter((i) => i.pageNumber === c);
+    if (m.length === 0) return;
+    const I = s.map((i) => i.textContent || "").join("");
+    m.forEach((i) => {
+      const { content: T, color: z, caseSensitive: M } = i;
+      if (!T) return;
+      const G = M !== void 0 ? M : a, J = z || _;
+      let h;
+      if (G)
+        h = I.indexOf(T);
+      else {
+        const p = I.toLowerCase(), R = T.toLowerCase();
+        h = p.indexOf(R);
+      }
+      if (h === -1) return;
+      const V = h + T.length;
+      let A = 0;
+      s.forEach((p) => {
+        const R = p.textContent || "", O = A, j = A + R.length, w = Math.max(h, O), D = Math.min(V, j);
+        if (w < D) {
+          const y = w - O, C = D - O, N = R.slice(0, y), F = R.slice(y, C), L = R.slice(C);
+          p.innerHTML = "", N && p.appendChild(document.createTextNode(N));
+          const b = document.createElement("mark");
+          b.style.backgroundColor = J, b.style.color = "#000", b.textContent = F, p.appendChild(b), L && p.appendChild(document.createTextNode(L));
+        }
+        A += R.length;
+      });
+    });
+  }, [d, f, c, _, a]), /* @__PURE__ */ P.jsx("div", { ref: u, "data-testid": `pdf-page-highlighter-${c}`, children: /* @__PURE__ */ P.jsx(
+    le,
+    {
+      pageNumber: c,
+      width: v,
+      onGetTextSuccess: k,
+      ...l
+    }
+  ) });
+};
+export {
+  _e as PdfHighlighter
+};

package/dist/react-pdf-highlighter.umd.js

@@ -0,0 +1,6 @@
+(function(v,c){typeof exports=="object"&&typeof module<"u"?c(exports,require("react"),require("react-pdf")):typeof define=="function"&&define.amd?define(["exports","react","react-pdf"],c):(v=typeof globalThis<"u"?globalThis:v||self,c(v.ReactPdfHighlighter={},v.React,v.ReactPDF))})(this,(function(v,c,F){"use strict";var W={exports:{}},A={};var K;function re(){if(K)return A;K=1;var l=Symbol.for("react.transitional.element"),g=Symbol.for("react.fragment");function d(E,a,i){var u=null;if(i!==void 0&&(u=""+i),a.key!==void 0&&(u=""+a.key),"key"in a){i={};for(var m in a)m!=="key"&&(i[m]=a[m])}else i=a;return a=i.ref,{$$typeof:l,type:E,key:u,ref:a!==void 0?a:null,props:i}}return A.Fragment=g,A.jsx=d,A.jsxs=d,A}var w={};var ee;function ne(){return ee||(ee=1,process.env.NODE_ENV!=="production"&&(function(){function l(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===N?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case f:return"Fragment";case X:return"Profiler";case T:return"StrictMode";case b:return"Suspense";case Z:return"SuspenseList";case h:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case U:return"Portal";case q:return e.displayName||"Context";case H:return(e._context.displayName||"Context")+".Consumer";case B:var t=e.render;return e=e.displayName,e||(e=t.displayName||t.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case C:return t=e.displayName||null,t!==null?t:l(e.type)||"Memo";case _:t=e._payload,e=e._init;try{return l(e(t))}catch{}}return null}function g(e){return""+e}function d(e){try{g(e);var t=!1}catch{t=!0}if(t){t=console;var r=t.error,n=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return r.call(t,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",n),g(e)}}function E(e){if(e===f)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===_)return"<...>";try{var t=l(e);return t?"<"+t+">":"<...>"}catch{return"<...>"}}function a(){var e=L.A;return e===null?null:e.getOwner()}function i(){return Error("react-stack-top-frame")}function u(e){if(Y.call(e,"key")){var t=Object.getOwnPropertyDescriptor(e,"key").get;if(t&&t.isReactWarning)return!1}return e.key!==void 0}function m(e,t){function r(){I||(I=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",t))}r.isReactWarning=!0,Object.defineProperty(e,"key",{get:r,configurable:!0})}function S(){var e=l(this.type);return M[e]||(M[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function x(e,t,r,n,J,Q){var o=r.ref;return e={$$typeof:V,type:e,key:t,props:r,_owner:n},(o!==void 0?o:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:S}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:J}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:Q}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function P(e,t,r,n,J,Q){var o=t.children;if(o!==void 0)if(n)if(z(o)){for(n=0;n<o.length;n++)R(o[n]);Object.freeze&&Object.freeze(o)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else R(o);if(Y.call(t,"key")){o=l(e);var O=Object.keys(t).filter(function(ce){return ce!=="key"});n=0<O.length?"{key: someKey, "+O.join(": ..., ")+": ...}":"{key: someKey}",y[o+n]||(O=0<O.length?"{"+O.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,n,o,O,o),y[o+n]=!0)}if(o=null,r!==void 0&&(d(r),o=""+r),u(t)&&(d(t.key),o=""+t.key),"key"in t){r={};for(var $ in t)$!=="key"&&(r[$]=t[$])}else r=t;return o&&m(r,typeof e=="function"?e.displayName||e.name||"Unknown":e),x(e,o,r,a(),J,Q)}function R(e){s(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===_&&(e._payload.status==="fulfilled"?s(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function s(e){return typeof e=="object"&&e!==null&&e.$$typeof===V}var p=c,V=Symbol.for("react.transitional.element"),U=Symbol.for("react.portal"),f=Symbol.for("react.fragment"),T=Symbol.for("react.strict_mode"),X=Symbol.for("react.profiler"),H=Symbol.for("react.consumer"),q=Symbol.for("react.context"),B=Symbol.for("react.forward_ref"),b=Symbol.for("react.suspense"),Z=Symbol.for("react.suspense_list"),C=Symbol.for("react.memo"),_=Symbol.for("react.lazy"),h=Symbol.for("react.activity"),N=Symbol.for("react.client.reference"),L=p.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,Y=Object.prototype.hasOwnProperty,z=Array.isArray,j=console.createTask?console.createTask:function(){return null};p={react_stack_bottom_frame:function(e){return e()}};var I,M={},G=p.react_stack_bottom_frame.bind(p,i)(),D=j(E(i)),y={};w.Fragment=f,w.jsx=function(e,t,r){var n=1e4>L.recentlyCreatedOwnerStacks++;return P(e,t,r,!1,n?Error("react-stack-top-frame"):G,n?j(E(e)):D)},w.jsxs=function(e,t,r){var n=1e4>L.recentlyCreatedOwnerStacks++;return P(e,t,r,!0,n?Error("react-stack-top-frame"):G,n?j(E(e)):D)}})()),w}var te;function oe(){return te||(te=1,process.env.NODE_ENV==="production"?W.exports=re():W.exports=ne()),W.exports}var k=oe();F.pdfjs.GlobalWorkerOptions.workerSrc=`https://unpkg.com/pdfjs-dist@${F.pdfjs.version}/build/pdf.worker.min.mjs`;const ae=({file:l,highlights:g=[],width:d,loading:E,defaultHighlightColor:a="#ffeb3b",defaultCaseSensitive:i=!0,pageProps:u,...m})=>{const[S,x]=c.useState(0),P=c.useCallback(({numPages:s})=>{x(s)},[]),R=c.useMemo(()=>Array.from({length:S},(s,p)=>p+1),[S]);return k.jsx("div",{className:"pdf-highlighter-container","data-testid":"pdf-highlighter-container",children:k.jsx(F.Document,{file:l,onLoadSuccess:P,loading:E||k.jsx("div",{children:"Loading PDF..."}),...m,children:R.map(s=>k.jsx(se,{pageNumber:s,width:d,highlights:g,defaultColor:a,defaultCaseSensitive:i,pageProps:u},`page_${s}`))})})},se=({pageNumber:l,width:g,highlights:d,defaultColor:E,defaultCaseSensitive:a,pageProps:i})=>{const u=c.useRef(null),[m,S]=c.useState(!1),x=c.useRef(new Map),P=c.useCallback(()=>{setTimeout(()=>{S(!0)},100)},[]);return c.useEffect(()=>{if(!m||!u.current)return;const R=u.current.querySelector(".react-pdf__Page__textContent");if(!R)return;const s=Array.from(R.querySelectorAll('span[role="presentation"]'));x.current.size===0&&s.forEach(p=>{x.current.set(p,p.textContent||"")})},[m]),c.useEffect(()=>{if(!m||!u.current)return;const R=u.current.querySelector(".react-pdf__Page__textContent");if(!R)return;const s=Array.from(R.querySelectorAll('span[role="presentation"]'));if(s.length===0||(s.forEach(f=>{const T=x.current.get(f);T!==void 0&&(f.innerHTML="",f.appendChild(document.createTextNode(T)))}),!d||d.length===0))return;const p=d.filter(f=>f.pageNumber===l);if(p.length===0)return;const U=s.map(f=>f.textContent||"").join("");p.forEach(f=>{const{content:T,color:X,caseSensitive:H}=f;if(!T)return;const q=H!==void 0?H:a,B=X||E;let b;if(q)b=U.indexOf(T);else{const _=U.toLowerCase(),h=T.toLowerCase();b=_.indexOf(h)}if(b===-1)return;const Z=b+T.length;let C=0;s.forEach(_=>{const h=_.textContent||"",N=C,L=C+h.length,Y=Math.max(b,N),z=Math.min(Z,L);if(Y<z){const j=Y-N,I=z-N,M=h.slice(0,j),G=h.slice(j,I),D=h.slice(I);_.innerHTML="",M&&_.appendChild(document.createTextNode(M));const y=document.createElement("mark");y.style.backgroundColor=B,y.style.color="#000",y.textContent=G,_.appendChild(y),D&&_.appendChild(document.createTextNode(D))}C+=h.length})})},[m,d,l,E,a]),k.jsx("div",{ref:u,"data-testid":`pdf-page-highlighter-${l}`,children:k.jsx(F.Page,{pageNumber:l,width:g,onGetTextSuccess:P,...i})})};v.PdfHighlighter=ae,Object.defineProperty(v,Symbol.toStringTag,{value:"Module"})}));

package/dist/types.d.ts

@@ -0,0 +1,71 @@
+import { DocumentProps, PageProps } from 'react-pdf';
+/**
+ * Represents a text highlight in a PDF document
+ */
+export interface Highlight {
+    /**
+     * The page number where the highlight should appear (1-indexed)
+     */
+    pageNumber: number;
+    /**
+     * The exact text content to highlight
+     * Note: Must match the PDF's internal text representation exactly (unless caseSensitive is false)
+     */
+    content: string;
+    /**
+     * Optional custom background color for this highlight
+     * @default '#ffeb3b' (yellow)
+     */
+    color?: string;
+    /**
+     * Whether to match text case-sensitively
+     * @default true
+     */
+    caseSensitive?: boolean;
+}
+/**
+ * Props for the PdfHighlighter component
+ * Extends react-pdf's DocumentProps to allow full customization
+ */
+export interface PdfHighlighterProps extends Omit<DocumentProps, 'children'> {
+    /**
+     * Source of the PDF file
+     * Can be a URL string, base64 data URI, or File object
+     * @example "https://example.com/document.pdf"
+     * @example "data:application/pdf;base64,..."
+     */
+    file: string | File | null;
+    /**
+     * Array of text highlights to apply to the PDF
+     * @default []
+     */
+    highlights?: Highlight[];
+    /**
+     * Width of the PDF pages in pixels
+     * If not provided, pages will be responsive
+     * @default undefined (responsive)
+     */
+    width?: number;
+    /**
+     * Custom loading component to display while PDF is loading
+     * @default <div>Loading PDF...</div>
+     */
+    loading?: React.ReactNode;
+    /**
+     * Default highlight color for all highlights
+     * Individual highlights can override this with their own color
+     * @default '#ffeb3b' (yellow)
+     */
+    defaultHighlightColor?: string;
+    /**
+     * Default case sensitivity for all highlights
+     * Individual highlights can override this with their own caseSensitive property
+     * @default true
+     */
+    defaultCaseSensitive?: boolean;
+    /**
+     * Additional props to pass to each Page component
+     * Allows customization of page rendering (scale, renderMode, etc.)
+     */
+    pageProps?: Omit<PageProps, 'pageNumber' | 'width' | 'onGetTextSuccess'>;
+}

package/dist/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/package.json

@@ -0,0 +1,84 @@
+{
+  "name": "react-pdf-highlight-viewer",
+  "version": "1.0.0",
+  "description": "A lightweight React library for rendering PDFs with text highlighting support",
+  "keywords": [
+    "react",
+    "pdf",
+    "highlight",
+    "viewer",
+    "react-pdf",
+    "pdf-highlighter",
+    "text-highlight",
+    "document-viewer"
+  ],
+  "author": "Sivakkannan R",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/sivakannan/react-pdf-highlight-viewer"
+  },
+  "bugs": {
+    "url": "https://github.com/sivakannan/react-pdf-highlight-viewer/issues"
+  },
+  "homepage": "https://github.com/sivakannan/react-pdf-highlight-viewer#readme",
+  "private": false,
+  "type": "module",
+  "main": "./dist/react-pdf-highlighter.umd.js",
+  "module": "./dist/react-pdf-highlighter.es.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/react-pdf-highlighter.es.js",
+      "require": "./dist/react-pdf-highlighter.umd.js"
+    },
+    "./dist/npm-react-pdf-lib.css": "./dist/npm-react-pdf-lib.css"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "test:ui": "vitest --ui",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-pdf": "^10.3.0"
+  },
+  "dependencies": {
+    "prop-types": "^15.8.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "@vitest/coverage-v8": "^4.0.18",
+    "@vitest/ui": "^4.0.18",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "happy-dom": "^20.5.3",
+    "jsdom": "^27.0.1",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.46.4",
+    "vite": "^7.2.4",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^4.0.18"
+  }
+}