@react-pdf-kit/viewer 2.0.0-beta.1 → 2.0.0-beta.11

package/dist/components/page/TextLayer.js

@@ -1,142 +1,201 @@
-import "react/jsx-runtime";
-import "react";
-import "../../contexts/RPDocumentContext.js";
-import "../../contexts/DocumentPasswordContext.js";
-import { H as Eo } from "../../ToolbarLayout.module-37619c4b.js";
-import "../../contexts/DarkModeContext.js";
-import "../../contexts/RotationContext.js";
-import "../../contexts/LayerContext.js";
-import "../../contexts/ZoomContext.js";
-import "../../contexts/ViewModeContext.js";
-import "../../contexts/ScrollModeContext.js";
-import "../../contexts/VirtualScrollContext.js";
-import "../../contexts/VirtualGridContext.js";
-import "../../contexts/SelectionModeContext.js";
-import "../../contexts/InitialStateContext.js";
-import "../../contexts/FullScreenContext.js";
-import "../../contexts/FileInputContext.js";
-import "../../contexts/DropFileZoneContext.js";
-import "../../contexts/LayoutContainerContext.js";
-import "../../contexts/DimensionPagesContext.js";
-import "../../contexts/LocalizationContext.js";
-import "../../contexts/HighlightContext.js";
-import "../../contexts/LicenseContext.js";
-import "../../contexts/DownloadContext.js";
-import "../../contexts/SmoothScrollContext.js";
-import "../../contexts/ElementPageContext.js";
-import "../../contexts/PagesRotateContext.js";
-import "../../contexts/GlobalCurrentPage.js";
-import "../../contexts/LoaderContext.js";
-import "../../contexts/ToolComponentContext.js";
-import "../../contexts/IconToolContext.js";
-import "../../contexts/OtherToolContext.js";
-import "../../contexts/EventCallbackContext.js";
-import "../RPConfig.js";
-import "../layout/Container.js";
-import "../../contexts/ViewportContext.js";
-import "../../contexts/ToolbarComponentContext.js";
-import "../layout/sidebar/RPSplitter.js";
-import "../layout/WrapperLayout.js";
-import "../../LayoutWrapper-6224491f.js";
-import "../../contexts/ThemeContext.js";
-import "../RPDropFileZone.js";
-import "../ui/Button.js";
-import "../../SearchCloseButton-08d57275.js";
-import "../ui/Input.js";
-import "../ui/Checkbox.js";
-import "../icons/LoaderIcon.js";
-import "../../contexts/IconContext.js";
-import "../ui/RPTooltip.js";
-import "../ui/DropDown.js";
-import "../layout/toolbar/MenuItem.js";
-import "../layout/toolbar/MenuSeparator.js";
-import "../../utils/dateFormatter.js";
-import "../layout/toolbar/PropertyItem.js";
-import "../../RotateTool.module-67946714.js";
-import "pdfjs-dist";
-import "../../utils/highlight.js";
+import { jsx as B } from "react/jsx-runtime";
+import { useRef as g, useState as H, useMemo as P, useCallback as _, useEffect as w } from "react";
+import { useDocumentContext as G } from "../../contexts/RPDocumentContext.js";
+import * as J from "pdfjs-dist";
+import { resetDivs as $, highlightMatches as U } from "../../utils/highlight.js";
+import { useSearchContext as V } from "../../contexts/SearchContext.js";
 import "../../utils/hooks/useLoadPdf.js";
 import "../../utils/types.js";
 import "../../th_TH-d627cd51.js";
 import "../../utils/getThumbnailViewport.js";
 import "../../contexts/ConfigContext.js";
+import "../../contexts/DocumentPasswordContext.js";
 import "../../utils/appConsole.js";
 import "../../utils/hooks/usePdfProperties.js";
 import "../../utils/convertPdfDate.js";
 import "../../utils/formatFileSize.js";
-import "../icons/ChevronUpIcon.js";
-import "../../utils/Queue.js";
-import "../../utils/renderPage.js";
-import "../icons/Thumbnail.js";
-import "../../clsx-0c6e471a.js";
-import "../../utils/withRef.js";
-import "../../utils/hooks/useInfiniteScroll.js";
+import "../../utils/charators.js";
+import "../../utils/hooks/useSearch.js";
+import "../../contexts/VirtualScrollContext.js";
+import "../../contexts/ScrollModeContext.js";
+import "../../contexts/InitialStateContext.js";
+import "../../contexts/ZoomContext.js";
 import "../../utils/constants.js";
-import "../../utils/link_service.js";
-import "../../utils/annotations.js";
-import "../../utils/sanitizeExternalUrl.js";
-import "./searchHighlight.js";
-import "../../utils/const.js";
-import "./CustomElement.js";
 import "../../utils/getZoomLevel.js";
+import "../../contexts/LayoutContainerContext.js";
+import "../../contexts/ViewModeContext.js";
+import "../../contexts/RotationContext.js";
+import "../../contexts/GlobalCurrentPage.js";
+import "../../contexts/EventCallbackContext.js";
 import "../../utils/hooks/useDebounce.js";
-import "../../utils/hooks/useLicense.js";
+import "../../PaginationContext-9217cab4.js";
+import "../../contexts/VirtualGridContext.js";
+import "../../utils/smoothScrollTo.js";
+import "../../contexts/DimensionPagesContext.js";
+import "../../contexts/PagesRotateContext.js";
+import "../../contexts/SmoothScrollContext.js";
 import "../../utils/getScrollDistance.js";
-import "../../utils/getElementPositionInPage.js";
 import "../../utils/calculatePage.js";
-import "../../utils/hooks/useMousePressed.js";
-import "../../utils/hooks/useGrabScroll.js";
-import "../../utils/hooks/usePinch.js";
-import "../ui/PasswordModal.js";
-import "../../utils/hooks/useLocalization.js";
-import "../../utils/approximateFragtion.js";
 import "../../utils/getWordPositionInPage.js";
-import "../../utils/smoothScrollTo.js";
-import "../layout/toolbar/FileUploadTool.js";
-import "../icons/FileUploadDefaultIcon.js";
-import "../../index-a48ec088.js";
-import "../../index-c9a2990a.js";
-import "react-dom";
-import "../../index-808ea7bf.js";
-import "../layout/toolbar/DarkModeTool.js";
-import "../icons/MoonIcon.js";
-import "../icons/SunIcon.js";
-import "../../utils/hooks/useDarkMode.js";
-import "../icons/ThreeDotIcon.js";
-import "../icons/CloseIcon.js";
-import "../layout/toolbar/DocumentProperties.js";
-import "../icons/InfoIcon.js";
-import "../layout/toolbar/RotateTool.js";
-import "../icons/ClockwiseIcon.js";
-import "../../utils/hooks/useRotate.js";
-import "../layout/toolbar/ViewModeTool.js";
-import "../icons/SinglePageIcon.js";
-import "../icons/DualPageIcon.js";
-import "../icons/CheckIcon.js";
-import "../layout/toolbar/ScrollModeTool.js";
-import "../icons/PageScrollingIcon.js";
-import "../icons/VerticalScrollingIcon.js";
-import "../icons/HorizontalScrollingIcon.js";
-import "../icons/FileDownloadDefaultIcon.js";
-import "../icons/PrintDefaultIcon.js";
-import "../layout/toolbar/FullScreenTool.js";
-import "../icons/FullScreenIcon.js";
-import "../../utils/hooks/useFullScreen.js";
-import "../icons/GoToDownIcon.js";
-import "../layout/toolbar/SelectionModeTool.js";
-import "../icons/TextSelectionDefaultIcon.js";
-import "../icons/HandModeDefaultIcon.js";
-import "../icons/ZoomInIcon.js";
-import "../icons/ZoomOutIcon.js";
-import "../../utils/zoom.js";
-import "../icons/SearchIcon.js";
-import "../icons/ClearIcon.js";
-import "../../utils/hooks/useHighlight.js";
-import "../../utils/charators.js";
-import "../RPTheme.js";
-import "../../utils/hooks/useLoadWorker.js";
-import "../icons/LightPdfIcon.js";
-import "../icons/DarkPdfIcon.js";
+const X = "_selecting_1553j_14", z = "_markedContent_1553j_37", a = {
+  "rp-text-layer": "_rp-text-layer_1553j_1",
+  selecting: X,
+  markedContent: z,
+  "rp-text-layer-text": "_rp-text-layer-text_1553j_61"
+}, Ae = (k) => {
+  const { pageNumber: d } = k, { pages: R } = G(), i = g(null), { matches: O, currentMatch: v } = V(), [D, A] = H(
+    []
+  ), p = g(), h = g(), L = g([]), y = P(() => O.filter((r) => r.pageIndex === d - 1), [O, d]), T = _(
+    (r, t, e = !1) => {
+      if (e && $(r, t), !y.length) {
+        L.current = [], A([]);
+        return;
+      }
+      const n = U(y, r, t);
+      A(n);
+    },
+    [y]
+  ), x = g(), C = g(!1), E = _(() => Array.from(document.querySelectorAll('[data-rp$="-textLayer"]')), []);
+  w(() => ((() => {
+    if (x.current)
+      return;
+    x.current = new AbortController();
+    const { signal: t } = x.current, e = () => {
+      E().forEach((o) => {
+        const s = o.querySelector(".endOfContent");
+        s && (o.appendChild(s), s.style.width = "", s.style.height = "", o.classList.remove(a.selecting));
+      });
+    };
+    document.addEventListener(
+      "pointerdown",
+      () => {
+        C.current = !0;
+      },
+      { signal: t }
+    ), document.addEventListener(
+      "pointerup",
+      () => {
+        C.current = !1, e();
+      },
+      { signal: t }
+    ), window.addEventListener(
+      "blur",
+      () => {
+        C.current = !1, e();
+      },
+      { signal: t }
+    ), document.addEventListener(
+      "keyup",
+      () => {
+        C.current || e();
+      },
+      { signal: t }
+    );
+    let n = null;
+    document.addEventListener(
+      "selectionchange",
+      () => {
+        var M, j;
+        const o = document.getSelection();
+        if (!o)
+          return;
+        if (o.rangeCount === 0) {
+          e();
+          return;
+        }
+        const s = /* @__PURE__ */ new Set();
+        for (let c = 0; c < o.rangeCount; c++) {
+          const f = o.getRangeAt(c);
+          E().forEach((N) => {
+            f.intersectsNode(N) && !s.has(N) && s.add(N);
+          });
+        }
+        E().forEach((c) => {
+          if (s.has(c))
+            c.classList.add(a.selecting);
+          else {
+            const f = c.querySelector(".endOfContent");
+            f && (c.appendChild(f), f.style.width = "", f.style.height = "", c.classList.remove(a.selecting));
+          }
+        });
+        const l = o.getRangeAt(0);
+        let u = n && (l.compareBoundaryPoints(Range.END_TO_END, n) === 0 || l.compareBoundaryPoints(Range.START_TO_END, n) === 0) ? l.startContainer : l.endContainer;
+        u.nodeType === Node.TEXT_NODE && (u = u.parentNode);
+        const m = (M = u.parentElement) == null ? void 0 : M.closest(
+          a["rp-text-layer"]
+        ), S = m == null ? void 0 : m.querySelector(".endOfContent");
+        S && m && (S.style.width = m.style.width, S.style.height = m.style.height, (j = u.parentElement) == null || j.insertBefore(S, u.nextSibling)), n = l.cloneRange();
+      },
+      { signal: t }
+    );
+  })(), () => {
+    var t;
+    (t = x.current) == null || t.abort(), x.current = void 0;
+  }), [E]);
+  const q = _(() => {
+    i.current && i.current.classList.add(a.selecting);
+  }, []), I = _(() => {
+    i.current && i.current.classList.remove(a.selecting);
+  }, []);
+  return w(() => {
+    if (L.current.forEach((e) => {
+      e.classList.remove("selected");
+    }), !D.length || !v || v.pageIndex !== d - 1)
+      return;
+    const r = y.findIndex(
+      (e) => JSON.stringify(e) === JSON.stringify(v)
+    );
+    if (r === -1)
+      return;
+    const t = D.filter((e) => e.index === r);
+    t.length && (L.current = t.map((e) => e.element), t.forEach((e) => {
+      e.element.classList.add("selected");
+    }));
+  }, [v, D, y]), w(() => {
+    const r = R.get(d);
+    if (!r || !i.current)
+      return;
+    const t = i.current;
+    return p.current && p.current.cancel(), r.page.getTextContent().then((e) => {
+      const n = r.page.getViewport({ scale: 1 });
+      return p.current = new J.TextLayer({
+        viewport: n,
+        textContentSource: e,
+        container: t
+      }), h.current = e, t && (t.innerText = ""), p.current.render();
+    }).then(() => {
+      var s, l;
+      [].slice.call(t.children).forEach((b) => {
+        b.classList.add(a["rp-text-layer-text"]), b.setAttribute("data-rp", "rp-text-layer-text");
+      });
+      const n = (s = p.current) == null ? void 0 : s.textDivs;
+      n && h.current && T(h.current, n);
+      const o = document.createElement("div");
+      o.className = "endOfContent", (l = i.current) == null || l.appendChild(o);
+    }).catch(() => {
+    }), () => {
+      var e;
+      (e = p.current) == null || e.cancel();
+    };
+  }, [R, d]), w(() => {
+    var e;
+    [].slice.call(i.current.children).forEach((n) => {
+      n.classList.add(a["rp-text-layer-text"]);
+    });
+    const t = (e = p.current) == null ? void 0 : e.textDivs;
+    t && h.current && T(h.current, t, !0);
+  }, [T]), /* @__PURE__ */ B(
+    "div",
+    {
+      "data-rp-text-layer": !0,
+      "data-rp": `page-${d}-textLayer`,
+      className: a["rp-text-layer"],
+      ref: i,
+      onMouseDown: q,
+      onMouseUp: I
+    }
+  );
+};
 export {
-  Eo as TextLayer
+  Ae as TextLayer
 };

package/dist/components/ui/Checkbox.js

@@ -1,13 +1,14 @@
 import { jsx as i, jsxs as w, Fragment as U } from "react/jsx-runtime";
 import * as s from "react";
-import { c as z, u as B, P as E, a as S, b as G, d as K, e as X } from "../../index-c9a2990a.js";
+import { c as z, a as B, P as E, b as S, d as G, f as K } from "../../index-c0faa594.js";
+import { u as X } from "../../index-655864a7.js";
 import { CheckIcon as J } from "../icons/CheckIcon.js";
 import "react-dom";
 function Q(e) {
   const r = s.useRef({ value: e, previous: e });
   return s.useMemo(() => (r.current.value !== e && (r.current.previous = r.current.value, r.current.value = e), r.current.previous), [e]);
 }
-var g = "Checkbox", [V, oe] = z(g), [W, P] = V(g);
+var g = "Checkbox", [V, ne] = z(g), [W, P] = V(g);
 function Y(e) {
   const {
     __scopeCheckbox: r,
@@ -15,19 +16,19 @@ function Y(e) {
     children: d,
     defaultChecked: n,
     disabled: t,
-    form: h,
-    name: f,
+    form: f,
+    name: h,
     onCheckedChange: u,
     required: k,
     value: C = "on",
     // @ts-expect-error
     internal_do_not_use_render: l
-  } = e, [p, v] = X({
+  } = e, [p, v] = K({
     prop: o,
     defaultProp: n ?? !1,
     onChange: u,
     caller: g
-  }), [m, x] = s.useState(null), [_, c] = s.useState(null), a = s.useRef(!1), I = m ? !!h || !!m.closest("form") : (
+  }), [m, x] = s.useState(null), [_, c] = s.useState(null), a = s.useRef(!1), I = m ? !!f || !!m.closest("form") : (
     // We set this to true by default so that events bubble to forms without JS (SSR)
     !0
   ), R = {
@@ -36,8 +37,8 @@ function Y(e) {
     setChecked: v,
     control: m,
     setControl: x,
-    name: f,
-    form: h,
+    name: h,
+    form: f,
     value: C,
     hasConsumerStoppedPropagationRef: a,
     required: k,
@@ -59,8 +60,8 @@ var M = "CheckboxTrigger", T = s.forwardRef(
   ({ __scopeCheckbox: e, onKeyDown: r, onClick: o, ...d }, n) => {
     const {
       control: t,
-      value: h,
-      disabled: f,
+      value: f,
+      disabled: h,
       checked: u,
       required: k,
       setControl: C,
@@ -83,9 +84,9 @@ var M = "CheckboxTrigger", T = s.forwardRef(
         "aria-checked": b(u) ? "mixed" : u,
         "aria-required": k,
         "data-state": O(u),
-        "data-disabled": f ? "" : void 0,
-        disabled: f,
-        value: h,
+        "data-disabled": h ? "" : void 0,
+        disabled: h,
+        value: f,
         ...d,
         ref: x,
         onKeyDown: S(r, (c) => {
@@ -106,8 +107,8 @@ var q = s.forwardRef(
       name: d,
       checked: n,
       defaultChecked: t,
-      required: h,
-      disabled: f,
+      required: f,
+      disabled: h,
       value: u,
       onCheckedChange: k,
       form: C,
@@ -119,8 +120,8 @@ var q = s.forwardRef(
         __scopeCheckbox: o,
         checked: n,
         defaultChecked: t,
-        disabled: f,
-        required: h,
+        disabled: h,
+        required: f,
         onCheckedChange: k,
         name: d,
         form: C,
@@ -174,15 +175,15 @@ var D = "CheckboxBubbleInput", L = s.forwardRef(
       control: d,
       hasConsumerStoppedPropagationRef: n,
       checked: t,
-      defaultChecked: h,
-      required: f,
+      defaultChecked: f,
+      required: h,
       disabled: u,
       name: k,
       value: C,
       form: l,
       bubbleInput: p,
       setBubbleInput: v
-    } = P(D, e), m = B(o, v), x = Q(t), _ = K(d);
+    } = P(D, e), m = B(o, v), x = Q(t), _ = X(d);
     s.useEffect(() => {
       const a = p;
       if (!a)
@@ -202,8 +203,8 @@ var D = "CheckboxBubbleInput", L = s.forwardRef(
       {
         type: "checkbox",
         "aria-hidden": !0,
-        defaultChecked: h ?? c.current,
-        required: f,
+        defaultChecked: f ?? c.current,
+        required: h,
         disabled: u,
         name: k,
         value: C,
@@ -240,7 +241,7 @@ function O(e) {
 const y = {
   "rp-checkbox": "_rp-checkbox_1vwg8_1",
   "rp-checkbox-indicator": "_rp-checkbox-indicator_1vwg8_25"
-}, ne = ({
+}, ce = ({
   children: e,
   value: r,
   name: o,
@@ -261,5 +262,5 @@ const y = {
   /* @__PURE__ */ i("label", { className: y["rp-checkbox-label"], htmlFor: o, children: e })
 ] });
 export {
-  ne as UICheckbox
+  ce as UICheckbox
 };

package/dist/components/ui/DropDown.js

@@ -1,10 +1,13 @@
 import { jsxs as p, jsx as d } from "react/jsx-runtime";
-import { R as l, T as c, P as _, C as m } from "../../index-a48ec088.js";
+import { R as l, T as c, P as _, C as m } from "../../index-4baea9b5.js";
 import { c as A } from "../../clsx-0c6e471a.js";
 import "react";
-import "../../index-c9a2990a.js";
+import "../../index-c0faa594.js";
 import "react-dom";
-import "../../index-808ea7bf.js";
+import "../../index-e3ee9457.js";
+import "../../Combination-54a77a7a.js";
+import "../../floating-ui.react-dom-5ec29bd6.js";
+import "../../index-655864a7.js";
 const F = "_slideDownAndFade_1vzkq_1", w = "_slideLeftAndFade_1vzkq_1", f = "_slideUpAndFade_1vzkq_1", g = "_slideRightAndFade_1vzkq_1", h = {
   "rp-dropdown-content": "_rp-dropdown-content_1vzkq_1",
   slideDownAndFade: F,
@@ -12,9 +15,9 @@ const F = "_slideDownAndFade_1vzkq_1", w = "_slideLeftAndFade_1vzkq_1", f = "_sl
   slideUpAndFade: f,
   slideRightAndFade: g,
   "rp-dropdown-arrow": "_rp-dropdown-arrow_1vzkq_30"
-}, x = (e) => {
-  const { triggerComponent: n, children: o, container: r, className: s, open: t, onOpenChange: i, ...a } = e;
-  return /* @__PURE__ */ p(l, { modal: !1, open: t, onOpenChange: i, children: [
+}, P = (e) => {
+  const { triggerComponent: n, children: o, container: r, className: t, open: s, onOpenChange: i, ...a } = e;
+  return /* @__PURE__ */ p(l, { modal: !1, open: s, onOpenChange: i, children: [
     /* @__PURE__ */ d(c, { asChild: !0, children: n }),
     /* @__PURE__ */ d(_, { container: r, children: /* @__PURE__ */ d(
       m,
@@ -22,12 +25,12 @@ const F = "_slideDownAndFade_1vzkq_1", w = "_slideLeftAndFade_1vzkq_1", f = "_sl
         sideOffset: 8,
         align: "end",
         ...a,
-        className: A(h["rp-dropdown-content"], s),
+        className: A(h["rp-dropdown-content"], t),
         children: o
       }
     ) })
   ] });
 };
 export {
-  x as UIDropDown
+  P as UIDropDown
 };