@superdoc-dev/esign
Version:
React eSignature component for SuperDoc
719 lines (718 loc) • 21.4 kB
JavaScript
import pe, { forwardRef as me, useState as I, useRef as L, useEffect as te, useCallback as M, useImperativeHandle as ge } from "react";
var re = { exports: {} }, W = {};
/**
* @license React
* react-jsx-runtime.production.js
*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var ie;
function ve() {
if (ie) return W;
ie = 1;
var g = Symbol.for("react.transitional.element"), v = Symbol.for("react.fragment");
function m(a, n, f) {
var x = null;
if (f !== void 0 && (x = "" + f), n.key !== void 0 && (x = "" + n.key), "key" in n) {
f = {};
for (var S in n)
S !== "key" && (f[S] = n[S]);
} else f = n;
return n = f.ref, {
$$typeof: g,
type: a,
key: x,
ref: n !== void 0 ? n : null,
props: f
};
}
return W.Fragment = v, W.jsx = m, W.jsxs = m, W;
}
var V = {};
/**
* @license React
* react-jsx-runtime.development.js
*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var ce;
function be() {
return ce || (ce = 1, process.env.NODE_ENV !== "production" && (function() {
function g(e) {
if (e == null) return null;
if (typeof e == "function")
return e.$$typeof === oe ? null : e.displayName || e.name || null;
if (typeof e == "string") return e;
switch (e) {
case _:
return "Fragment";
case b:
return "Profiler";
case H:
return "StrictMode";
case T:
return "Suspense";
case Z:
return "SuspenseList";
case K:
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 ne:
return "Portal";
case A:
return e.displayName || "Context";
case G:
return (e._context.displayName || "Context") + ".Consumer";
case X:
var r = e.render;
return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
case Q:
return r = e.displayName || null, r !== null ? r : g(e.type) || "Memo";
case P:
r = e._payload, e = e._init;
try {
return g(e(r));
} catch {
}
}
return null;
}
function v(e) {
return "" + e;
}
function m(e) {
try {
v(e);
var r = !1;
} catch {
r = !0;
}
if (r) {
r = console;
var c = r.error, u = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
return c.call(
r,
"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
u
), v(e);
}
}
function a(e) {
if (e === _) return "<>";
if (typeof e == "object" && e !== null && e.$$typeof === P)
return "<...>";
try {
var r = g(e);
return r ? "<" + r + ">" : "<...>";
} catch {
return "<...>";
}
}
function n() {
var e = w.A;
return e === null ? null : e.getOwner();
}
function f() {
return Error("react-stack-top-frame");
}
function x(e) {
if (y.call(e, "key")) {
var r = Object.getOwnPropertyDescriptor(e, "key").get;
if (r && r.isReactWarning) return !1;
}
return e.key !== void 0;
}
function S(e, r) {
function c() {
k || (k = !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
));
}
c.isReactWarning = !0, Object.defineProperty(e, "key", {
get: c,
configurable: !0
});
}
function z() {
var e = g(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 B(e, r, c, u, D, q) {
var d = c.ref;
return e = {
$$typeof: J,
type: e,
key: r,
props: c,
_owner: u
}, (d !== void 0 ? d : null) !== null ? Object.defineProperty(e, "ref", {
enumerable: !1,
get: z
}) : 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: D
}), Object.defineProperty(e, "_debugTask", {
configurable: !1,
enumerable: !1,
writable: !0,
value: q
}), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
}
function Y(e, r, c, u, D, q) {
var d = r.children;
if (d !== void 0)
if (u)
if (ae(d)) {
for (u = 0; u < d.length; u++)
$(d[u]);
Object.freeze && Object.freeze(d);
} 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 $(d);
if (y.call(r, "key")) {
d = g(e);
var C = Object.keys(r).filter(function(se) {
return se !== "key";
});
u = 0 < C.length ? "{key: someKey, " + C.join(": ..., ") + ": ...}" : "{key: someKey}", j[d + u] || (C = 0 < C.length ? "{" + C.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} />`,
u,
d,
C,
d
), j[d + u] = !0);
}
if (d = null, c !== void 0 && (m(c), d = "" + c), x(r) && (m(r.key), d = "" + r.key), "key" in r) {
c = {};
for (var F in r)
F !== "key" && (c[F] = r[F]);
} else c = r;
return d && S(
c,
typeof e == "function" ? e.displayName || e.name || "Unknown" : e
), B(
e,
d,
c,
n(),
D,
q
);
}
function $(e) {
h(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === P && (e._payload.status === "fulfilled" ? h(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
}
function h(e) {
return typeof e == "object" && e !== null && e.$$typeof === J;
}
var O = pe, J = Symbol.for("react.transitional.element"), ne = Symbol.for("react.portal"), _ = Symbol.for("react.fragment"), H = Symbol.for("react.strict_mode"), b = Symbol.for("react.profiler"), G = Symbol.for("react.consumer"), A = Symbol.for("react.context"), X = Symbol.for("react.forward_ref"), T = Symbol.for("react.suspense"), Z = Symbol.for("react.suspense_list"), Q = Symbol.for("react.memo"), P = Symbol.for("react.lazy"), K = Symbol.for("react.activity"), oe = Symbol.for("react.client.reference"), w = O.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, y = Object.prototype.hasOwnProperty, ae = Array.isArray, E = console.createTask ? console.createTask : function() {
return null;
};
O = {
react_stack_bottom_frame: function(e) {
return e();
}
};
var k, N = {}, ee = O.react_stack_bottom_frame.bind(
O,
f
)(), U = E(a(f)), j = {};
V.Fragment = _, V.jsx = function(e, r, c) {
var u = 1e4 > w.recentlyCreatedOwnerStacks++;
return Y(
e,
r,
c,
!1,
u ? Error("react-stack-top-frame") : ee,
u ? E(a(e)) : U
);
}, V.jsxs = function(e, r, c) {
var u = 1e4 > w.recentlyCreatedOwnerStacks++;
return Y(
e,
r,
c,
!0,
u ? Error("react-stack-top-frame") : ee,
u ? E(a(e)) : U
);
};
})()), V;
}
var le;
function xe() {
return le || (le = 1, process.env.NODE_ENV === "production" ? re.exports = ve() : re.exports = be()), re.exports;
}
var p = xe();
const he = ({
value: g,
onChange: v,
isDisabled: m,
label: a
}) => /* @__PURE__ */ p.jsxs(
"div",
{
className: "superdoc-esign-signature-input",
style: { display: "flex", flexDirection: "column", gap: "8px" },
children: [
a && /* @__PURE__ */ p.jsx("label", { children: a }),
/* @__PURE__ */ p.jsx(
"input",
{
type: "text",
value: String(g || ""),
onChange: (n) => v(n.target.value),
disabled: m,
placeholder: "Type your full name",
style: {
fontFamily: "cursive",
fontSize: "18px"
}
}
)
]
}
), ye = ({
value: g,
onChange: v,
isDisabled: m,
label: a
}) => /* @__PURE__ */ p.jsxs(
"label",
{
className: "superdoc-esign-checkbox-input",
style: { display: "flex", gap: "8px" },
children: [
/* @__PURE__ */ p.jsx(
"input",
{
type: "checkbox",
checked: !!g,
onChange: (n) => v(n.target.checked),
disabled: m
}
),
/* @__PURE__ */ p.jsx("span", { children: a })
]
}
), Ee = (g) => ({
onClick: m,
fileName: a,
isDisabled: n
}) => {
const f = g?.label || "Download";
return /* @__PURE__ */ p.jsxs(
"button",
{
onClick: m,
disabled: n,
className: "superdoc-esign-btn superdoc-esign-btn--download",
style: {
padding: "8px 16px",
borderRadius: "6px",
border: "1px solid #d0d5dd",
background: "#ffffff",
color: "#333",
cursor: n ? "not-allowed" : "pointer",
opacity: n ? 0.5 : 1,
fontSize: "16px",
fontWeight: "bold"
},
children: [
f,
" ",
a && `(${a})`
]
}
);
}, _e = (g) => ({
onClick: m,
isValid: a,
isDisabled: n,
isSubmitting: f
}) => {
const x = () => g?.label || "Submit";
return /* @__PURE__ */ p.jsx(
"button",
{
onClick: m,
disabled: !a || n || f,
className: "superdoc-esign-btn superdoc-esign-btn--submit",
style: {
padding: "12px 24px",
borderRadius: "6px",
border: "none",
background: "#007bff",
color: "#fff",
cursor: !a || n ? "not-allowed" : "pointer",
opacity: !a || n ? 0.5 : 1,
fontSize: "16px",
fontWeight: "bold"
},
children: x()
}
);
}, Re = me(
(g, v) => {
const {
eventId: m,
document: a,
fields: n = {},
download: f,
submit: x,
onSubmit: S,
onDownload: z,
onStateChange: B,
onFieldChange: Y,
onFieldsDiscovered: $,
isDisabled: h = !1,
className: O,
style: J,
documentHeight: ne = "600px"
} = g, [_, H] = I(
!a.validation?.scroll?.required
), [b, G] = I(
/* @__PURE__ */ new Map()
), [A, X] = I(!1), [T, Z] = I(!1), [Q, P] = I([]), [K, oe] = I(!1), w = L(null), y = L(null), ae = L(Date.now()), E = L(n), k = L([]);
E.current = n, te(() => {
k.current = Q;
}, [Q]);
const N = M((t) => {
if (!y.current?.activeEditor) return;
const o = y.current.activeEditor, s = E.current.signer?.find(
(i) => i.id === t.id
);
let l;
s?.type === "signature" && t.value ? l = {
json: {
type: "image",
attrs: { src: typeof t.value == "string" && t.value.startsWith("data:image/") ? t.value : ee(String(t.value)), alt: "Signature" }
}
} : l = { text: String(t.value ?? "") }, t.id && o.commands.updateStructuredContentById(t.id, l);
}, []);
function ee(t) {
const o = globalThis.document.createElement("canvas"), s = o.getContext("2d"), l = 30;
s.font = `italic ${l}px cursive`;
const R = s.measureText(t).width, ue = l * 1.3, de = 4, fe = 6;
return o.width = Math.ceil(R + de * 2) + 20, o.height = Math.ceil(ue + fe * 2), s.font = `italic ${l}px cursive`, s.fillStyle = "black", s.textAlign = "center", s.textBaseline = "middle", s.fillText(t, o.width / 2, o.height / 2), o.toDataURL("image/png");
}
const U = M(
(t) => {
if (!t) return;
const o = t.helpers.structuredContentCommands.getStructuredContentTags(
t.state
), s = /* @__PURE__ */ new Map();
E.current.document?.forEach((i) => {
i.id && s.set(i.id, i.value);
}), E.current.signer?.forEach((i) => {
i.value !== void 0 && s.set(i.id, i.value);
});
const l = o.map(({ node: i }) => ({
id: i.attrs.id,
label: i.attrs.label,
value: s.get(i.attrs.id) ?? i.textContent ?? ""
})).filter((i) => i.id);
l.length > 0 && ($?.(l), [
...E.current.document || [],
...E.current.signer || []
].filter((R) => R.value !== void 0).forEach(
(R) => N({
id: R.id,
value: R.value
})
));
},
[$, N]
), j = (t) => {
const o = {
...t,
timestamp: (/* @__PURE__ */ new Date()).toISOString()
}, s = globalThis?.__SUPERDOC_AUDIT_MOCK__;
s && s(o);
const l = [...k.current, o];
return k.current = l, P(l), l;
};
te(() => w.current ? ((async () => {
const { SuperDoc: o } = await import("./superdoc.es-CqejOF1J.js").then((l) => l.D), s = new o({
selector: w.current,
document: a.source,
documentMode: "viewing",
onReady: () => {
s.activeEditor && U(s.activeEditor), j({ type: "ready" }), oe(!0);
}
});
y.current = s;
})(), () => {
y.current && (typeof y.current.destroy == "function" && y.current.destroy(), y.current = null);
}) : void 0, [a.source, a.mode, U]), te(() => {
if (!a.validation?.scroll?.required || !K) return;
const t = w.current;
if (!t) return;
const o = () => {
const { scrollTop: s, scrollHeight: l, clientHeight: i } = t, R = s / (l - i);
(R >= 0.95 || l <= i) && (H(!0), j({
type: "scroll",
data: { percent: Math.round(R * 100) }
}));
};
return t.addEventListener("scroll", o), o(), () => t.removeEventListener("scroll", o);
}, [a.validation?.scroll?.required, K]);
const e = M(
(t, o) => {
G((s) => {
const l = s.get(t), i = new Map(s);
return i.set(t, o), N({
id: t,
value: o
}), j({
type: "field_change",
data: { fieldId: t, value: o, previousValue: l }
}), Y?.({
id: t,
value: o,
previousValue: l
}), i;
});
},
[Y, N]
), r = M(() => a.validation?.scroll?.required && !_ ? !1 : (n.signer || []).every((t) => {
if (!t.validation?.required) return !0;
const o = b.get(t.id);
return o && (typeof o != "string" || o.trim());
}), [
_,
n.signer,
b,
a.validation?.scroll?.required
]);
te(() => {
const t = r();
X(t), B?.({
scrolled: _,
fields: b,
isValid: t,
isSubmitting: T
});
}, [_, b, T, r, B]);
const c = M(async () => {
if (h) return;
const t = {
eventId: m,
documentSource: a.source,
fields: {
document: n.document || [],
signer: (n.signer || []).map((o) => ({
id: o.id,
value: b.get(o.id) ?? null
}))
},
fileName: f?.fileName || "document.pdf"
};
await z?.(t);
}, [
h,
m,
a.source,
n,
b,
f,
z
]), u = M(async () => {
if (!A || h || T) return;
Z(!0), j({ type: "submit" });
const t = j({ type: "submit" }), o = {
eventId: m,
timestamp: (/* @__PURE__ */ new Date()).toISOString(),
duration: Math.floor((Date.now() - ae.current) / 1e3),
auditTrail: t,
documentFields: n.document || [],
signerFields: (n.signer || []).map((s) => ({
id: s.id,
value: b.get(s.id) ?? null
})),
isFullyCompleted: A
};
try {
await S(o);
} finally {
Z(!1);
}
}, [
A,
h,
T,
m,
n,
b,
S
]), D = (t) => {
const o = t.component || q(t.type);
return /* @__PURE__ */ p.jsx(
o,
{
value: b.get(t.id) ?? null,
onChange: (s) => e(t.id, s),
isDisabled: h,
label: t.label
},
t.id
);
}, q = (t) => {
switch (t) {
case "signature":
case "text":
return he;
case "checkbox":
return ye;
}
}, d = () => {
const t = f?.component || Ee(f);
return t ? /* @__PURE__ */ p.jsx(
t,
{
onClick: c,
fileName: f?.fileName,
isDisabled: h
}
) : null;
}, C = () => {
if (a.mode === "download")
return null;
const t = x?.component || _e(x);
return /* @__PURE__ */ p.jsx(
"div",
{
className: "superdoc-esign-actions superdoc-esign-form-actions",
style: { display: "flex", gap: "10px" },
children: /* @__PURE__ */ p.jsx(
t,
{
onClick: u,
isValid: A,
isDisabled: h,
isSubmitting: T
}
)
}
);
}, F = d(), se = C();
return ge(v, () => ({
getState: () => ({
scrolled: _,
fields: b,
isValid: A,
isSubmitting: T
}),
getAuditTrail: () => k.current,
reset: () => {
H(!a.validation?.scroll?.required), G(/* @__PURE__ */ new Map()), X(!1), k.current = [], P([]);
}
})), /* @__PURE__ */ p.jsxs(
"div",
{
className: `superdoc-esign-container ${O || ""}`,
style: J,
children: [
/* @__PURE__ */ p.jsxs(
"div",
{
className: "superdoc-esign-document",
"data-testid": "superdoc-esign-document",
style: { display: "flex", flexDirection: "column" },
children: [
F && /* @__PURE__ */ p.jsx(
"div",
{
className: "superdoc-esign-document-toolbar",
style: {
display: "flex",
justifyContent: "flex-end",
alignItems: "center",
padding: "8px 12px"
},
children: /* @__PURE__ */ p.jsx(
"div",
{
className: "superdoc-esign-document-controls",
style: { display: "flex", gap: "8px" },
children: F
}
)
}
),
/* @__PURE__ */ p.jsx(
"div",
{
ref: w,
className: "superdoc-esign-document-viewer",
"data-testid": "superdoc-scroll-container",
style: { height: ne, overflow: "auto" }
}
)
]
}
),
/* @__PURE__ */ p.jsxs(
"div",
{
className: "superdoc-esign-controls",
style: { marginTop: "20px" },
"data-testid": "superdoc-esign-controls",
children: [
n.signer && n.signer.length > 0 && /* @__PURE__ */ p.jsx(
"div",
{
className: "superdoc-esign-fields",
style: { marginBottom: "20px" },
"data-testid": "superdoc-esign-fields",
children: n.signer.map(D)
}
),
se
]
}
)
]
}
);
}
);
Re.displayName = "SuperDocESign";
export {
ye as CheckboxInput,
he as SignatureInput,
Re as default
};