draftify-react 0.2.7 → 0.2.8

package/dist/draftify-react.es.js

@@ -1,5 +1,5 @@
 import * as rr from "react";
-import Ei, { createContext as Ye, useRef as Gt, useLayoutEffect as Lu, useEffect as It, useId as ir, useContext as wt, useInsertionEffect as Po, useMemo as Ee, useCallback as Co, Children as Ou, isValidElement as _u, useState as nt, Fragment as Eo, createElement as Vu, forwardRef as Nu, Component as Uu } from "react";
+import Ei, { createContext as Ye, useRef as Gt, useLayoutEffect as Lu, useEffect as It, useId as ir, useContext as wt, useInsertionEffect as Po, useMemo as Ee, useCallback as Co, Children as Ou, isValidElement as _u, useState as rt, Fragment as Eo, createElement as Vu, forwardRef as Nu, Component as Uu } from "react";
 import { normalizeDocument as zu, normalizeBlock as yr, handleCopy as Bu, imageToBase64 as $u, modifyCustomBlock as Wu, modifyCodeBlock as Hu, modifyLinkBlock as Yu, modifyVideoBlock as Gu, modifyImageBlock as Ku, modifyTableBlock as Xu, modifyListBlock as qu, modifyQuoteBlock as Qu, modifyParagraphBlock as Zu, modifySubheadingBlock as Ju, modifyHeadingBlock as tf, createCustomBlock as vr, createCodeBlock as ef, createLinkBlock as nf, createVideoBlock as rf, createImageBlock as af, createTableBlock as sf, createListBlock as of, createQuoteBlock as lf, createParagraphBlock as cf, createSubheadingBlock as uf, createHeadingBlock as ff, handleDownloadJSON as df, exportBlocksToDocx as hf } from "draftify";
 const mf = "_container_1mz3p_3", pf = "_mediaWrapper_1mz3p_19", gf = "_mediaItem_1mz3p_37", yf = "_footerOverlay_1mz3p_49", vf = "_refreshButton_1mz3p_69", bf = "_dropzone_1mz3p_95", xf = "_uploadLabel_1mz3p_111", wf = "_uploadIconCircle_1mz3p_135", Af = "_donutContainer_1mz3p_159", Sf = "_donutOuter_1mz3p_175", Tf = "_donutInner_1mz3p_191", Ft = {
   container: mf,
@@ -2247,7 +2247,7 @@ function Ka(t) {
   }), e;
 }
 const Fh = ({ children: t, custom: e, initial: n = !0, onExitComplete: r, presenceAffectsLayout: i = !0, mode: a = "sync", propagate: s = !1, anchorX: o = "left", root: c }) => {
-  const [d, l] = xl(s), u = Ee(() => Ka(t), [t]), f = s && !d ? [] : u.map(Dn), h = Gt(!0), m = Gt(u), b = ki(() => /* @__PURE__ */ new Map()), [w, v] = nt(u), [I, S] = nt(u);
+  const [d, l] = xl(s), u = Ee(() => Ka(t), [t]), f = s && !d ? [] : u.map(Dn), h = Gt(!0), m = Gt(u), b = ki(() => /* @__PURE__ */ new Map()), [w, v] = rt(u), [I, S] = rt(u);
   Io(() => {
     h.current = !1, m.current = u;
     for (let A = 0; A < I.length; A++) {
@@ -5244,9 +5244,9 @@ try {
   typeof window < "u" && (la = window), typeof document < "u" && (lc = document), typeof MutationObserver < "u" && (cc = MutationObserver), typeof performance < "u" && (uc = performance);
 } catch {
 }
-var w0 = la.navigator || {}, Ws = w0.userAgent, Hs = Ws === void 0 ? "" : Ws, fe = la, at = lc, Ys = cc, Fn = uc;
+var w0 = la.navigator || {}, Ws = w0.userAgent, Hs = Ws === void 0 ? "" : Ws, fe = la, st = lc, Ys = cc, Fn = uc;
 fe.document;
-var ie = !!at.documentElement && !!at.head && typeof at.addEventListener == "function" && typeof at.createElement == "function", fc = ~Hs.indexOf("MSIE") || ~Hs.indexOf("Trident/"), Fr, A0 = /fa(k|kd|s|r|l|t|d|dr|dl|dt|b|slr|slpr|wsb|tl|ns|nds|es|jr|jfr|jdr|usb|ufsb|udsb|cr|ss|sr|sl|st|sds|sdr|sdl|sdt)?[\-\ ]/, S0 = /Font ?Awesome ?([567 ]*)(Solid|Regular|Light|Thin|Duotone|Brands|Free|Pro|Sharp Duotone|Sharp|Kit|Notdog Duo|Notdog|Chisel|Etch|Thumbprint|Jelly Fill|Jelly Duo|Jelly|Utility|Utility Fill|Utility Duo|Slab Press|Slab|Whiteboard)?.*/i, dc = {
+var ie = !!st.documentElement && !!st.head && typeof st.addEventListener == "function" && typeof st.createElement == "function", fc = ~Hs.indexOf("MSIE") || ~Hs.indexOf("Trident/"), Fr, A0 = /fa(k|kd|s|r|l|t|d|dr|dl|dt|b|slr|slpr|wsb|tl|ns|nds|es|jr|jfr|jdr|usb|ufsb|udsb|cr|ss|sr|sl|st|sds|sdr|sdl|sdt)?[\-\ ]/, S0 = /Font ?Awesome ?([567 ]*)(Solid|Regular|Light|Thin|Duotone|Brands|Free|Pro|Sharp Duotone|Sharp|Kit|Notdog Duo|Notdog|Chisel|Etch|Thumbprint|Jelly Fill|Jelly Duo|Jelly|Utility|Utility Fill|Utility Duo|Slab Press|Slab|Whiteboard)?.*/i, dc = {
   classic: {
     fa: "solid",
     fas: "solid",
@@ -5945,14 +5945,14 @@ var tg = A0, Nc = "fa-layers-text", eg = S0, ng = B({}, $0);
 Pn(ng);
 var rg = ["class", "data-prefix", "data-icon", "data-fa-transform", "data-fa-mask"], Or = T0, ig = [].concat($t(G0), $t(K1)), un = fe.FontAwesomeConfig || {};
 function ag(t) {
-  var e = at.querySelector("script[" + t + "]");
+  var e = st.querySelector("script[" + t + "]");
   if (e)
     return e.getAttribute(t);
 }
 function sg(t) {
   return t === "" ? !0 : t === "false" ? !1 : t === "true" ? !0 : t;
 }
-if (at && typeof at.querySelector == "function") {
+if (st && typeof st.querySelector == "function") {
   var og = [["data-family-prefix", "familyPrefix"], ["data-css-prefix", "cssPrefix"], ["data-family-default", "familyDefault"], ["data-style-default", "styleDefault"], ["data-replacement-class", "replacementClass"], ["data-auto-replace-svg", "autoReplaceSvg"], ["data-auto-add-css", "autoAddCss"], ["data-search-pseudo-elements", "searchPseudoElements"], ["data-search-pseudo-elements-warnings", "searchPseudoElementsWarnings"], ["data-search-pseudo-elements-full-scan", "searchPseudoElementsFullScan"], ["data-observe-mutations", "observeMutations"], ["data-mutate-approach", "mutateApproach"], ["data-keep-original-source", "keepOriginalSource"], ["data-measure-performance", "measurePerformance"], ["data-show-missing-icons", "showMissingIcons"]];
   og.forEach(function(t) {
     var e = cr(t, 2), n = e[0], r = e[1], i = sg(ag(n));
@@ -6020,13 +6020,13 @@ var Re = hi, Yt = {
 };
 function cg(t) {
   if (!(!t || !ie)) {
-    var e = at.createElement("style");
+    var e = st.createElement("style");
     e.setAttribute("type", "text/css"), e.innerHTML = t;
-    for (var n = at.head.childNodes, r = null, i = n.length - 1; i > -1; i--) {
+    for (var n = st.head.childNodes, r = null, i = n.length - 1; i > -1; i--) {
       var a = n[i], s = (a.tagName || "").toUpperCase();
       ["STYLE", "LINK"].indexOf(s) > -1 && (r = a);
     }
-    return at.head.insertBefore(e, r), t;
+    return st.head.insertBefore(e, r), t;
   }
 }
 var ug = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
@@ -6667,11 +6667,11 @@ re[ne].styles || (re[ne].styles = {});
 re[ne].hooks || (re[ne].hooks = {});
 re[ne].shims || (re[ne].shims = []);
 var zt = re[ne], $c = [], Wc = function() {
-  at.removeEventListener("DOMContentLoaded", Wc), Qn = 1, $c.map(function(e) {
+  st.removeEventListener("DOMContentLoaded", Wc), Qn = 1, $c.map(function(e) {
     return e();
   });
 }, Qn = !1;
-ie && (Qn = (at.documentElement.doScroll ? /^loaded|^c/ : /^loaded|^i|^c/).test(at.readyState), Qn || at.addEventListener("DOMContentLoaded", Wc));
+ie && (Qn = (st.documentElement.doScroll ? /^loaded|^c/ : /^loaded|^i|^c/).test(st.readyState), Qn || st.addEventListener("DOMContentLoaded", Wc));
 function gg(t) {
   ie && (Qn ? setTimeout(t, 0) : $c.push(t));
 }
@@ -7031,7 +7031,7 @@ var eu = new kg(), Dg = function() {
   findIconDefinition: xi,
   toHtml: Cn
 }, Lg = function() {
-  var e = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}, n = e.autoReplaceSvgRoot, r = n === void 0 ? at : n;
+  var e = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}, n = e.autoReplaceSvgRoot, r = n === void 0 ? st : n;
   (Object.keys(zt.styles).length > 0 || G.autoFetchSvg) && ie && G.autoReplaceSvg && Rt.dom.i2svg({
     node: r
   });
@@ -7048,7 +7048,7 @@ function hr(t, e) {
   }), Object.defineProperty(t, "node", {
     get: function() {
       if (ie) {
-        var r = at.createElement("div");
+        var r = st.createElement("div");
         return r.innerHTML = t.html, r.children;
       }
     }
@@ -7252,15 +7252,15 @@ function Hg() {
   return t || Bn.replace;
 }
 function Yg(t) {
-  return at.createElementNS("http://www.w3.org/2000/svg", t);
+  return st.createElementNS("http://www.w3.org/2000/svg", t);
 }
 function Gg(t) {
-  return at.createElement(t);
+  return st.createElement(t);
 }
 function ru(t) {
   var e = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {}, n = e.ceFn, r = n === void 0 ? t.tag === "svg" ? Yg : Gg : n;
   if (typeof t == "string")
-    return at.createTextNode(t);
+    return st.createTextNode(t);
   var i = r(t.tag);
   Object.keys(t.attributes || []).forEach(function(s) {
     i.setAttribute(s, t.attributes[s]);
@@ -7283,7 +7283,7 @@ var Bn = {
       if (e[1].forEach(function(i) {
         n.parentNode.insertBefore(ru(i), n);
       }), n.getAttribute(Ie) === null && G.keepOriginalSource) {
-        var r = at.createComment(Kg(n));
+        var r = st.createComment(Kg(n));
         n.parentNode.replaceChild(r, n);
       } else
         n.remove();
@@ -7334,7 +7334,7 @@ function Ti() {
 var Zn = null;
 function lo(t) {
   if (Ys && G.observeMutations) {
-    var e = t.treeCallback, n = e === void 0 ? zn : e, r = t.nodeCallback, i = r === void 0 ? zn : r, a = t.pseudoElementsCallback, s = a === void 0 ? zn : a, o = t.observeMutationsRoot, c = o === void 0 ? at : o;
+    var e = t.treeCallback, n = e === void 0 ? zn : e, r = t.nodeCallback, i = r === void 0 ? zn : r, a = t.pseudoElementsCallback, s = a === void 0 ? zn : a, o = t.observeMutationsRoot, c = o === void 0 ? st : o;
     Zn = new Ys(function(d) {
       if (!va) {
         var l = de();
@@ -7428,7 +7428,7 @@ function ey() {
 function uo(t) {
   var e = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : null;
   if (!ie) return Promise.resolve();
-  var n = at.documentElement.classList, r = function(u) {
+  var n = st.documentElement.classList, r = function(u) {
     return n.add("".concat(Xs, "-").concat(u));
   }, i = function(u) {
     return n.remove("".concat(Xs, "-").concat(u));
@@ -7529,7 +7529,7 @@ var iy = function(e) {
   },
   provides: function(e) {
     e.i2svg = function(n) {
-      var r = n.node, i = r === void 0 ? at : r, a = n.callback, s = a === void 0 ? function() {
+      var r = n.node, i = r === void 0 ? st : r, a = n.callback, s = a === void 0 ? function() {
       } : a;
       return uo(i, s);
     }, e.generateSvgReplacementMutation = function(n, r) {
@@ -7720,7 +7720,7 @@ function mo(t, e) {
             iconName: I,
             extra: P,
             watchable: !0
-          })), p = at.createElementNS("http://www.w3.org/2000/svg", "svg");
+          })), p = st.createElementNS("http://www.w3.org/2000/svg", "svg");
           e === "::before" ? t.insertBefore(p, t.firstChild) : t.appendChild(p), p.outerHTML = L.map(function(y) {
             return Cn(y);
           }).join(`
@@ -7841,7 +7841,7 @@ var yy = {
   },
   provides: function(e) {
     e.pseudoElements2svg = function(n) {
-      var r = n.node, i = r === void 0 ? at : r;
+      var r = n.node, i = r === void 0 ? st : r;
       G.searchPseudoElements && po(i);
     };
   }
@@ -8660,7 +8660,7 @@ function tv({ tableBlock: t }) {
   ] }, t.id);
 }
 function ev({ handleClick: t }) {
-  const [e, n] = nt(!1), [r, i] = nt(0), [a, s] = nt(0), [o, c] = nt({ rows: 2, cols: 2 }), [d, l] = nt(!1), u = 10, f = {
+  const [e, n] = rt(!1), [r, i] = rt(0), [a, s] = rt(0), [o, c] = rt({ rows: 2, cols: 2 }), [d, l] = rt(!1), u = 10, f = {
     position: "absolute",
     transform: "translateX(-40px) translateY(10px)",
     backgroundColor: "white",
@@ -9766,117 +9766,117 @@ const Nt = (function() {
     const D = M[0], C = M[1], O = M[2], x = M[3], g = M[4], _ = M[5];
     let F = 6, U = 8, j = 255;
     for (var N = 0; N < p.length; N++) {
-      const ot = new Uint8Array(p[N]);
-      for (var $ = ot.length, z = 0; z < $; z += 4) j &= ot[z + 3];
+      const gt = new Uint8Array(p[N]);
+      for (var $ = gt.length, z = 0; z < $; z += 4) j &= gt[z + 3];
     }
-    const V = j != 255, K = (function(rt, et, gt, St, ft, kt) {
+    const V = j != 255, K = (function(et, it, nt, St, ft, kt) {
       const dt = [];
-      for (var it = 0; it < rt.length; it++) {
-        const Tt = new Uint8Array(rt[it]), _t = new Uint32Array(Tt.buffer);
+      for (var at = 0; at < et.length; at++) {
+        const Tt = new Uint8Array(et[at]), _t = new Uint32Array(Tt.buffer);
         var Mt;
-        let Dt = 0, qt = 0, Wt = et, ge = gt, pr = St ? 1 : 0;
-        if (it != 0) {
-          const ju = kt || St || it == 1 || dt[it - 2].dispose != 0 ? 1 : 2;
+        let Dt = 0, qt = 0, Wt = it, ge = nt, pr = St ? 1 : 0;
+        if (at != 0) {
+          const ju = kt || St || at == 1 || dt[at - 2].dispose != 0 ? 1 : 2;
           let gr = 0, wa = 1e9;
           for (let Ze = 0; Ze < ju; Ze++) {
-            var ae = new Uint8Array(rt[it - 1 - Ze]);
-            const Fu = new Uint32Array(rt[it - 1 - Ze]);
-            let se = et, oe = gt, Me = -1, Je = -1;
-            for (let ye = 0; ye < gt; ye++) for (let ve = 0; ve < et; ve++)
-              _t[bt = ye * et + ve] != Fu[bt] && (ve < se && (se = ve), ve > Me && (Me = ve), ye < oe && (oe = ye), ye > Je && (Je = ye));
+            var ae = new Uint8Array(et[at - 1 - Ze]);
+            const Fu = new Uint32Array(et[at - 1 - Ze]);
+            let se = it, oe = nt, Me = -1, Je = -1;
+            for (let ye = 0; ye < nt; ye++) for (let ve = 0; ve < it; ve++)
+              _t[bt = ye * it + ve] != Fu[bt] && (ve < se && (se = ve), ve > Me && (Me = ve), ye < oe && (oe = ye), ye > Je && (Je = ye));
             Me == -1 && (se = oe = Me = Je = 0), ft && ((1 & se) == 1 && se--, (1 & oe) == 1 && oe--);
             const Aa = (Me - se + 1) * (Je - oe + 1);
             Aa < wa && (wa = Aa, gr = Ze, Dt = se, qt = oe, Wt = Me - se + 1, ge = Je - oe + 1);
           }
-          ae = new Uint8Array(rt[it - 1 - gr]), gr == 1 && (dt[it - 1].dispose = 2), Mt = new Uint8Array(Wt * ge * 4), t(ae, et, gt, Mt, Wt, ge, -Dt, -qt, 0), pr = t(Tt, et, gt, Mt, Wt, ge, -Dt, -qt, 3) ? 1 : 0, pr == 1 ? f(Tt, et, gt, Mt, { x: Dt, y: qt, width: Wt, height: ge }) : t(Tt, et, gt, Mt, Wt, ge, -Dt, -qt, 0);
+          ae = new Uint8Array(et[at - 1 - gr]), gr == 1 && (dt[at - 1].dispose = 2), Mt = new Uint8Array(Wt * ge * 4), t(ae, it, nt, Mt, Wt, ge, -Dt, -qt, 0), pr = t(Tt, it, nt, Mt, Wt, ge, -Dt, -qt, 3) ? 1 : 0, pr == 1 ? f(Tt, it, nt, Mt, { x: Dt, y: qt, width: Wt, height: ge }) : t(Tt, it, nt, Mt, Wt, ge, -Dt, -qt, 0);
         } else Mt = Tt.slice(0);
         dt.push({ rect: { x: Dt, y: qt, width: Wt, height: ge }, img: Mt, blend: pr, dispose: 0 });
       }
-      if (St) for (it = 0; it < dt.length; it++) {
-        if ((pe = dt[it]).blend == 1) continue;
-        const Tt = pe.rect, _t = dt[it - 1].rect, Dt = Math.min(Tt.x, _t.x), qt = Math.min(Tt.y, _t.y), Wt = { x: Dt, y: qt, width: Math.max(Tt.x + Tt.width, _t.x + _t.width) - Dt, height: Math.max(Tt.y + Tt.height, _t.y + _t.height) - qt };
-        dt[it - 1].dispose = 1, it - 1 != 0 && u(rt, et, gt, dt, it - 1, Wt, ft), u(rt, et, gt, dt, it, Wt, ft);
+      if (St) for (at = 0; at < dt.length; at++) {
+        if ((pe = dt[at]).blend == 1) continue;
+        const Tt = pe.rect, _t = dt[at - 1].rect, Dt = Math.min(Tt.x, _t.x), qt = Math.min(Tt.y, _t.y), Wt = { x: Dt, y: qt, width: Math.max(Tt.x + Tt.width, _t.x + _t.width) - Dt, height: Math.max(Tt.y + Tt.height, _t.y + _t.height) - qt };
+        dt[at - 1].dispose = 1, at - 1 != 0 && u(et, it, nt, dt, at - 1, Wt, ft), u(et, it, nt, dt, at, Wt, ft);
       }
       let En = 0;
-      if (rt.length != 1) for (var bt = 0; bt < dt.length; bt++) {
+      if (et.length != 1) for (var bt = 0; bt < dt.length; bt++) {
         var pe;
         En += (pe = dt[bt]).rect.width * pe.rect.height;
       }
       return dt;
     })(p, y, T, D, C, O), q = {}, J = [], tt = [];
     if (k != 0) {
-      const ot = [];
-      for (z = 0; z < K.length; z++) ot.push(K[z].img.buffer);
-      const rt = (function(ft) {
+      const gt = [];
+      for (z = 0; z < K.length; z++) gt.push(K[z].img.buffer);
+      const et = (function(ft) {
         let kt = 0;
         for (var dt = 0; dt < ft.length; dt++) kt += ft[dt].byteLength;
-        const it = new Uint8Array(kt);
+        const at = new Uint8Array(kt);
         let Mt = 0;
         for (dt = 0; dt < ft.length; dt++) {
           const ae = new Uint8Array(ft[dt]), En = ae.length;
           for (let bt = 0; bt < En; bt += 4) {
             let pe = ae[bt], Tt = ae[bt + 1], _t = ae[bt + 2];
             const Dt = ae[bt + 3];
-            Dt == 0 && (pe = Tt = _t = 0), it[Mt + bt] = pe, it[Mt + bt + 1] = Tt, it[Mt + bt + 2] = _t, it[Mt + bt + 3] = Dt;
+            Dt == 0 && (pe = Tt = _t = 0), at[Mt + bt] = pe, at[Mt + bt + 1] = Tt, at[Mt + bt + 2] = _t, at[Mt + bt + 3] = Dt;
           }
           Mt += En;
         }
-        return it.buffer;
-      })(ot), et = b(rt, k);
-      for (z = 0; z < et.plte.length; z++) J.push(et.plte[z].est.rgba);
-      let gt = 0;
+        return at.buffer;
+      })(gt), it = b(et, k);
+      for (z = 0; z < it.plte.length; z++) J.push(it.plte[z].est.rgba);
+      let nt = 0;
       for (z = 0; z < K.length; z++) {
         const St = (Y = K[z]).img.length;
-        var H = new Uint8Array(et.inds.buffer, gt >> 2, St >> 2);
+        var H = new Uint8Array(it.inds.buffer, nt >> 2, St >> 2);
         tt.push(H);
-        const ft = new Uint8Array(et.abuf, gt, St);
-        _ && o(Y.img, Y.rect.width, Y.rect.height, J, ft, H), Y.img.set(ft), gt += St;
+        const ft = new Uint8Array(it.abuf, nt, St);
+        _ && o(Y.img, Y.rect.width, Y.rect.height, J, ft, H), Y.img.set(ft), nt += St;
       }
     } else for (N = 0; N < K.length; N++) {
       var Y = K[N];
-      const ot = new Uint32Array(Y.img.buffer);
+      const gt = new Uint32Array(Y.img.buffer);
       var W = Y.rect.width;
-      for ($ = ot.length, H = new Uint8Array($), tt.push(H), z = 0; z < $; z++) {
-        const rt = ot[z];
-        if (z != 0 && rt == ot[z - 1]) H[z] = H[z - 1];
-        else if (z > W && rt == ot[z - W]) H[z] = H[z - W];
+      for ($ = gt.length, H = new Uint8Array($), tt.push(H), z = 0; z < $; z++) {
+        const et = gt[z];
+        if (z != 0 && et == gt[z - 1]) H[z] = H[z - 1];
+        else if (z > W && et == gt[z - W]) H[z] = H[z - W];
         else {
-          let et = q[rt];
-          if (et == null && (q[rt] = et = J.length, J.push(rt), J.length >= 300)) break;
-          H[z] = et;
+          let it = q[et];
+          if (it == null && (q[et] = it = J.length, J.push(et), J.length >= 300)) break;
+          H[z] = it;
         }
       }
     }
     const Z = J.length;
     for (Z <= 256 && g == 0 && (U = Z <= 2 ? 1 : Z <= 4 ? 2 : Z <= 16 ? 4 : 8, U = Math.max(U, x)), N = 0; N < K.length; N++) {
       (Y = K[N]).rect.x, Y.rect.y, W = Y.rect.width;
-      const ot = Y.rect.height;
-      let rt = Y.img;
-      new Uint32Array(rt.buffer);
-      let et = 4 * W, gt = 4;
+      const gt = Y.rect.height;
+      let et = Y.img;
+      new Uint32Array(et.buffer);
+      let it = 4 * W, nt = 4;
       if (Z <= 256 && g == 0) {
-        et = Math.ceil(U * W / 8);
-        var pt = new Uint8Array(et * ot);
+        it = Math.ceil(U * W / 8);
+        var pt = new Uint8Array(it * gt);
         const St = tt[N];
-        for (let ft = 0; ft < ot; ft++) {
-          z = ft * et;
+        for (let ft = 0; ft < gt; ft++) {
+          z = ft * it;
           const kt = ft * W;
-          if (U == 8) for (var st = 0; st < W; st++) pt[z + st] = St[kt + st];
-          else if (U == 4) for (st = 0; st < W; st++) pt[z + (st >> 1)] |= St[kt + st] << 4 - 4 * (1 & st);
-          else if (U == 2) for (st = 0; st < W; st++) pt[z + (st >> 2)] |= St[kt + st] << 6 - 2 * (3 & st);
-          else if (U == 1) for (st = 0; st < W; st++) pt[z + (st >> 3)] |= St[kt + st] << 7 - 1 * (7 & st);
+          if (U == 8) for (var ot = 0; ot < W; ot++) pt[z + ot] = St[kt + ot];
+          else if (U == 4) for (ot = 0; ot < W; ot++) pt[z + (ot >> 1)] |= St[kt + ot] << 4 - 4 * (1 & ot);
+          else if (U == 2) for (ot = 0; ot < W; ot++) pt[z + (ot >> 2)] |= St[kt + ot] << 6 - 2 * (3 & ot);
+          else if (U == 1) for (ot = 0; ot < W; ot++) pt[z + (ot >> 3)] |= St[kt + ot] << 7 - 1 * (7 & ot);
         }
-        rt = pt, F = 3, gt = 1;
+        et = pt, F = 3, nt = 1;
       } else if (V == 0 && K.length == 1) {
-        pt = new Uint8Array(W * ot * 3);
-        const St = W * ot;
+        pt = new Uint8Array(W * gt * 3);
+        const St = W * gt;
         for (z = 0; z < St; z++) {
           const ft = 3 * z, kt = 4 * z;
-          pt[ft] = rt[kt], pt[ft + 1] = rt[kt + 1], pt[ft + 2] = rt[kt + 2];
+          pt[ft] = et[kt], pt[ft + 1] = et[kt + 1], pt[ft + 2] = et[kt + 2];
         }
-        rt = pt, F = 2, gt = 3, et = 3 * W;
+        et = pt, F = 2, nt = 3, it = 3 * W;
       }
-      Y.img = rt, Y.bpl = et, Y.bpp = gt;
+      Y.img = et, Y.bpl = it, Y.bpp = nt;
     }
     return { ctype: F, depth: U, plte: J, frames: K };
   }
@@ -10577,7 +10577,7 @@ function mv({ progress: t = null }) {
   ) });
 }
 function So({ mediaBlock: t, modifyMedia: e }) {
-  const [n, r] = nt(""), [i, a] = nt(""), [s, o] = nt(""), [c, d] = nt(""), [l, u] = nt(!1), [f, h] = nt(null), m = Gt(null);
+  const [n, r] = rt(""), [i, a] = rt(""), [s, o] = rt(""), [c, d] = rt(""), [l, u] = rt(!1), [f, h] = rt(null), m = Gt(null);
   It(() => {
     window.addEventListener("dragover", (w) => w.preventDefault()), window.addEventListener("drop", (w) => w.preventDefault());
   }, []), It(() => {
@@ -10704,7 +10704,7 @@ const Ci = {
   fontSize: "14px"
 };
 function yv({ linkBlock: t, modifyLink: e }) {
-  const [n, r] = nt(t.data.linkText), [i, a] = nt(t.data.url);
+  const [n, r] = rt(t.data.linkText), [i, a] = rt(t.data.url);
   return It(() => {
     e({ linkBlockId: t.id, linkText: n, url: i });
   }, [n, i, t.id]), /* @__PURE__ */ R.jsxs("div", { style: { display: "flex" }, children: [
@@ -10842,7 +10842,7 @@ function wv({
   }
 }
 function sn({ text: t, children: e }) {
-  const [n, r] = nt(!1), i = {
+  const [n, r] = rt(!1), i = {
     position: "relative",
     display: "inline-block"
   }, a = {
@@ -10895,7 +10895,7 @@ const To = [
   { id: 13, type: "custom-3", iconText: "C3" }
 ];
 function Av({ handleClick: t, options: e }) {
-  const [n, r] = nt(null), i = (o, c) => {
+  const [n, r] = rt(null), i = (o, c) => {
     r(o), t(c);
   }, a = e.map((o) => {
     if (o.includes("-")) {
@@ -10989,7 +10989,7 @@ function Tv({
   setPromptAction: i,
   handleCopy: a
 }) {
-  const [s, o] = nt(!1), [c, d] = nt(null), l = Gt(null);
+  const [s, o] = rt(!1), [c, d] = rt(null), l = Gt(null);
   It(() => {
     l.current && (l.current.style.transform = t === "editor" ? "translateX(14px)" : "translateX(1px)");
   }, [t]), It(() => {
@@ -11121,7 +11121,7 @@ function Tv({
   );
 }
 function Pv() {
-  const [t, e] = nt(!1), n = {
+  const [t, e] = rt(!1), n = {
     display: "flex",
     flexDirection: "column",
     justifyContent: "center",
@@ -11191,7 +11191,7 @@ function Ev({
   handlePromptAction: o,
   setPromptVisiblility: c
 }) {
-  const [d, l] = nt(null), u = {
+  const [d, l] = rt(null), u = {
     width: "100%",
     border: "1px solid #d1d5db",
     borderRadius: "0.375rem",
@@ -11296,11 +11296,11 @@ function Iv({
   defaultCustomData3: i,
   localStorageEnable: a
 }) {
-  const [s, o] = nt({
+  const [s, o] = rt({
     metadata: {},
     version: "1.0.0",
     blocks: t
-  }), [c, d] = nt(""), [l, u] = nt(""), [f, h] = nt(""), [m, b] = nt([]), [w, v] = nt("editor"), [I, S] = nt(!1), [E, P] = nt("");
+  }), [c, d] = rt(""), [l, u] = rt(""), [f, h] = rt(""), [m, b] = rt([]), [w, v] = rt("editor"), [I, S] = rt(!1), [E, P] = rt("");
   It(() => {
     if (!Array.isArray(t))
       throw new Error(
@@ -11656,56 +11656,58 @@ function Qv({
   // enable localStorage
   localStorageEnable: f,
   // enable Draftify background
-  backgroundEnable: h
+  backgroundEnable: h,
+  // draftify container background set
+  DraftifyBackground: m
 }) {
   const {
     // current view
-    view: m,
-    setView: b,
+    view: b,
+    setView: w,
     // background grid
-    gridDots: w,
-    setGridDots: v,
+    gridDots: v,
+    setGridDots: I,
     // document metadata
-    docTitle: I,
-    setDocTitle: S,
-    description: E,
-    setDescription: P,
-    author: A,
-    setAuthor: L,
+    docTitle: S,
+    setDocTitle: E,
+    description: P,
+    setDescription: A,
+    author: L,
+    setAuthor: p,
     // copy blocks
-    handleCopy: p,
+    handleCopy: y,
     // prompt handlers
-    handlePromptAction: y,
-    promptAction: T,
-    setPromptAction: k,
-    promptVisibility: M,
-    setPromptVisiblility: D,
+    handlePromptAction: T,
+    promptAction: k,
+    setPromptAction: M,
+    promptVisibility: D,
+    setPromptVisiblility: C,
     // block creator
-    handleClick: C,
+    handleClick: O,
     // block modifiers
-    modifyHeading: O,
-    modifySubheading: x,
-    modifyParagraph: g,
-    modifyQuote: _,
-    modifyList: F,
-    modifyTable: U,
-    modifyImage: j,
-    modifyVideo: N,
-    modifyLink: $,
-    modifyCode: z,
-    modifyCustom: V,
+    modifyHeading: x,
+    modifySubheading: g,
+    modifyParagraph: _,
+    modifyQuote: F,
+    modifyList: U,
+    modifyTable: j,
+    modifyImage: N,
+    modifyVideo: $,
+    modifyLink: z,
+    modifyCode: V,
+    modifyCustom: K,
     // drag and drop handlers
-    onDropHandler: K,
-    onDragStart: q,
-    onDragEnd: J,
-    onDragEnter: tt,
-    onDragLeave: H,
-    containerVariants: Y,
-    itemVariants: W,
-    transitions: Z,
-    whileHover: pt,
+    onDropHandler: q,
+    onDragStart: J,
+    onDragEnd: tt,
+    onDragEnter: H,
+    onDragLeave: Y,
+    containerVariants: W,
+    itemVariants: Z,
+    transitions: pt,
+    whileHover: ot,
     // block delete
-    handleDelete: st
+    handleDelete: gt
   } = Iv({
     blocksData: t,
     modifyBlocks: e,
@@ -11714,105 +11716,112 @@ function Qv({
     defaultCustomData3: u,
     localStorageEnable: f
   });
-  return kv(v), /* @__PURE__ */ R.jsxs("div", { className: "draftify-root", children: [
-    h && /* @__PURE__ */ R.jsx(Cv, { gridDots: w }),
-    /* @__PURE__ */ R.jsxs("div", { className: "draftify-container", children: [
-      /* @__PURE__ */ R.jsx(
-        Tv,
-        {
-          view: m,
-          setView: b,
-          blocksData: t,
-          setPromptAction: k,
-          setPromptVisiblility: D,
-          handleCopy: p
-        }
-      ),
-      M && /* @__PURE__ */ R.jsx(
-        Ev,
-        {
-          docTitle: I,
-          setDocTitle: S,
-          description: E,
-          setDescription: P,
-          author: A,
-          setAuthor: L,
-          promptAction: T,
-          handlePromptAction: y,
-          setPromptVisiblility: D
-        }
-      ),
-      m === "editor" && /* @__PURE__ */ R.jsxs(R.Fragment, { children: [
-        /* @__PURE__ */ R.jsx(Av, { handleClick: C, options: n }),
-        /* @__PURE__ */ R.jsx("div", { className: "editor-area", onSubmit: (ot) => ot.preventDefault(), children: /* @__PURE__ */ R.jsx(
-          zs.div,
-          {
-            style: { display: "grid", gap: "10px" },
-            variants: Y,
-            animate: "show",
-            exit: "hidden",
-            children: /* @__PURE__ */ R.jsx(Fh, { children: t.map((ot, rt) => /* @__PURE__ */ R.jsxs(
+  return kv(I), /* @__PURE__ */ R.jsxs("div", { className: "draftify-root", children: [
+    h && /* @__PURE__ */ R.jsx(Cv, { gridDots: v }),
+    /* @__PURE__ */ R.jsxs(
+      "div",
+      {
+        style: { backgroundColor: m },
+        className: "draftify-container",
+        children: [
+          /* @__PURE__ */ R.jsx(
+            Tv,
+            {
+              view: b,
+              setView: w,
+              blocksData: t,
+              setPromptAction: M,
+              setPromptVisiblility: C,
+              handleCopy: y
+            }
+          ),
+          D && /* @__PURE__ */ R.jsx(
+            Ev,
+            {
+              docTitle: S,
+              setDocTitle: E,
+              description: P,
+              setDescription: A,
+              author: L,
+              setAuthor: p,
+              promptAction: k,
+              handlePromptAction: T,
+              setPromptVisiblility: C
+            }
+          ),
+          b === "editor" && /* @__PURE__ */ R.jsxs(R.Fragment, { children: [
+            /* @__PURE__ */ R.jsx(Av, { handleClick: O, options: n }),
+            /* @__PURE__ */ R.jsx("div", { className: "editor-area", onSubmit: (et) => et.preventDefault(), children: /* @__PURE__ */ R.jsx(
               zs.div,
               {
-                layout: !0,
+                style: { display: "grid", gap: "10px" },
                 variants: W,
-                transition: Z,
-                whileHover: pt,
-                draggable: !0,
-                onDragStart: (et) => q(et, rt),
-                onDragEnd: (et) => J(et),
-                onDragOver: (et) => et.preventDefault(),
-                onDragEnter: (et) => tt(et),
-                onDragLeave: (et) => H(et),
-                onDrop: (et) => K(et, rt),
-                className: "block-container",
-                children: [
-                  /* @__PURE__ */ R.jsx(Pv, {}),
-                  /* @__PURE__ */ R.jsx(
-                    wv,
-                    {
-                      block: ot,
-                      modifyHeading: O,
-                      modifySubheading: x,
-                      modifyParagraph: g,
-                      modifyQuote: _,
-                      modifyList: F,
-                      modifyTable: U,
-                      modifyImage: j,
-                      modifyVideo: N,
-                      modifyLink: $,
-                      modifyCode: z,
-                      modifyCustom: V,
-                      CustomEditor1: r,
-                      CustomEditor2: i,
-                      CustomEditor3: a
-                    }
-                  ),
-                  /* @__PURE__ */ R.jsx(
-                    Xt,
-                    {
-                      icon: ["fas", "trash"],
-                      className: "delete-icon",
-                      onClick: () => st(ot.id)
-                    }
-                  )
-                ]
-              },
-              ot.id
-            )) })
-          }
-        ) })
-      ] }),
-      m === "preview" && /* @__PURE__ */ R.jsx("div", { className: "output-area", onSubmit: (ot) => ot.preventDefault(), children: /* @__PURE__ */ R.jsx(
-        Sv,
-        {
-          blocksData: t,
-          CustomOutput1: s,
-          CustomOutput2: o,
-          CustomOutput3: c
-        }
-      ) })
-    ] })
+                animate: "show",
+                exit: "hidden",
+                children: /* @__PURE__ */ R.jsx(Fh, { children: t.map((et, it) => /* @__PURE__ */ R.jsxs(
+                  zs.div,
+                  {
+                    layout: !0,
+                    variants: Z,
+                    transition: pt,
+                    whileHover: ot,
+                    draggable: !0,
+                    onDragStart: (nt) => J(nt, it),
+                    onDragEnd: (nt) => tt(nt),
+                    onDragOver: (nt) => nt.preventDefault(),
+                    onDragEnter: (nt) => H(nt),
+                    onDragLeave: (nt) => Y(nt),
+                    onDrop: (nt) => q(nt, it),
+                    className: "block-container",
+                    children: [
+                      /* @__PURE__ */ R.jsx(Pv, {}),
+                      /* @__PURE__ */ R.jsx(
+                        wv,
+                        {
+                          block: et,
+                          modifyHeading: x,
+                          modifySubheading: g,
+                          modifyParagraph: _,
+                          modifyQuote: F,
+                          modifyList: U,
+                          modifyTable: j,
+                          modifyImage: N,
+                          modifyVideo: $,
+                          modifyLink: z,
+                          modifyCode: V,
+                          modifyCustom: K,
+                          CustomEditor1: r,
+                          CustomEditor2: i,
+                          CustomEditor3: a
+                        }
+                      ),
+                      /* @__PURE__ */ R.jsx(
+                        Xt,
+                        {
+                          icon: ["fas", "trash"],
+                          className: "delete-icon",
+                          onClick: () => gt(et.id)
+                        }
+                      )
+                    ]
+                  },
+                  et.id
+                )) })
+              }
+            ) })
+          ] }),
+          b === "preview" && /* @__PURE__ */ R.jsx("div", { className: "output-area", onSubmit: (et) => et.preventDefault(), children: /* @__PURE__ */ R.jsx(
+            Sv,
+            {
+              blocksData: t,
+              CustomOutput1: s,
+              CustomOutput2: o,
+              CustomOutput3: c
+            }
+          ) })
+        ]
+      }
+    )
   ] });
 }
 export {