react-docxodus-viewer 0.2.1 → 0.4.0

package/dist/react-docxodus-viewer.es.js

@@ -1,7 +1,7 @@
 import { jsx as e, jsxs as c, Fragment as ze } from "react/jsx-runtime";
 import { useState as o, useMemo as ne, useRef as we, useEffect as $, useCallback as f } from "react";
 import { useDocxodus as gn, PaginatedDocument as cn } from "docxodus/react";
-import { isFormatChange as S, isMove as Q, isDeletion as ge, isInsertion as ce, PaginationMode as tn, getDocumentMetadata as In, AnnotationLabelMode as q, CommentRenderMode as ee } from "docxodus";
+import { isFormatChange as D, isMove as U, isDeletion as ge, isInsertion as ce, PaginationMode as tn, getDocumentMetadata as In, AnnotationLabelMode as q, CommentRenderMode as ee } from "docxodus";
 import { RevisionType as Bn, isDeletion as Xn, isFormatChange as Nn, isInsertion as Rn, isMove as Hn } from "docxodus";
 function z() {
   return `${Date.now()}-${Math.random().toString(36).slice(2, 11)}`;
@@ -137,10 +137,10 @@ const dn = {
   annotationCssClassPrefix: "annot-"
 };
 function on(g) {
-  return ce(g) ? "Inserted" : ge(g) ? "Deleted" : Q(g) ? g.isMoveSource ? "Moved from" : "Moved to" : S(g) ? "Formatted" : String(g.revisionType);
+  return ce(g) ? "Inserted" : ge(g) ? "Deleted" : U(g) ? g.isMoveSource ? "Moved from" : "Moved to" : D(g) ? "Formatted" : String(g.revisionType);
 }
 function Cn(g) {
-  return ce(g) ? "rdv-revision--insertion" : ge(g) ? "rdv-revision--deletion" : Q(g) ? "rdv-revision--move" : S(g) ? "rdv-revision--format" : "";
+  return ce(g) ? "rdv-revision--insertion" : ge(g) ? "rdv-revision--deletion" : U(g) ? "rdv-revision--move" : D(g) ? "rdv-revision--format" : "";
 }
 function rn(g) {
   try {
@@ -198,9 +198,9 @@ function bn({ revisions: g }) {
       case "deletions":
         return ge(t);
       case "moves":
-        return Q(t);
+        return U(t);
       case "formatting":
-        return S(t);
+        return D(t);
       default:
         return !0;
     }
@@ -208,8 +208,8 @@ function bn({ revisions: g }) {
     total: g.length,
     insertions: g.filter(ce).length,
     deletions: g.filter(ge).length,
-    moves: g.filter(Q).length,
-    formatting: g.filter(S).length
+    moves: g.filter(U).length,
+    formatting: g.filter(D).length
   }), [g]), h = (t) => {
     m((i) => {
       const d = new Set(i);
@@ -277,7 +277,7 @@ function bn({ revisions: g }) {
       )
     ] }),
     /* @__PURE__ */ e("div", { className: "rdv-revision-list", children: C.map((t, i) => {
-      const d = A.has(i), b = t.text.length > 150, y = S(t) ? mn(t) : [];
+      const d = A.has(i), b = t.text.length > 150, y = D(t) ? mn(t) : [];
       return /* @__PURE__ */ c(
         "div",
         {
@@ -285,7 +285,7 @@ function bn({ revisions: g }) {
           children: [
             /* @__PURE__ */ c("div", { className: "rdv-revision-item__header", children: [
               /* @__PURE__ */ e("span", { className: "rdv-revision-type", children: on(t) }),
-              Q(t) && t.moveGroupId !== void 0 && /* @__PURE__ */ c("span", { className: "rdv-revision-move-id", children: [
+              U(t) && t.moveGroupId !== void 0 && /* @__PURE__ */ c("span", { className: "rdv-revision-move-id", children: [
                 "#",
                 t.moveGroupId
               ] }),
@@ -362,7 +362,7 @@ function pn({
   style: y,
   toolbar: r = "top",
   showSettingsButton: te = !0,
-  showRevisionsTab: D = !0,
+  showRevisionsTab: P = !0,
   placeholder: fe = "Open a DOCX file to view",
   wasmBasePath: Ie,
   useWorker: u = !0
@@ -370,23 +370,23 @@ function pn({
   const ae = ne(
     () => ({ ...dn, ...i }),
     [i]
-  ), [Ye, ue] = o(null), [Je, U] = o(null), [Ze, ke] = o(ae), X = g !== void 0 ? g : Ye, N = s !== void 0 ? s : Je, a = ne(
+  ), [Ye, ue] = o(null), [Je, x] = o(null), [Ze, ke] = o(ae), N = g !== void 0 ? g : Ye, G = s !== void 0 ? s : Je, a = ne(
     () => t ? { ...ae, ...t } : Ze,
     [t, ae, Ze]
-  ), R = gn(Ie), [G, he] = o(null), [Ke, ve] = o(!1), [Se, le] = o(!1), [Qe, Ve] = o(null), P = we(null);
+  ), R = gn(Ie), [W, he] = o(null), [Ke, ve] = o(!1), [Se, le] = o(!1), [Qe, Ve] = o(null), M = we(null);
   $(() => {
     if (!u || !sn())
       return;
     let n = !1;
     return le(!0), Ve(null), ln({ wasmBasePath: Ie }).then((I) => {
-      n ? I.terminate() : (P.current = I, he(I), ve(!0), le(!1));
+      n ? I.terminate() : (M.current = I, he(I), ve(!0), le(!1));
     }).catch((I) => {
       n || (Ve(I instanceof Error ? I : new Error(String(I))), le(!1));
     }), () => {
-      n = !0, P.current && (P.current.terminate(), P.current = null, he(null), ve(!1));
+      n = !0, M.current && (M.current.terminate(), M.current = null, he(null), ve(!1));
     };
   }, [u, Ie]);
-  const H = u ? Ke : R.isReady, Y = u ? Se : R.isLoading, x = u ? Qe : R.error, [W, ye] = o(!1), [pe, M] = o(null), [Ge, We] = o(""), [B, ie] = o(1), [p, se] = o(0), [De, L] = o(!1), [J, j] = o("document"), [de, O] = o([]), [Ue, Be] = o(!1), [F, T] = o(null), oe = we(null), Ce = f(() => ({
+  const H = u ? Ke : R.isReady, Y = u ? Se : R.isLoading, L = u ? Qe : R.error, [B, ye] = o(!1), [pe, j] = o(null), [Ge, We] = o(""), [X, ie] = o(1), [p, se] = o(0), [De, O] = o(!1), [J, k] = o("document"), [de, K] = o([]), [Ue, Be] = o(!1), [F, T] = o(null), oe = we(null), Ce = f(() => ({
     commentRenderMode: un(a.commentMode),
     pageTitle: a.pageTitle,
     cssPrefix: a.cssPrefix,
@@ -405,47 +405,47 @@ function pn({
     renderMoveOperations: a.renderMoveOperations
   }), [a]), Pe = f(async (n) => {
     try {
-      const I = u && G ? await G.getDocumentMetadata(n) : await In(n);
+      const I = u && W ? await W.getDocumentMetadata(n) : await In(n);
       T(I);
     } catch {
       T(null);
     }
-  }, [u, G]), Xe = f(async (n) => {
-    if (!(!H || !D)) {
+  }, [u, W]), Xe = f(async (n) => {
+    if (!(!H || !P)) {
       Be(!0);
       try {
-        const I = u && G ? await G.getRevisions(n) : await R.getRevisions(n);
-        O(I), h?.(I);
+        const I = u && W ? await W.getRevisions(n) : await R.getRevisions(n);
+        K(I), h?.(I);
       } catch {
-        O([]);
+        K([]);
       } finally {
         Be(!1);
       }
     }
-  }, [H, u, G, R, D, h]), k = f(async (n) => {
+  }, [H, u, W, R, P, h]), S = f(async (n) => {
     if (H) {
-      ye(!0), M(null), O([]), j("document"), A?.(), u || await new Promise((I) => requestAnimationFrame(() => requestAnimationFrame(I)));
+      ye(!0), j(null), K([]), k("document"), A?.(), u || await new Promise((I) => requestAnimationFrame(() => requestAnimationFrame(I)));
       try {
-        const I = u && G ? await G.convertDocxToHtml(n, Ce()) : await R.convertToHtml(n, Ce());
-        s === void 0 && U(I), m?.(I), Xe(n);
+        const I = u && W ? await W.convertDocxToHtml(n, Ce()) : await R.convertToHtml(n, Ce());
+        s === void 0 && x(I), m?.(I), Xe(n);
       } catch (I) {
         const V = I instanceof Error ? I : new Error(String(I));
-        M(V), C?.(V);
+        j(V), C?.(V);
       } finally {
         ye(!1);
       }
     }
-  }, [H, u, G, R, Ce, s, A, m, C, Xe]);
+  }, [H, u, W, R, Ce, s, A, m, C, Xe]);
   $(() => {
-    H && X && !N && !W && s === void 0 && k(X);
-  }, [H, X, N, W, k, s]);
+    H && N && !G && !B && s === void 0 && S(N);
+  }, [H, N, G, B, S, s]);
   const xe = async (n) => {
     const I = n.target.files?.[0];
-    I && (We(I.name), M(null), ie(1), se(0), T(null), g === void 0 && (ue(I), U(null)), Z?.(I), Pe(I), H && s === void 0 && await k(I));
+    I && (We(I.name), j(null), ie(1), se(0), T(null), K([]), k("document"), g === void 0 && (ue(I), x(null)), Z?.(I), Pe(I), H && s === void 0 && await S(I));
   }, Me = f(async () => {
-    X && (s === void 0 && U(null), await k(X));
-  }, [X, k, s]), Le = () => {
-    g === void 0 && ue(null), s === void 0 && U(null), M(null), We(""), ie(1), se(0), O([]), j("document"), T(null), Z?.(null);
+    N && (s === void 0 && x(null), await S(N));
+  }, [N, S, s]), Le = () => {
+    g === void 0 && ue(null), s === void 0 && x(null), j(null), We(""), ie(1), se(0), K([]), k("document"), T(null), Z?.(null);
     const n = document.getElementById("rdv-file-input");
     n && (n.value = "");
   }, v = f((n) => {
@@ -462,7 +462,7 @@ function pn({
     if (!I || n < 1 || n > p) return;
     const V = I.querySelector(`[data-page-number="${n}"]`);
     V && V.scrollIntoView({ behavior: "smooth", block: "start" });
-  }, Ee = () => B > 1 && re(B - 1), _e = () => B < p && re(B + 1), $e = (n) => {
+  }, Ee = () => X > 1 && re(X - 1), _e = () => X < p && re(X + 1), $e = (n) => {
     ie(n), l?.(n, p);
   };
   $(() => {
@@ -471,20 +471,20 @@ function pn({
     const I = (V) => {
       const E = V.target.closest('a[href^="#"]');
       if (!E) return;
-      const K = E.getAttribute("href");
-      if (!K || !K.startsWith("#")) return;
+      const Q = E.getAttribute("href");
+      if (!Q || !Q.startsWith("#")) return;
       V.preventDefault();
-      const He = K.substring(1), _ = n.querySelector(`[id="${He}"], [name="${He}"]`);
+      const He = Q.substring(1), _ = n.querySelector(`[id="${He}"], [name="${He}"]`);
       _ && (_.scrollIntoView({ behavior: "smooth", block: "center" }), _.classList.add("rdv-footnote-highlight"), setTimeout(() => _.classList.remove("rdv-footnote-highlight"), 2e3));
     };
     return n.addEventListener("click", I), () => n.removeEventListener("click", I);
-  }, [N]), $(() => {
-    p > 0 && l?.(B, p);
-  }, [p, B, l]);
-  const Ne = W || Y, qe = () => /* @__PURE__ */ e("div", { className: "rdv-settings-overlay", onClick: () => L(!1), children: /* @__PURE__ */ c("div", { className: "rdv-settings-modal", onClick: (n) => n.stopPropagation(), children: [
+  }, [G]), $(() => {
+    p > 0 && l?.(X, p);
+  }, [p, X, l]);
+  const Ne = B || Y, qe = () => /* @__PURE__ */ e("div", { className: "rdv-settings-overlay", onClick: () => O(!1), children: /* @__PURE__ */ c("div", { className: "rdv-settings-modal", onClick: (n) => n.stopPropagation(), children: [
     /* @__PURE__ */ c("div", { className: "rdv-settings-header", children: [
       /* @__PURE__ */ e("h3", { children: "Viewer Settings" }),
-      /* @__PURE__ */ e("button", { className: "rdv-settings-close", onClick: () => L(!1), children: "×" })
+      /* @__PURE__ */ e("button", { className: "rdv-settings-close", onClick: () => O(!1), children: "×" })
     ] }),
     /* @__PURE__ */ c("div", { className: "rdv-settings-body", children: [
       /* @__PURE__ */ c("div", { className: "rdv-settings-section", children: [
@@ -596,7 +596,7 @@ function pn({
       ] })
     ] }),
     /* @__PURE__ */ e("div", { className: "rdv-settings-footer", children: /* @__PURE__ */ e("button", { className: "rdv-settings-apply", onClick: () => {
-      Me(), L(!1);
+      Me(), O(!1);
     }, children: "Apply & Close" }) })
   ] }) }), en = de.length > 0, Re = () => /* @__PURE__ */ c("div", { className: "rdv-toolbar", children: [
     /* @__PURE__ */ c("div", { className: "rdv-toolbar-left", children: [
@@ -613,14 +613,14 @@ function pn({
         }
       ),
       Ge && /* @__PURE__ */ e("button", { className: "rdv-toolbar-btn rdv-toolbar-clear", onClick: Le, disabled: Ne, children: "×" }),
-      D && en && /* @__PURE__ */ c(ze, { children: [
+      P && en && G && /* @__PURE__ */ c(ze, { children: [
         /* @__PURE__ */ e("div", { className: "rdv-toolbar-separator" }),
         /* @__PURE__ */ c("div", { className: "rdv-view-tabs", children: [
           /* @__PURE__ */ e(
             "button",
             {
               className: `rdv-view-tab ${J === "document" ? "rdv-view-tab--active" : ""}`,
-              onClick: () => j("document"),
+              onClick: () => k("document"),
               title: "View Document",
               children: "Document"
             }
@@ -629,7 +629,7 @@ function pn({
             "button",
             {
               className: `rdv-view-tab ${J === "revisions" ? "rdv-view-tab--active" : ""}`,
-              onClick: () => j("revisions"),
+              onClick: () => k("revisions"),
               title: "View Tracked Changes",
               children: [
                 "Changes (",
@@ -640,15 +640,15 @@ function pn({
           )
         ] })
       ] }),
-      D && Ue && /* @__PURE__ */ e("span", { className: "rdv-extracting-indicator", title: "Extracting tracked changes...", children: "..." })
+      P && Ue && /* @__PURE__ */ e("span", { className: "rdv-extracting-indicator", title: "Extracting tracked changes...", children: "..." })
     ] }),
-    /* @__PURE__ */ e("div", { className: "rdv-toolbar-center", children: N && p > 0 && J === "document" && /* @__PURE__ */ c(ze, { children: [
+    /* @__PURE__ */ e("div", { className: "rdv-toolbar-center", children: G && p > 0 && J === "document" && /* @__PURE__ */ c(ze, { children: [
       /* @__PURE__ */ e(
         "button",
         {
           className: "rdv-toolbar-btn",
           onClick: Ee,
-          disabled: B <= 1,
+          disabled: X <= 1,
           title: "Previous Page",
           children: "◀"
         }
@@ -659,7 +659,7 @@ function pn({
           {
             type: "number",
             className: "rdv-page-input",
-            value: B,
+            value: X,
             min: 1,
             max: p,
             onChange: (n) => {
@@ -678,7 +678,7 @@ function pn({
         {
           className: "rdv-toolbar-btn",
           onClick: _e,
-          disabled: B >= p,
+          disabled: X >= p,
           title: "Next Page",
           children: "▶"
         }
@@ -727,7 +727,7 @@ function pn({
       "button",
       {
         className: "rdv-toolbar-btn rdv-toolbar-settings",
-        onClick: () => L(!0),
+        onClick: () => O(!0),
         title: "Settings",
         children: "⚙"
       }
@@ -736,21 +736,21 @@ function pn({
   return /* @__PURE__ */ c("div", { className: nn, style: y, children: [
     r === "top" && /* @__PURE__ */ e(Re, {}),
     /* @__PURE__ */ c("div", { className: "rdv-content", children: [
-      x && /* @__PURE__ */ e("div", { className: "rdv-message rdv-message--error", children: /* @__PURE__ */ c("p", { children: [
+      L && /* @__PURE__ */ e("div", { className: "rdv-message rdv-message--error", children: /* @__PURE__ */ c("p", { children: [
         "Failed to initialize: ",
-        x.message
+        L.message
       ] }) }),
-      !x && (Y || W) && (F && W ? (
+      !L && (Y || B) && (F && B ? (
         // Show page placeholders while converting
         /* @__PURE__ */ e("div", { className: "rdv-pages rdv-pages--loading", children: /* @__PURE__ */ e("div", { className: "rdv-page-placeholders", style: { backgroundColor: "#525659" }, children: Array.from({ length: F.estimatedPageCount || 1 }).map((n, I) => {
-          const V = F.sections[Math.min(I, F.sections.length - 1)], Ae = a.paginationScale, E = Math.round((V?.pageWidthPt || 612) * (96 / 72) * Ae), K = Math.round((V?.pageHeightPt || 792) * (96 / 72) * Ae);
+          const V = F.sections[Math.min(I, F.sections.length - 1)], Ae = a.paginationScale, E = Math.round((V?.pageWidthPt || 612) * (96 / 72) * Ae), Q = Math.round((V?.pageHeightPt || 792) * (96 / 72) * Ae);
           return /* @__PURE__ */ c(
             "div",
             {
               className: "rdv-page-placeholder",
               style: {
                 width: `${E}px`,
-                height: `${K}px`,
+                height: `${Q}px`,
                 marginBottom: "20px"
               },
               children: [
@@ -773,20 +773,20 @@ function pn({
         }) }) })
       ) : /* @__PURE__ */ c("div", { className: "rdv-message", children: [
         /* @__PURE__ */ e("div", { className: "rdv-spinner" }),
-        /* @__PURE__ */ e("p", { children: Y && X ? "Loading engine & preparing document..." : Y ? "Loading document engine..." : "Processing document..." })
+        /* @__PURE__ */ e("p", { children: Y && N ? "Loading engine & preparing document..." : Y ? "Loading document engine..." : "Processing document..." })
       ] })),
-      !Y && !x && !N && !W && !X && /* @__PURE__ */ c("div", { className: "rdv-message", children: [
+      !Y && !L && !G && !B && !N && /* @__PURE__ */ c("div", { className: "rdv-message", children: [
         /* @__PURE__ */ e("div", { className: "rdv-message__icon", children: "📄" }),
         /* @__PURE__ */ e("p", { children: fe })
       ] }),
-      pe && !W && /* @__PURE__ */ e("div", { className: "rdv-message rdv-message--error", children: /* @__PURE__ */ c("p", { children: [
+      pe && !B && /* @__PURE__ */ e("div", { className: "rdv-message rdv-message--error", children: /* @__PURE__ */ c("p", { children: [
         "Error: ",
         pe.message
       ] }) }),
-      N && !W && J === "document" && /* @__PURE__ */ e("div", { ref: oe, className: "rdv-pages", children: /* @__PURE__ */ e(
+      J === "document" && G && !B && /* @__PURE__ */ e("div", { ref: oe, className: "rdv-pages", children: /* @__PURE__ */ e(
         cn,
         {
-          html: N,
+          html: G,
           scale: a.paginationScale,
           showPageNumbers: a.showPageNumbers,
           pageGap: 20,
@@ -798,7 +798,7 @@ function pn({
           onPageVisible: $e
         }
       ) }),
-      N && !W && J === "revisions" && /* @__PURE__ */ e(bn, { revisions: de })
+      J === "revisions" && G && !B && /* @__PURE__ */ e(bn, { revisions: de })
     ] }),
     r === "bottom" && /* @__PURE__ */ e(Re, {}),
     De && /* @__PURE__ */ e(qe, {})