@pdf-viewer/react 1.3.0 → 1.4.0-beta.1

package/dist/contexts/ThumbnailsContext.js

@@ -1,6 +1,6 @@
 import "react/jsx-runtime";
 import "react";
-import { l as i, T as r, m as e } from "../RPDefaultLayout-6fe6be3d.js";
+import { l as i, T as r, m as e } from "../RPDefaultLayout-838ad8e8.js";
 export {
   i as ThumbnailContext,
   r as ThumbnailProvider,

package/dist/main.js

@@ -1,42 +1,44 @@
 import { RPProvider as t } from "./components/RPProvider.js";
-import { b as x, R as n, c as s, u as m, d as p, e as f } from "./RPDefaultLayout-6fe6be3d.js";
+import { b as x, R as n, c as s, u as m, d as p, e as f } from "./RPDefaultLayout-838ad8e8.js";
 import { RPConfig as a } from "./components/RPConfig.js";
-import { RPController as i } from "./components/RPController.js";
+import { RPController as l } from "./components/RPController.js";
 import { RPTheme as P } from "./components/RPTheme.js";
 import { RPDropFileZone as d } from "./components/RPDropFileZone.js";
 import { useDarkModeContext as D } from "./contexts/DarkModeContext.js";
-import { useDocumentContext as M } from "./contexts/RPDocumentContext.js";
-import { useRotationContext as g } from "./contexts/RotationContext.js";
-import { useViewModeContext as L } from "./contexts/ViewModeContext.js";
-import { useDropFileZoneContext as h } from "./contexts/DropFileZoneContext.js";
+import { useDocumentContext as F } from "./contexts/RPDocumentContext.js";
+import { useRotationContext as M } from "./contexts/RotationContext.js";
+import { useViewModeContext as w } from "./contexts/ViewModeContext.js";
+import { useDropFileZoneContext as S } from "./contexts/DropFileZoneContext.js";
 import { useOpenFileContext as V } from "./contexts/FileInputContext.js";
 import { useZoomContext as k } from "./contexts/ZoomContext.js";
-import { usePdfProperties as O } from "./utils/hooks/usePdfProperties.js";
-import { useFullScreenContext as j } from "./contexts/FullScreenContext.js";
-import { Locales as z, ScrollMode as A, ViewMode as B, ZoomLevel as E } from "./utils/types.js";
+import { useHighlightContext as H } from "./contexts/HighlightContext.js";
+import { usePdfProperties as T } from "./utils/hooks/usePdfProperties.js";
+import { useFullScreenContext as q } from "./contexts/FullScreenContext.js";
+import { Locales as A, ScrollMode as B, ViewMode as E, ZoomLevel as G } from "./utils/types.js";
 export {
-  z as Locales,
+  A as Locales,
   a as RPConfig,
-  i as RPController,
+  l as RPController,
   x as RPDefaultLayout,
   d as RPDropFileZone,
   n as RPPages,
   t as RPProvider,
   P as RPTheme,
-  A as ScrollMode,
-  B as ViewMode,
-  E as ZoomLevel,
+  B as ScrollMode,
+  E as ViewMode,
+  G as ZoomLevel,
   D as useDarkModeContext,
-  M as useDocumentContext,
-  h as useDropFileZoneContext,
+  F as useDocumentContext,
+  S as useDropFileZoneContext,
   s as useFileDownload,
-  j as useFullScreenContext,
+  q as useFullScreenContext,
+  H as useHighlightContext,
   V as useOpenFileContext,
   m as usePaginationContext,
-  O as usePdfProperties,
+  T as usePdfProperties,
   p as usePrintContext,
-  g as useRotationContext,
+  M as useRotationContext,
   f as useSearchContext,
-  L as useViewModeContext,
+  w as useViewModeContext,
   k as useZoomContext
 };

package/dist/types/components/page/TextHighlightLayer.d.ts

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+interface Props {
+    pageNumber: number;
+}
+export declare const TextHighlightLayer: FC<Props>;
+export {};

package/dist/types/contexts/HighlightContext.d.ts

@@ -0,0 +1,8 @@
+import { UseHighlight } from '../utils/types';
+interface HighlightProvider {
+    children: React.ReactNode;
+}
+export declare const HighlightContext: import('react').Context<UseHighlight | undefined>;
+export declare const HighlightProvider: ({ children }: HighlightProvider) => import("react/jsx-runtime").JSX.Element;
+export declare const useHighlightContext: () => UseHighlight;
+export {};

package/dist/types/main.d.ts

@@ -16,6 +16,7 @@ export { useOpenFileContext } from './contexts/FileInputContext';
 export { usePrintContext } from './contexts/PrintContext';
 export { useZoomContext } from './contexts/ZoomContext';
 export { useSearchContext } from './contexts/SearchContext';
+export { useHighlightContext } from './contexts/HighlightContext';
 export { usePdfProperties } from './utils/hooks/usePdfProperties';
 export { useFullScreenContext } from './contexts/FullScreenContext';
 export { type PDFDocumentProxy } from 'pdfjs-dist';

package/dist/types/utils/highlight.d.ts

@@ -1,8 +1,13 @@
 import { TextContent } from 'pdfjs-dist/types/src/display/text_layer';
-import { SearchOptions, Match } from './types';
+import { SearchOptions, Match, MatchHighlight } from './types';
 export declare function findMatches(queries: (string | RegExp)[], textContent: TextContent, pageIndex: number, options: SearchOptions): Match[];
 export declare function highlightMatches(matches: Match[], textContent: TextContent, textDivs: HTMLElement[]): {
     element: HTMLElement;
     index: number;
 }[];
 export declare function resetDivs(textContent: TextContent, textDivs: HTMLElement[]): void;
+export declare function getHighlightOptionsWithDefaults(options?: SearchOptions): SearchOptions;
+export declare function highlightMultipleColorMatches(matches: MatchHighlight[], textContent: TextContent, textDivs: HTMLElement[]): {
+    element: HTMLElement;
+    index: number;
+}[];

package/dist/types/utils/hooks/useHighlight.d.ts

@@ -0,0 +1,10 @@
+import { PDFDocumentProxy } from 'pdfjs-dist';
+import { MatchHighlight, TextHighlight } from '../types';
+interface UseHighlight {
+    highlight: (value: TextHighlight[]) => Promise<void>;
+    highlightMatches: MatchHighlight[];
+    highlightKeywords: TextHighlight[] | undefined;
+    clear: () => void;
+}
+export declare const useHighlight: (pdf: PDFDocumentProxy | undefined) => UseHighlight;
+export {};

package/dist/types/utils/types.d.ts

@@ -602,4 +602,19 @@ export interface LocalizationProps {
 export interface LoaderContextType {
     LoaderImageComponent?: React.FC;
 }
+export interface TextHighlight {
+    keyword: string | RegExp;
+    highlightColor: string;
+    options?: SearchOptions;
+}
+export interface UseHighlight {
+    highlight: (value: TextHighlight[]) => Promise<void>;
+    highlightMatches: MatchHighlight[];
+    highlightKeywords: TextHighlight[] | undefined;
+    clear: () => void;
+}
+export interface MatchHighlight extends MatchValue {
+    keyword: string | RegExp;
+    color: string;
+}
 export {};

package/dist/utils/highlight.js

@@ -1,145 +1,205 @@
-import { getCharacterType as E } from "./charators.js";
-function I(r, o, d, s) {
-  const e = [];
-  for (const t of r) {
-    const i = M(o, t, s);
-    e.push(...w(i, o, d));
+import { getCharacterType as D } from "./charators.js";
+function H(d, c, l, s) {
+  const o = [];
+  for (const n of d) {
+    const i = X(c, n, s);
+    o.push(..._(i, c, l));
   }
-  return e;
+  return o;
 }
-const C = (r, o) => {
-  const d = ["g"];
-  o.matchCase || d.push("i");
-  let e = r.replace(/[.^$*+?()[{|\\]/g, (t) => `\\${t}`).trim();
-  return new RegExp(e, d.join(""));
+const L = (d, c) => {
+  const l = ["g"];
+  c.matchCase || l.push("i");
+  let o = d.replace(/[.^$*+?()[{|\\]/g, (n) => `\\${n}`).trim();
+  return new RegExp(o, l.join(""));
 };
-function M(r, o, d) {
+function X(d, c, l) {
   const s = [];
-  for (const c of r.items)
-    if (c.hasEOL)
-      if (c.str.endsWith("-")) {
-        const h = c.str.lastIndexOf("-");
-        s.push(c.str.substring(0, h));
+  for (const t of d.items)
+    if (t.hasEOL)
+      if (t.str.endsWith("-")) {
+        const a = t.str.lastIndexOf("-");
+        s.push(t.str.substring(0, a));
       } else
-        s.push(c.str, `
+        s.push(t.str, `
 `);
     else
-      s.push(c.str);
-  const e = s.join("").replace(/\n/g, " ");
-  let t;
-  o instanceof RegExp ? t = o.flags.indexOf("g") === -1 ? new RegExp(o, `${o.flags}g`) : o : t = C(o, d);
-  const i = [];
+      s.push(t.str);
+  const o = s.join("").replace(/\n/g, " ");
   let n;
-  for (; (n = t.exec(e)) !== null; )
-    d.wholeWords && !R(e, n.index, n[0].length) || i.push([n.index, n[0].length, n[0]]);
+  c instanceof RegExp ? n = c.flags.indexOf("g") === -1 ? new RegExp(c, `${c.flags}g`) : c : n = L(c, l);
+  const i = [];
+  let e;
+  for (; (e = n.exec(o)) !== null; )
+    l.wholeWords && !w(o, e.index, e[0].length) || i.push([e.index, e[0].length, e[0]]);
   return i;
 }
-function w(r, o, d) {
-  function s(h) {
-    return h.hasEOL ? h.str.endsWith("-") ? -1 : 1 : 0;
+function _(d, c, l) {
+  function s(a) {
+    return a.hasEOL ? a.str.endsWith("-") ? -1 : 1 : 0;
   }
-  let e = 0, t = 0;
-  const i = o.items, n = i.length - 1, c = [];
-  for (let h = 0; h < r.length; h++) {
-    let a = r[h][0];
-    for (; e !== n && a >= t + i[e].str.length; ) {
-      const p = i[e];
-      t += p.str.length + s(p), e++;
+  let o = 0, n = 0;
+  const i = c.items, e = i.length - 1, t = [];
+  for (let a = 0; a < d.length; a++) {
+    let r = d[a][0];
+    for (; o !== e && r >= n + i[o].str.length; ) {
+      const f = i[o];
+      n += f.str.length + s(f), o++;
     }
-    const g = {
-      idx: e,
-      offset: a - t
+    const p = {
+      idx: o,
+      offset: r - n
     };
-    for (a += r[h][1]; e !== n && a > t + i[e].str.length; ) {
-      const p = i[e];
-      t += p.str.length + s(p), e++;
+    for (r += d[a][1]; o !== e && r > n + i[o].str.length; ) {
+      const f = i[o];
+      n += f.str.length + s(f), o++;
     }
-    const f = {
-      idx: e,
-      offset: a - t
+    const m = {
+      idx: o,
+      offset: r - n
     };
-    c.push({
-      start: g,
-      end: f,
-      str: r[h][2],
-      oIndex: r[h][0],
-      pageIndex: d
+    t.push({
+      start: p,
+      end: m,
+      str: d[a][2],
+      oIndex: d[a][0],
+      pageIndex: l
     });
   }
-  return c;
+  return t;
 }
-function R(r, o, d) {
-  let s = r.slice(0, o).match(/([^\p{M}])\p{M}*$/u);
+function w(d, c, l) {
+  let s = d.slice(0, c).match(/([^\p{M}])\p{M}*$/u);
   if (s) {
-    const e = r.charCodeAt(o), t = s[1].charCodeAt(0);
-    if (E(e) === E(t))
+    const o = d.charCodeAt(c), n = s[1].charCodeAt(0);
+    if (D(o) === D(n))
       return !1;
   }
-  if (s = r.slice(o + d).match(/^\p{M}*([^\p{M}])/u), s) {
-    const e = r.charCodeAt(o + d - 1), t = s[1].charCodeAt(0);
-    if (E(e) === E(t))
+  if (s = d.slice(c + l).match(/^\p{M}*([^\p{M}])/u), s) {
+    const o = d.charCodeAt(c + l - 1), n = s[1].charCodeAt(0);
+    if (D(o) === D(n))
       return !1;
   }
   return !0;
 }
-function $(r, o, d) {
+function I(d, c, l) {
   const s = [];
-  function e(t, i, n = -1, c = -1, h = "") {
-    const a = o.items[t], g = [];
-    let f = "", p = "", v = "", u = d[t];
+  function o(n, i, e = -1, t = -1, a = "") {
+    const r = c.items[n], p = [];
+    let m = "", f = "", b = "", u = l[n];
     if (!u)
       return;
     if (u.nodeType === Node.TEXT_NODE) {
-      const l = document.createElement("span");
-      u.before(l), l.append(u), d[t] = l, u = l;
+      const g = document.createElement("span");
+      u.before(g), g.append(u), l[n] = g, u = g;
     }
-    n >= 0 && c >= 0 ? f = a.str.substring(n, c) : n < 0 && c < 0 ? f = a.str : n >= 0 ? f = a.str.substring(n) : c >= 0 && (f = a.str.substring(0, c));
-    const b = document.createTextNode(f), m = document.createElement("span");
-    if (m.className = "highlight appended " + h, m.setAttribute("data-match-index", `${i}`), m.append(b), g.push(m), s.push({ element: m, index: i }), n > 0)
+    e >= 0 && t >= 0 ? m = r.str.substring(e, t) : e < 0 && t < 0 ? m = r.str : e >= 0 ? m = r.str.substring(e) : t >= 0 && (m = r.str.substring(0, t));
+    const y = document.createTextNode(m), N = document.createElement("span");
+    if (N.className = "highlight appended " + a, N.setAttribute("data-match-index", `${i}`), N.append(y), p.push(N), s.push({ element: N, index: i }), e > 0)
       if (u.childNodes.length === 1 && u.childNodes[0].nodeType === Node.TEXT_NODE) {
-        p = a.str.substring(0, n);
-        const l = document.createTextNode(p);
-        g.unshift(l);
+        f = r.str.substring(0, e);
+        const g = document.createTextNode(f);
+        p.unshift(g);
       } else {
-        let l = 0;
-        const T = [];
-        for (const x of u.childNodes) {
-          const N = x.nodeType === Node.TEXT_NODE ? x.nodeValue : x.firstChild.nodeValue;
-          l += N.length, l <= n ? T.push(x) : n >= l - N.length && c <= l && T.push(
+        let g = 0;
+        const E = [];
+        for (const h of u.childNodes) {
+          const x = h.nodeType === Node.TEXT_NODE ? h.nodeValue : h.firstChild.nodeValue;
+          g += x.length, g <= e ? E.push(h) : e >= g - x.length && t <= g && E.push(
             document.createTextNode(
-              N.substring(0, n - (l - N.length))
+              x.substring(0, e - (g - x.length))
             )
           );
         }
-        g.unshift(...T);
+        p.unshift(...E);
       }
-    if (c > 0) {
-      v = a.str.substring(c);
-      const l = document.createTextNode(v);
-      g.push(l);
+    if (t > 0) {
+      b = r.str.substring(t);
+      const g = document.createTextNode(b);
+      p.push(g);
     }
-    u.replaceChildren(...g);
+    u.replaceChildren(...p);
   }
-  for (const [t, i] of r.entries())
+  for (const [n, i] of d.entries())
     if (i.start.idx === i.end.idx)
-      e(i.start.idx, t, i.start.offset, i.end.offset);
+      o(i.start.idx, n, i.start.offset, i.end.offset);
     else
-      for (let n = i.start.idx, c = i.end.idx; n <= c; n++)
-        n === i.start.idx ? e(n, t, i.start.offset, -1, "begin") : n === i.end.idx ? e(n, t, -1, i.end.offset, "end") : e(n, t, -1, -1, "middle");
+      for (let e = i.start.idx, t = i.end.idx; e <= t; e++)
+        e === i.start.idx ? o(e, n, i.start.offset, -1, "begin") : e === i.end.idx ? o(e, n, -1, i.end.offset, "end") : o(e, n, -1, -1, "middle");
   return s;
 }
-function y(r, o) {
-  const d = r.items.map((s) => s.str);
-  for (let s = 0; s < o.length; s++) {
-    const e = o[s];
-    if (e && e.nodeType !== Node.TEXT_NODE) {
-      const t = document.createTextNode(d[s]);
-      e.replaceChildren(t);
+function R(d, c) {
+  const l = d.items.map((s) => s.str);
+  for (let s = 0; s < c.length; s++) {
+    const o = c[s];
+    if (o && o.nodeType !== Node.TEXT_NODE) {
+      const n = document.createTextNode(l[s]);
+      o.replaceChildren(n);
     }
   }
 }
+function W(d = {}) {
+  return { matchCase: !1, wholeWords: !1, ...d };
+}
+function A(d, c, l) {
+  const s = [];
+  function o(n, i, e = -1, t = -1, a) {
+    var g, E;
+    const r = c.items[n], p = [];
+    let m = "", f = "", b = "", u = l[n];
+    if (!u)
+      return;
+    e >= 0 && t >= 0 ? m = r.str.substring(e, t) : e < 0 && t < 0 ? m = r.str : e >= 0 ? m = r.str.substring(e) : t >= 0 && (m = r.str.substring(0, t));
+    const y = document.createTextNode(m), N = document.createElement("span");
+    if (N.style.background = a, N.append(y), p.push(N), e > 0)
+      if (u.childNodes.length === 1 && u.childNodes[0].nodeType === Node.TEXT_NODE) {
+        f = r.str.substring(0, e);
+        const h = document.createTextNode(f);
+        p.unshift(h);
+      } else {
+        let h = 0;
+        const x = [];
+        for (const T of u.childNodes) {
+          const v = T.nodeType === Node.TEXT_NODE ? T.nodeValue || "" : ((g = T.firstChild) == null ? void 0 : g.nodeValue) || "", C = v.length;
+          if (h += C, h <= e)
+            x.push(T);
+          else if (e >= h - C && t <= h) {
+            const M = v.substring(0, e - (h - C));
+            x.push(document.createTextNode(M));
+          }
+        }
+        p.unshift(...x);
+      }
+    if (t > 0)
+      if (u.childNodes.length === 1 && u.childNodes[0].nodeType === Node.TEXT_NODE) {
+        b = r.str.substring(t);
+        const h = document.createTextNode(b);
+        p.push(h);
+      } else {
+        let h = 0;
+        const x = [];
+        for (const T of u.childNodes) {
+          h >= t && x.push(T);
+          const v = T.nodeType === Node.TEXT_NODE ? T.nodeValue || "" : ((E = T.firstChild) == null ? void 0 : E.nodeValue) || "", C = v.length;
+          if (h += C, h > t) {
+            const M = v.substring(t - (h - C));
+            M && x.push(document.createTextNode(M));
+          }
+        }
+        x.length > 0 && p.push(...x);
+      }
+    u.replaceChildren(...p), s.push({ element: N, index: i });
+  }
+  for (const [n, i] of d.entries()) {
+    const { start: e, end: t, color: a } = i;
+    e.idx === t.idx && o(e.idx, n, e.offset, t.offset, a);
+  }
+  return s;
+}
 export {
-  I as findMatches,
-  $ as highlightMatches,
-  y as resetDivs
+  H as findMatches,
+  W as getHighlightOptionsWithDefaults,
+  I as highlightMatches,
+  A as highlightMultipleColorMatches,
+  R as resetDivs
 };

package/dist/utils/hooks/useFileDownload.js

@@ -1,7 +1,7 @@
 import "react/jsx-runtime";
 import "../../contexts/RPDocumentContext.js";
 import "react";
-import { c as z } from "../../RPDefaultLayout-6fe6be3d.js";
+import { c as A } from "../../RPDefaultLayout-838ad8e8.js";
 import "../../contexts/DarkModeContext.js";
 import "../../contexts/RotationContext.js";
 import "../../contexts/LayerContext.js";
@@ -19,11 +19,12 @@ import "../../contexts/DropFileZoneContext.js";
 import "../../contexts/LayoutContainerContext.js";
 import "../../contexts/DimensionPagesContext.js";
 import "../../contexts/LocalizationContext.js";
+import "../../contexts/HighlightContext.js";
 import "../../contexts/LoaderContext.js";
 import "../../components/RPConfig.js";
 import "../../contexts/ThemeContext.js";
 import "../../components/RPDropFileZone.js";
 import "../../contexts/ToolbarComponentContext.js";
 export {
-  z as useFileDownload
+  A as useFileDownload
 };

package/dist/utils/hooks/useHighlight.js

@@ -0,0 +1,52 @@
+import { useState as c, useCallback as x, useEffect as C } from "react";
+import { getHighlightOptionsWithDefaults as H, findMatches as M } from "../highlight.js";
+const d = (i) => {
+  const [g, r] = c(void 0), [l, a] = c([]), u = x(async (t) => {
+    if (!t)
+      return {};
+    const o = t.numPages, s = {};
+    for (let e = 1; e <= o; e++) {
+      const h = await t.getPage(e);
+      s[e.toString()] = await h.getTextContent();
+    }
+    return s;
+  }, []), m = async (t) => {
+    r(t);
+  }, f = () => {
+    a([]), r(void 0);
+  };
+  return C(() => {
+    i && u(i).then((t) => {
+      let o = [];
+      for (const { keyword: s, highlightColor: e, options: h } of g) {
+        const p = H(h);
+        for (const n of Object.keys(t)) {
+          const y = M(
+            [s],
+            t[n],
+            Number(n) - 1,
+            p
+          ).map((b, w) => ({
+            ...b,
+            page: Number(n),
+            pageMatchIdx: w,
+            color: e,
+            keyword: s
+          }));
+          o = [...o, ...y];
+        }
+      }
+      a(o);
+    }).catch((t) => {
+      console.error(t);
+    });
+  }, [g, i]), {
+    highlight: m,
+    clear: f,
+    highlightMatches: l,
+    highlightKeywords: g
+  };
+};
+export {
+  d as useHighlight
+};