@superdoc-dev/esign 1.4.2 → 2.0.0-next.1

package/dist/index.mjs

@@ -1,24 +1,29 @@
-import { jsxs as x, jsx as a } from "react/jsx-runtime";
-import { forwardRef as le, useState as v, useRef as b, useEffect as F, useCallback as y, useImperativeHandle as de } from "react";
-const ue = ({
-  value: d,
-  onChange: m,
-  isDisabled: c,
-  label: s
-}) => /* @__PURE__ */ x(
+import { jsxs as b, jsx as d } from "react/jsx-runtime";
+import { forwardRef as ye, useState as v, useRef as C, useEffect as A, useCallback as D, useImperativeHandle as ve } from "react";
+const be = (u) => {
+  const l = globalThis.document.createElement("canvas"), s = l.getContext("2d"), o = 30;
+  s.font = `italic ${o}px cursive`;
+  const a = s.measureText(u).width, m = o * 1.3, p = 4, R = 6;
+  return l.width = Math.ceil(a + p * 2) + 20, l.height = Math.ceil(m + R * 2), s.font = `italic ${o}px cursive`, s.fillStyle = "black", s.textAlign = "center", s.textBaseline = "middle", s.fillText(u, l.width / 2, l.height / 2), l.toDataURL("image/png");
+}, xe = ({
+  value: u,
+  onChange: l,
+  isDisabled: s,
+  label: o
+}) => /* @__PURE__ */ b(
   "div",
   {
     className: "superdoc-esign-signature-input",
     style: { display: "flex", flexDirection: "column", gap: "8px" },
     children: [
-      s && /* @__PURE__ */ a("label", { children: s }),
-      /* @__PURE__ */ a(
+      o && /* @__PURE__ */ d("label", { children: o }),
+      /* @__PURE__ */ d(
         "input",
         {
           type: "text",
-          value: String(d || ""),
-          onChange: (r) => m(r.target.value),
-          disabled: c,
+          value: String(u || ""),
+          onChange: (r) => l(r.target.value),
+          disabled: s,
           placeholder: "Type your full name",
           style: {
             fontFamily: "cursive",
@@ -28,323 +33,401 @@ const ue = ({
       )
     ]
   }
-), pe = ({
-  value: d,
-  onChange: m,
-  isDisabled: c,
-  label: s
-}) => /* @__PURE__ */ x("label", { className: "superdoc-esign-checkbox-input", style: { display: "flex", gap: "8px" }, children: [
-  /* @__PURE__ */ a(
+), we = ({
+  value: u,
+  onChange: l,
+  isDisabled: s,
+  label: o
+}) => /* @__PURE__ */ b("label", { className: "superdoc-esign-checkbox-input", style: { display: "flex", gap: "8px" }, children: [
+  /* @__PURE__ */ d(
     "input",
     {
       type: "checkbox",
-      checked: !!d,
-      onChange: (r) => m(r.target.checked),
-      disabled: c
+      checked: !!u,
+      onChange: (r) => l(r.target.checked),
+      disabled: s
     }
   ),
-  /* @__PURE__ */ a("span", { children: s })
-] }), me = (d) => ({ onClick: c, fileName: s, isDisabled: r }) => {
-  const u = d?.label || "Download";
-  return /* @__PURE__ */ x(
+  /* @__PURE__ */ d("span", { children: o })
+] }), Se = (u) => ({
+  onClick: s,
+  fileName: o,
+  isDisabled: r,
+  isDownloading: a
+}) => {
+  const m = u?.label || "Download", p = r || a;
+  return /* @__PURE__ */ b(
     "button",
     {
-      onClick: c,
-      disabled: r,
-      className: "superdoc-esign-btn superdoc-esign-btn--download",
+      onClick: s,
+      disabled: p,
+      className: `superdoc-esign-btn superdoc-esign-btn--download${a ? " superdoc-esign-btn--loading" : ""}`,
       style: {
         padding: "8px 16px",
         borderRadius: "6px",
         border: "1px solid #d0d5dd",
         background: "#ffffff",
         color: "#333",
-        cursor: r ? "not-allowed" : "pointer",
-        opacity: r ? 0.5 : 1,
+        cursor: p ? "not-allowed" : "pointer",
+        opacity: p ? 0.7 : 1,
         fontSize: "16px",
-        fontWeight: "bold"
+        fontWeight: "bold",
+        display: "inline-flex",
+        alignItems: "center",
+        gap: "8px",
+        transition: "opacity 0.2s ease"
       },
       children: [
-        u,
-        " ",
-        s && `(${s})`
+        a && /* @__PURE__ */ d("span", { className: "superdoc-esign-spinner" }),
+        a ? "Downloading..." : m,
+        !a && o && ` (${o})`
       ]
     }
   );
-}, ge = (d) => ({
-  onClick: c,
-  isValid: s,
+}, Ce = (u) => ({
+  onClick: s,
+  isValid: o,
   isDisabled: r,
-  isSubmitting: u
-}) => /* @__PURE__ */ a(
-  "button",
-  {
-    onClick: c,
-    disabled: !s || r || u,
-    className: "superdoc-esign-btn superdoc-esign-btn--submit",
-    style: {
-      padding: "12px 24px",
-      borderRadius: "6px",
-      border: "none",
-      background: "#007bff",
-      color: "#fff",
-      cursor: !s || r ? "not-allowed" : "pointer",
-      opacity: !s || r ? 0.5 : 1,
-      fontSize: "16px",
-      fontWeight: "bold"
-    },
-    children: d?.label || "Submit"
-  }
-), fe = le(
-  (d, m) => {
+  isSubmitting: a
+}) => {
+  const m = u?.label || "Submit", p = !o || r || a;
+  return /* @__PURE__ */ b(
+    "button",
+    {
+      onClick: s,
+      disabled: p,
+      className: `superdoc-esign-btn superdoc-esign-btn--submit${a ? " superdoc-esign-btn--loading" : ""}`,
+      style: {
+        padding: "12px 24px",
+        borderRadius: "6px",
+        border: "none",
+        background: "#007bff",
+        color: "#fff",
+        cursor: p ? "not-allowed" : "pointer",
+        opacity: p && !a ? 0.5 : 1,
+        fontSize: "16px",
+        fontWeight: "bold",
+        display: "inline-flex",
+        alignItems: "center",
+        gap: "8px",
+        transition: "opacity 0.2s ease"
+      },
+      children: [
+        a && /* @__PURE__ */ d("span", { className: "superdoc-esign-spinner superdoc-esign-spinner--light" }),
+        a ? "Submitting..." : m
+      ]
+    }
+  );
+}, De = ye(
+  (u, l) => {
     const {
-      eventId: c,
-      document: s,
+      eventId: s,
+      document: o,
       fields: r = {},
-      download: u,
-      submit: R,
-      onSubmit: k,
-      onDownload: M,
-      onStateChange: A,
-      onFieldChange: I,
-      onFieldsDiscovered: q,
-      isDisabled: g = !1,
-      className: P,
-      style: K,
-      documentHeight: X = "600px"
-    } = d, [S, B] = v(!s.validation?.scroll?.required), [l, _] = v(/* @__PURE__ */ new Map()), [w, U] = v(!1), [f, V] = v(!1), [H, L] = v([]), [z, Y] = v(!1), N = b(null), T = b(null), G = b(Date.now()), h = b(r), C = b([]), O = b(q);
-    h.current = r, O.current = q, F(() => {
-      C.current = H;
-    }, [H]);
-    const E = y((e) => {
-      if (!T.current?.activeEditor) return;
-      const t = T.current.activeEditor, n = h.current.signer?.find((o) => o.id === e.id);
-      let i;
-      n?.type === "signature" && e.value ? i = {
+      download: a,
+      submit: m,
+      onSubmit: p,
+      onDownload: R,
+      onStateChange: _,
+      onFieldChange: z,
+      onFieldsDiscovered: U,
+      isDisabled: f = !1,
+      className: te,
+      style: ne,
+      documentHeight: oe = "600px"
+    } = u, [x, $] = v(!o.validation?.scroll?.required), [g, H] = v(/* @__PURE__ */ new Map()), [w, O] = v(!1), [h, j] = v(!1), [q, P] = v(!1), [W, L] = v([]), [K, re] = v(!1), k = C(null), F = C(null), se = C(Date.now()), S = C(r), M = C([]), X = C(U);
+    S.current = r, X.current = U, A(() => {
+      M.current = W;
+    }, [W]);
+    const y = D((e) => {
+      if (!F.current?.activeEditor) return;
+      const t = F.current.activeEditor, i = S.current.signer?.find((n) => n.id === e.id);
+      if (e.type === "table" && Array.isArray(e.value)) {
+        const T = t.helpers?.structuredContentCommands?.getStructuredContentTablesById?.(e.id, t.state) || [];
+        if (T.length) {
+          const { node: B, pos: me } = T[0], Q = B.childCount;
+          if (Q > 1) {
+            let E = t.state.tr;
+            for (let I = Q - 1; I >= 1; I--) {
+              let Z = 1;
+              for (let V = 0; V < I; V++)
+                Z += B.child(V).nodeSize;
+              const fe = B.child(I), ee = me + Z, he = ee + fe.nodeSize;
+              E = E.delete(E.mapping.map(ee), E.mapping.map(he));
+            }
+            t.view?.dispatch(E);
+          }
+          t.commands?.appendRowsToStructuredContentTable?.({
+            id: e.id,
+            rows: e.value,
+            copyRowStyle: !0
+          });
+        }
+        return;
+      }
+      let c;
+      i?.type === "signature" && e.value ? c = {
         json: {
           type: "image",
-          attrs: { src: typeof e.value == "string" && e.value.startsWith("data:image/") ? e.value : J(String(e.value)), alt: "Signature" }
+          attrs: { src: typeof e.value == "string" && e.value.startsWith("data:image/") ? e.value : be(String(e.value)), alt: "Signature" }
         }
-      } : i = { text: String(e.value ?? "") }, e.id && t.commands.updateStructuredContentById(e.id, i);
-    }, []);
-    function J(e) {
-      const t = globalThis.document.createElement("canvas"), n = t.getContext("2d"), i = 30;
-      n.font = `italic ${i}px cursive`;
-      const p = n.measureText(e).width, ie = i * 1.3, ae = 4, ce = 6;
-      return t.width = Math.ceil(p + ae * 2) + 20, t.height = Math.ceil(ie + ce * 2), n.font = `italic ${i}px cursive`, n.fillStyle = "black", n.textAlign = "center", n.textBaseline = "middle", n.fillText(e, t.width / 2, t.height / 2), t.toDataURL("image/png");
-    }
-    const W = y(
+      } : c = { text: String(e.value ?? "") }, e.id && t.commands?.updateStructuredContentById?.(e.id, c);
+    }, []), Y = D(
       (e) => {
         if (!e) return;
         const t = e.helpers.structuredContentCommands.getStructuredContentTags(
           e.state
-        ), n = /* @__PURE__ */ new Map();
-        h.current.document?.forEach((o) => {
-          o.id && n.set(o.id, o.value);
-        }), h.current.signer?.forEach((o) => {
-          o.value !== void 0 && n.set(o.id, o.value);
+        ), i = /* @__PURE__ */ new Map();
+        S.current.document?.forEach((n) => {
+          n.id && i.set(n.id, n.value);
+        }), S.current.signer?.forEach((n) => {
+          n.value !== void 0 && i.set(n.id, n.value);
         });
-        const i = t.map(({ node: o }) => ({
-          id: o.attrs.id,
-          label: o.attrs.label,
-          value: n.get(o.attrs.id) ?? o.textContent ?? ""
-        })).filter((o) => o.id);
-        i.length > 0 && (O.current?.(i), [
-          ...h.current.document || [],
-          ...h.current.signer || []
-        ].filter((p) => p.value !== void 0).forEach(
-          (p) => E({
-            id: p.id,
-            value: p.value
+        const c = t.map(({ node: n }) => ({
+          id: n.attrs.id,
+          label: n.attrs.label,
+          value: i.get(n.attrs.id) ?? n.textContent ?? ""
+        })).filter((n) => n.id);
+        c.length > 0 && (X.current?.(c), (S.current.document || []).filter((n) => n.value !== void 0).forEach(
+          (n) => y({
+            id: n.id,
+            value: n.value,
+            type: n.type
+          })
+        ), (S.current.signer || []).filter((n) => n.value !== void 0).forEach(
+          (n) => y({
+            id: n.id,
+            value: n.value
           })
         ));
       },
-      [E]
-    ), D = (e) => {
+      [y]
+    ), N = (e) => {
       const t = {
         ...e,
         timestamp: (/* @__PURE__ */ new Date()).toISOString()
-      }, n = globalThis?.__SUPERDOC_AUDIT_MOCK__;
-      n && n(t);
-      const i = [...C.current, t];
-      return C.current = i, L(i), i;
+      }, i = globalThis?.__SUPERDOC_AUDIT_MOCK__;
+      i && i(t);
+      const c = [...M.current, t];
+      return M.current = c, L(c), c;
     };
-    F(() => {
-      if (!N.current) return;
+    A(() => {
+      if (!k.current) return;
       let e = !1, t = null;
       return (async () => {
-        const { SuperDoc: i } = await import("superdoc");
-        e || (t = new i({
-          selector: N.current,
-          document: s.source,
+        const { SuperDoc: c } = await import("superdoc");
+        e || (t = new c({
+          selector: k.current,
+          document: o.source,
           documentMode: "viewing",
           modules: {
             comments: !1
           },
+          // @ts-expect-error - layoutMode is not supported in SuperDoc v1.1.0 yet
+          layoutMode: o.layoutMode,
+          layoutMargins: o.layoutMargins,
           onReady: () => {
-            e || (t?.activeEditor && W(t.activeEditor), D({ type: "ready" }), Y(!0));
+            e || (t?.activeEditor && Y(t.activeEditor), N({ type: "ready" }), re(!0));
           }
-        }), T.current = t);
+        }), F.current = t);
       })(), () => {
-        e = !0, t && typeof t.destroy == "function" && t.destroy(), T.current = null;
+        e = !0, t && typeof t.destroy == "function" && t.destroy(), F.current = null;
       };
-    }, [s.source, s.mode, W]), F(() => {
-      if (!s.validation?.scroll?.required || !z) return;
-      const e = N.current;
+    }, [
+      o.source,
+      o.mode,
+      o.layoutMode,
+      o.layoutMargins?.top,
+      o.layoutMargins?.bottom,
+      o.layoutMargins?.left,
+      o.layoutMargins?.right,
+      Y
+    ]), A(() => {
+      if (!o.validation?.scroll?.required || !K) return;
+      const e = k.current;
       if (!e) return;
       const t = () => {
-        const { scrollTop: n, scrollHeight: i, clientHeight: o } = e, p = n / (i - o);
-        (p >= 0.95 || i <= o) && (B(!0), D({
+        const { scrollTop: i, scrollHeight: c, clientHeight: n } = e, T = i / (c - n);
+        (T >= 0.95 || c <= n) && ($(!0), N({
           type: "scroll",
-          data: { percent: Math.round(p * 100) }
+          data: { percent: Math.round(T * 100) }
         }));
       };
       return e.addEventListener("scroll", t), t(), () => e.removeEventListener("scroll", t);
-    }, [s.validation?.scroll?.required, z]);
-    const Q = y(
+    }, [o.validation?.scroll?.required, K]);
+    const ae = D(
       (e, t) => {
-        _((n) => {
-          const i = n.get(e), o = new Map(n);
-          return o.set(e, t), E({
+        H((i) => {
+          const c = i.get(e), n = new Map(i);
+          return n.set(e, t), y({
             id: e,
             value: t
-          }), D({
+          }), N({
             type: "field_change",
-            data: { fieldId: e, value: t, previousValue: i }
-          }), I?.({
+            data: { fieldId: e, value: t, previousValue: c }
+          }), z?.({
             id: e,
             value: t,
-            previousValue: i
-          }), o;
+            previousValue: c
+          }), n;
         });
       },
-      [I, E]
-    ), $ = y(() => s.validation?.scroll?.required && !S ? !1 : (r.signer || []).every((e) => {
+      [z, y]
+    ), G = D(() => o.validation?.scroll?.required && !x ? !1 : (r.signer || []).every((e) => {
       if (!e.validation?.required) return !0;
-      const t = l.get(e.id);
+      const t = g.get(e.id);
       return t && (typeof t != "string" || t.trim());
-    }), [S, r.signer, l, s.validation?.scroll?.required]);
-    F(() => {
-      const e = $();
-      U(e), A?.({
-        scrolled: S,
-        fields: l,
+    }), [x, r.signer, g, o.validation?.scroll?.required]);
+    A(() => {
+      const e = G();
+      O(e), _?.({
+        scrolled: x,
+        fields: g,
         isValid: e,
-        isSubmitting: f
+        isSubmitting: h
       });
-    }, [S, l, f, $, A]);
-    const Z = y(async () => {
-      if (g) return;
+    }, [x, g, h, G, _]);
+    const ie = D(async () => {
+      if (f || q) return;
+      P(!0);
       const e = {
-        eventId: c,
-        documentSource: s.source,
+        eventId: s,
+        documentSource: o.source,
         fields: {
           document: r.document || [],
           signer: (r.signer || []).map((t) => ({
             id: t.id,
-            value: l.get(t.id) ?? null
+            value: g.get(t.id) ?? null
           }))
         },
-        fileName: u?.fileName || "document.pdf"
+        fileName: a?.fileName || "document.pdf"
       };
-      await M?.(e);
-    }, [g, c, s.source, r, l, u, M]), ee = y(async () => {
-      if (!w || g || f) return;
-      V(!0), D({ type: "submit" });
-      const e = D({ type: "submit" }), t = {
-        eventId: c,
+      try {
+        await R?.(e);
+      } finally {
+        P(!1);
+      }
+    }, [
+      f,
+      q,
+      s,
+      o.source,
+      r,
+      g,
+      a,
+      R
+    ]), ce = D(async () => {
+      if (!w || f || h) return;
+      j(!0), N({ type: "submit" });
+      const e = N({ type: "submit" }), t = {
+        eventId: s,
         timestamp: (/* @__PURE__ */ new Date()).toISOString(),
-        duration: Math.floor((Date.now() - G.current) / 1e3),
+        duration: Math.floor((Date.now() - se.current) / 1e3),
         auditTrail: e,
         documentFields: r.document || [],
-        signerFields: (r.signer || []).map((n) => ({
-          id: n.id,
-          value: l.get(n.id) ?? null
+        signerFields: (r.signer || []).map((i) => ({
+          id: i.id,
+          value: g.get(i.id) ?? null
         })),
         isFullyCompleted: w
       };
       try {
-        await k(t);
+        await p(t);
       } finally {
-        V(!1);
+        j(!1);
       }
-    }, [w, g, f, c, r, l, k]), te = (e) => {
-      const t = e.component || ne(e.type);
-      return /* @__PURE__ */ a(
+    }, [w, f, h, s, r, g, p]), le = (e) => {
+      const t = e.component || de(e.type);
+      return /* @__PURE__ */ d(
         t,
         {
-          value: l.get(e.id) ?? null,
-          onChange: (n) => Q(e.id, n),
-          isDisabled: g,
+          value: g.get(e.id) ?? null,
+          onChange: (i) => ae(e.id, i),
+          isDisabled: f,
           label: e.label
         },
         e.id
       );
-    }, ne = (e) => {
+    }, de = (e) => {
       switch (e) {
         case "signature":
         case "text":
-          return ue;
+          return xe;
         case "checkbox":
-          return pe;
+          return we;
       }
-    }, re = () => {
-      const e = u?.component || me(u);
-      return e ? /* @__PURE__ */ a(
+    }, ue = () => {
+      const e = a?.component || Se(a);
+      return e ? /* @__PURE__ */ d(
         e,
         {
-          onClick: Z,
-          fileName: u?.fileName,
-          isDisabled: g
+          onClick: ie,
+          fileName: a?.fileName,
+          isDisabled: f,
+          isDownloading: q
         }
       ) : null;
-    }, oe = () => {
-      if (s.mode === "download")
+    }, pe = () => {
+      if (o.mode === "download")
         return null;
-      const e = R?.component || ge(R);
-      return /* @__PURE__ */ a("div", { className: "superdoc-esign-actions superdoc-esign-form-actions", children: /* @__PURE__ */ a(
+      const e = m?.component || Ce(m);
+      return /* @__PURE__ */ d("div", { className: "superdoc-esign-actions superdoc-esign-form-actions", children: /* @__PURE__ */ d(
         e,
         {
-          onClick: ee,
+          onClick: ce,
           isValid: w,
-          isDisabled: g,
-          isSubmitting: f
+          isDisabled: f,
+          isSubmitting: h
         }
       ) });
-    }, j = re(), se = oe();
-    return de(m, () => ({
-      getState: () => ({
-        scrolled: S,
-        fields: l,
-        isValid: w,
-        isSubmitting: f
+    }, J = ue(), ge = pe();
+    return ve(
+      l,
+      () => ({
+        getState: () => ({
+          scrolled: x,
+          fields: g,
+          isValid: w,
+          isSubmitting: h
+        }),
+        getAuditTrail: () => M.current,
+        reset: () => {
+          $(!o.validation?.scroll?.required), H(/* @__PURE__ */ new Map()), O(!1), M.current = [], L([]);
+        },
+        updateFieldInDocument: y
       }),
-      getAuditTrail: () => C.current,
-      reset: () => {
-        B(!s.validation?.scroll?.required), _(/* @__PURE__ */ new Map()), U(!1), C.current = [], L([]);
-      }
-    })), /* @__PURE__ */ x("div", { className: `superdoc-esign-container ${P || ""}`, style: K, children: [
-      /* @__PURE__ */ x("div", { className: "superdoc-esign-document", "data-testid": "superdoc-esign-document", children: [
-        j && /* @__PURE__ */ a("div", { className: "superdoc-esign-document-toolbar", children: /* @__PURE__ */ a("div", { className: "superdoc-esign-document-controls", children: j }) }),
-        /* @__PURE__ */ a(
+      [
+        x,
+        g,
+        w,
+        h,
+        o.validation?.scroll?.required,
+        y
+      ]
+    ), /* @__PURE__ */ b("div", { className: `superdoc-esign-container ${te || ""}`, style: ne, children: [
+      /* @__PURE__ */ b("div", { className: "superdoc-esign-document", "data-testid": "superdoc-esign-document", children: [
+        J && /* @__PURE__ */ d("div", { className: "superdoc-esign-document-toolbar", children: /* @__PURE__ */ d("div", { className: "superdoc-esign-document-controls", children: J }) }),
+        /* @__PURE__ */ d(
           "div",
           {
-            ref: N,
+            ref: k,
             className: "superdoc-esign-document-viewer",
             "data-testid": "superdoc-scroll-container",
-            style: { height: X, overflow: "auto" }
+            style: { height: oe, overflow: "auto" }
           }
         )
       ] }),
-      /* @__PURE__ */ x("div", { className: "superdoc-esign-controls", "data-testid": "superdoc-esign-controls", children: [
-        r.signer && r.signer.length > 0 && /* @__PURE__ */ a("div", { className: "superdoc-esign-fields", "data-testid": "superdoc-esign-fields", children: r.signer.map(te) }),
-        se
+      /* @__PURE__ */ b("div", { className: "superdoc-esign-controls", "data-testid": "superdoc-esign-controls", children: [
+        r.signer && r.signer.length > 0 && /* @__PURE__ */ d("div", { className: "superdoc-esign-fields", "data-testid": "superdoc-esign-fields", children: r.signer.map(le) }),
+        ge
       ] })
     ] });
   }
 );
-fe.displayName = "SuperDocESign";
+De.displayName = "SuperDocESign";
 export {
-  pe as CheckboxInput,
-  ue as SignatureInput,
-  fe as default
+  we as CheckboxInput,
+  xe as SignatureInput,
+  De as default,
+  be as textToImageDataUrl
 };