monto-email-builder 1.2.0 → 1.2.2

package/dist/HtmlEditor/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/HtmlEditor/index.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAUL,OAAO,EACP,KAAK,EAEN,MAAM,eAAe,CAAC;AAQvB,OAAO,EAAE,QAAQ,EAAK,MAAM,SAAS,CAAC;AAEtC,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;AAC1D,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,QAAQ,CAAC;AA8DpD,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC;;;OAGG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB;;;OAGG;IACH,WAAW,CAAC,EAAE,cAAc,CAAC;IAC7B;;;OAGG;IACH,aAAa,CAAC,EAAE,gBAAgB,CAAC;IACjC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;IACpB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,KAAK,EACL,QAAQ,EACR,QAAe,EACf,WAAqB,EACrB,aAAyB,EACzB,gBAAyB,EACzB,aAAsB,EACtB,EAAE,EACF,WAAkB,EAClB,YAAY,GACb,EAAE,eAAe,2CAgVjB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/HtmlEditor/index.tsx"],"names":[],"mappings":"AAiBA,OAAO,EASL,OAAO,EACP,KAAK,EAGN,MAAM,eAAe,CAAC;AAQvB,OAAO,EAAE,QAAQ,EAAK,MAAM,SAAS,CAAC;AAEtC,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;AAC1D,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,QAAQ,CAAC;AA8DpD,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC;;;OAGG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB;;;OAGG;IACH,WAAW,CAAC,EAAE,cAAc,CAAC;IAC7B;;;OAGG;IACH,aAAa,CAAC,EAAE,gBAAgB,CAAC;IACjC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;IACpB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,KAAK,EACL,QAAQ,EACR,QAAe,EACf,WAAqB,EACrB,aAAyB,EACzB,gBAAyB,EACzB,aAAsB,EACtB,EAAE,EACF,WAAkB,EAClB,YAAY,GACb,EAAE,eAAe,2CA4WjB"}

package/dist/html-editor.js

@@ -1,116 +1,134 @@
-import { jsxs as d, jsx as e, Fragment as re } from "react/jsx-runtime";
-import { useState as v, useRef as N, useEffect as w, useMemo as ie } from "react";
-import le from "@uiw/react-codemirror";
-import { html as ne } from "@codemirror/lang-html";
-import { xcodeDark as de, tomorrowNightBlue as ae, dracula as W, basicDark as se, abcdef as ce, bbedit as he, noctisLilac as me, gruvboxLight as ue, tokyoNightDay as pe, vscodeLight as fe, xcodeLight as ge } from "@uiw/codemirror-themes-all";
-import { Box as i, ToggleButtonGroup as O, Tooltip as u, ToggleButton as p, FormControl as xe, InputLabel as be, Select as ve, ListSubheader as z, MenuItem as B } from "@mui/material";
-import { ViewColumn as Ee, Code as we, Visibility as ye, DesktopWindowsOutlined as Le, PhoneAndroid as Te } from "@mui/icons-material";
-import { t as De } from "./chunks/chunk-CxhtzHBZ.js";
-const y = {
+import { jsxs as d, jsx as e, Fragment as ye } from "react/jsx-runtime";
+import { useState as E, useRef as q, useEffect as T, useMemo as Ee } from "react";
+import we from "@uiw/react-codemirror";
+import { html as Le } from "@codemirror/lang-html";
+import { xcodeDark as Te, tomorrowNightBlue as Ce, dracula as ee, basicDark as De, abcdef as ke, bbedit as Se, noctisLilac as He, gruvboxLight as Fe, tokyoNightDay as Me, vscodeLight as Pe, xcodeLight as Oe } from "@uiw/codemirror-themes-all";
+import { useTheme as Ne, Box as i, ToggleButtonGroup as K, Tooltip as g, ToggleButton as x, FormControl as ze, InputLabel as Be, Select as Ie, ListSubheader as U, MenuItem as J } from "@mui/material";
+import { alpha as Q } from "@mui/material/styles";
+import { ViewColumn as We, Code as Ve, Visibility as je, MonitorOutlined as _e, PhoneIphoneOutlined as Re } from "@mui/icons-material";
+import { t as Ye } from "./chunks/chunk-CxhtzHBZ.js";
+const C = {
   // 浅色主题
-  xcodeLight: ge,
-  vscodeLight: fe,
-  tokyoNightDay: pe,
-  gruvboxLight: ue,
-  noctisLilac: me,
-  bbedit: he,
+  xcodeLight: Oe,
+  vscodeLight: Pe,
+  tokyoNightDay: Me,
+  gruvboxLight: Fe,
+  noctisLilac: He,
+  bbedit: Se,
   // 深色主题
-  abcdef: ce,
-  basicDark: se,
-  dracula: W,
-  tomorrowNightBlue: ae,
-  xcodeDark: de
-}, Ce = {
+  abcdef: ke,
+  basicDark: De,
+  dracula: ee,
+  tomorrowNightBlue: Ce,
+  xcodeDark: Te
+}, Ae = {
   xcodeLight: "Xcode Light (Light)",
   vscodeLight: "VSCode Light (Light)",
   tokyoNightDay: "Tokyo Night Day (Light)",
   gruvboxLight: "Gruvbox Light (Light)",
   noctisLilac: "Noctis Lilac (Light)",
   bbedit: "BBEdit (Light)"
-}, Se = {
+}, Ge = {
   abcdef: "ABCDEF (Dark)",
   basicDark: "Basic Dark (Dark)",
   dracula: "Dracula (Dark)",
   tomorrowNightBlue: "Tomorrow Night Blue (Dark)",
   xcodeDark: "Xcode Dark (Dark)"
-}, I = "html-editor-theme", P = "dracula";
-function He(l = P) {
-  const a = l && y[l] ? l : P;
-  if (typeof window > "u") return a;
+}, te = "html-editor-theme", Z = "dracula";
+function $e(l = Z) {
+  const s = l && C[l] ? l : Z;
+  if (typeof window > "u") return s;
   try {
-    const h = localStorage.getItem(I);
-    if (h && y[h]) return h;
+    const p = localStorage.getItem(te);
+    if (p && C[p]) return p;
   } catch {
     console.error("Failed to get HTML Editor stored theme");
   }
-  return a;
+  return s;
 }
-function ke(l) {
+function Xe(l) {
   try {
-    localStorage.setItem(I, l);
+    localStorage.setItem(te, l);
   } catch {
     console.error("Failed to set HTML Editor stored theme", l);
   }
 }
-function Ve({
+function lt({
   value: l,
-  onChange: a,
-  language: h = "zh",
-  initialMode: j = "split",
-  initialDevice: V = "desktop",
-  codeEditorHeight: _ = "100%",
-  previewHeight: R = "100%",
-  sx: A,
-  showToolbar: Y = !0,
-  initialTheme: G
+  onChange: s,
+  language: p = "zh",
+  initialMode: oe = "split",
+  initialDevice: re = "desktop",
+  codeEditorHeight: ie = "100%",
+  previewHeight: le = "100%",
+  sx: ne,
+  showToolbar: de = !0,
+  initialTheme: se
 }) {
-  const r = (o, t) => De(o, t, h), [s, $] = v(j), [f, X] = v(V), [L, q] = v(() => He(G)), [g, T] = v(l), m = N(null), x = N(null);
-  w(() => {
-    l !== g && T(l);
+  var M, P, O, N, z, B, I, W, V, j, _, R;
+  const r = (o, t) => Ye(o, t, p), [a, ae] = E(oe), [c, ce] = E(re), [D, he] = E(() => $e(se)), [b, k] = E(l), u = q(null), v = q(null);
+  T(() => {
+    l !== b && k(l);
   }, [l]);
-  const K = (o) => {
-    T(o), m.current && clearTimeout(m.current), m.current = setTimeout(() => {
-      a == null || a(o);
+  const me = (o) => {
+    k(o), u.current && clearTimeout(u.current), u.current = setTimeout(() => {
+      s == null || s(o);
     }, 300);
   };
-  w(() => () => {
-    m.current && clearTimeout(m.current);
+  T(() => () => {
+    u.current && clearTimeout(u.current);
   }, []);
-  const U = (o) => {
-    var H, k, F;
+  const pe = (o) => {
+    var A, G, $;
     const t = o || "";
-    let c = t;
+    let m = t;
     if (!t.trim())
-      c = "<!DOCTYPE html><html><head></head><body></body></html>";
+      m = "<!DOCTYPE html><html><head></head><body></body></html>";
     else {
-      const n = new DOMParser().parseFromString(t, "text/html"), E = ((H = n.documentElement) == null ? void 0 : H.tagName.toLowerCase()) === "html", ee = ((k = n.head) == null ? void 0 : k.tagName.toLowerCase()) === "head", te = ((F = n.body) == null ? void 0 : F.tagName.toLowerCase()) === "body";
-      if (!E || !ee || !te) {
-        const oe = n.body ? n.body.innerHTML : t;
-        c = `<!DOCTYPE html><html><head>${n.head ? n.head.innerHTML : ""}</head><body>${oe}</body></html>`;
+      const n = new DOMParser().parseFromString(t, "text/html"), L = ((A = n.documentElement) == null ? void 0 : A.tagName.toLowerCase()) === "html", xe = ((G = n.head) == null ? void 0 : G.tagName.toLowerCase()) === "head", be = (($ = n.body) == null ? void 0 : $.tagName.toLowerCase()) === "body";
+      if (!L || !xe || !be) {
+        const ve = n.body ? n.body.innerHTML : t;
+        m = `<!DOCTYPE html><html><head>${n.head ? n.head.innerHTML : ""}</head><body>${ve}</body></html>`;
       } else
-        c = `<!DOCTYPE html>${n.documentElement.outerHTML}`;
+        m = `<!DOCTYPE html>${n.documentElement.outerHTML}`;
     }
-    const Z = ["script", "iframe", "object", "embed", "canvas"], S = new DOMParser().parseFromString(c, "text/html");
-    return Z.forEach((M) => {
-      S.querySelectorAll(M).forEach((E) => E.remove());
-    }), c = `<!DOCTYPE html>${S.documentElement.outerHTML}`, c;
-  }, b = ie(() => U(g), [g]);
-  w(() => {
-    x.current && x.current.srcdoc !== b && (x.current.srcdoc = b);
-  }, [b]);
-  const J = (o, t) => {
-    t !== null && $(t);
-  }, Q = (o, t) => {
-    t !== null && X(t);
-  }, D = () => /* @__PURE__ */ e(
+    const ge = ["script", "iframe", "object", "embed", "canvas"], Y = new DOMParser().parseFromString(m, "text/html");
+    return ge.forEach((X) => {
+      Y.querySelectorAll(X).forEach((L) => L.remove());
+    }), m = `<!DOCTYPE html>${Y.documentElement.outerHTML}`, m;
+  }, y = Ee(() => pe(b), [b]);
+  T(() => {
+    v.current && v.current.srcdoc !== y && (v.current.srcdoc = y);
+  }, [y]);
+  const ue = (o, t) => {
+    t !== null && ae(t);
+  }, fe = (o, t) => {
+    (t === "desktop" || t === "mobile") && ce(t);
+  }, h = Ne(), w = c === "desktop" || c === "mobile" ? c : "desktop", S = {
+    backgroundColor: ((P = (M = h.palette) == null ? void 0 : M.action) == null ? void 0 : P.selected) ?? "rgba(25, 118, 210, 0.12)",
+    color: ((N = (O = h.palette) == null ? void 0 : O.primary) == null ? void 0 : N.main) ?? "#1976d2",
+    "&:hover": { backgroundColor: ((B = (z = h.palette) == null ? void 0 : z.action) == null ? void 0 : B.selected) ?? "rgba(25, 118, 210, 0.12)" }
+  }, f = {
+    tooltip: {
+      sx: {
+        fontSize: "11px",
+        fontWeight: 300,
+        backgroundColor: Q(((W = (I = h.palette) == null ? void 0 : I.text) == null ? void 0 : W.primary) ?? "#1F1F21", 0.9),
+        color: ((j = (V = h.palette) == null ? void 0 : V.common) == null ? void 0 : j.white) ?? "#fff"
+      }
+    },
+    arrow: {
+      sx: { color: Q(((R = (_ = h.palette) == null ? void 0 : _.text) == null ? void 0 : R.primary) ?? "#1F1F21", 0.9) }
+    }
+  }, H = () => /* @__PURE__ */ e(
     i,
     {
       sx: {
-        height: _,
+        height: ie,
         minHeight: 0,
         display: "flex",
         flexDirection: "column",
-        borderRight: s === "split" ? "1px solid" : "none",
+        borderRight: a === "split" ? "1px solid" : "none",
         borderColor: "divider"
       },
       children: /* @__PURE__ */ e(
@@ -145,13 +163,13 @@ function Ve({
             }
           },
           children: /* @__PURE__ */ e(
-            le,
+            we,
             {
-              value: g,
+              value: b,
               height: "100%",
-              extensions: [ne()],
-              theme: y[L] || W,
-              onChange: K,
+              extensions: [Le()],
+              theme: C[D] || ee,
+              onChange: me,
               basicSetup: {
                 lineNumbers: !0,
                 foldGutter: !0,
@@ -163,11 +181,11 @@ function Ve({
         }
       )
     }
-  ), C = () => /* @__PURE__ */ e(i, { sx: {
-    height: R,
+  ), F = () => /* @__PURE__ */ e(i, { sx: {
+    height: le,
     overflow: "auto",
     backgroundColor: "#F5F5F5",
-    padding: f === "mobile" ? "32px 16px" : "16px",
+    padding: c === "mobile" ? "32px 16px" : "16px",
     display: "flex",
     justifyContent: "center"
   }, children: /* @__PURE__ */ e(
@@ -175,16 +193,16 @@ function Ve({
     {
       sx: {
         width: "100%",
-        maxWidth: f === "mobile" ? "370px" : "100%",
-        height: f === "mobile" ? "800px" : "100%",
+        maxWidth: c === "mobile" ? "370px" : "100%",
+        height: c === "mobile" ? "800px" : "100%",
         border: "none",
         overflow: "hidden"
       },
       children: /* @__PURE__ */ e(
         "iframe",
         {
-          ref: x,
-          srcDoc: b,
+          ref: v,
+          srcDoc: y,
           style: {
             width: "100%",
             height: "100%",
@@ -207,10 +225,10 @@ function Ve({
         width: "100%",
         minHeight: 0,
         minWidth: 0,
-        ...A
+        ...ne
       },
       children: [
-        Y && /* @__PURE__ */ d(
+        de && /* @__PURE__ */ d(
           i,
           {
             sx: {
@@ -225,60 +243,76 @@ function Ve({
             children: [
               /* @__PURE__ */ d(i, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
                 /* @__PURE__ */ d(
-                  O,
+                  K,
                   {
-                    value: s,
+                    value: a,
                     exclusive: !0,
-                    onChange: J,
+                    onChange: ue,
                     size: "small",
                     "aria-label": r("htmlEditor.mode.split"),
                     children: [
-                      /* @__PURE__ */ e(u, { title: r("htmlEditor.tooltips.splitView"), arrow: !0, children: /* @__PURE__ */ e(p, { value: "split", "aria-label": r("htmlEditor.mode.split"), children: /* @__PURE__ */ e(Ee, { fontSize: "small" }) }) }),
-                      /* @__PURE__ */ e(u, { title: r("htmlEditor.tooltips.codeOnly"), arrow: !0, children: /* @__PURE__ */ e(p, { value: "code", "aria-label": r("htmlEditor.mode.code"), children: /* @__PURE__ */ e(we, { fontSize: "small" }) }) }),
-                      /* @__PURE__ */ e(u, { title: r("htmlEditor.tooltips.previewOnly"), arrow: !0, children: /* @__PURE__ */ e(p, { value: "preview", "aria-label": r("htmlEditor.mode.preview"), children: /* @__PURE__ */ e(ye, { fontSize: "small" }) }) })
+                      /* @__PURE__ */ e(g, { title: r("htmlEditor.tooltips.splitView"), arrow: !0, slotProps: f, children: /* @__PURE__ */ e(x, { value: "split", "aria-label": r("htmlEditor.mode.split"), children: /* @__PURE__ */ e(We, { fontSize: "small" }) }) }),
+                      /* @__PURE__ */ e(g, { title: r("htmlEditor.tooltips.codeOnly"), arrow: !0, slotProps: f, children: /* @__PURE__ */ e(x, { value: "code", "aria-label": r("htmlEditor.mode.code"), children: /* @__PURE__ */ e(Ve, { fontSize: "small" }) }) }),
+                      /* @__PURE__ */ e(g, { title: r("htmlEditor.tooltips.previewOnly"), arrow: !0, slotProps: f, children: /* @__PURE__ */ e(x, { value: "preview", "aria-label": r("htmlEditor.mode.preview"), children: /* @__PURE__ */ e(je, { fontSize: "small" }) }) })
                     ]
                   }
                 ),
-                /* @__PURE__ */ d(xe, { size: "small", sx: { minWidth: 140 }, children: [
-                  /* @__PURE__ */ e(be, { id: "theme-select-label", children: r("htmlEditor.theme") }),
+                /* @__PURE__ */ d(ze, { size: "small", sx: { minWidth: 140 }, children: [
+                  /* @__PURE__ */ e(Be, { id: "theme-select-label", children: r("htmlEditor.theme") }),
                   /* @__PURE__ */ d(
-                    ve,
+                    Ie,
                     {
                       labelId: "theme-select-label",
                       id: "theme-select",
-                      value: L,
+                      value: D,
                       label: r("htmlEditor.theme"),
                       onChange: (o) => {
                         const t = o.target.value;
-                        q(t), console.log("theme changed to", t), ke(t);
+                        he(t), console.log("theme changed to", t), Xe(t);
                       },
                       sx: {
-                        fontSize: "0.875rem",
+                        // fontSize: '0.875rem',
                         "& .MuiSelect-select": {
                           py: 0.5
                         }
                       },
                       children: [
-                        /* @__PURE__ */ e(z, { children: r("htmlEditor.lightThemes") }),
-                        Object.entries(Ce).map(([o, t]) => /* @__PURE__ */ e(B, { value: o, children: t }, o)),
-                        /* @__PURE__ */ e(z, { children: r("htmlEditor.darkThemes") }),
-                        Object.entries(Se).map(([o, t]) => /* @__PURE__ */ e(B, { value: o, children: t }, o))
+                        /* @__PURE__ */ e(U, { children: r("htmlEditor.lightThemes") }),
+                        Object.entries(Ae).map(([o, t]) => /* @__PURE__ */ e(J, { value: o, children: t }, o)),
+                        /* @__PURE__ */ e(U, { children: r("htmlEditor.darkThemes") }),
+                        Object.entries(Ge).map(([o, t]) => /* @__PURE__ */ e(J, { value: o, children: t }, o))
                       ]
                     }
                   )
                 ] })
               ] }),
-              /* @__PURE__ */ e(i, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: s !== "code" && /* @__PURE__ */ d(
-                O,
+              /* @__PURE__ */ e(i, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: a !== "code" && /* @__PURE__ */ d(
+                K,
                 {
-                  value: f,
+                  value: w,
                   exclusive: !0,
-                  onChange: Q,
+                  onChange: fe,
                   size: "small",
                   "aria-label": r("htmlEditor.device.desktop"),
                   children: [
-                    /* @__PURE__ */ e(u, { title: r("htmlEditor.tooltips.desktopView"), arrow: !0, children: /* @__PURE__ */ e(p, { value: "desktop", "aria-label": r("htmlEditor.device.desktop"), children: /* @__PURE__ */ e(Le, { fontSize: "small" }) }) }),
-                    /* @__PURE__ */ e(u, { title: r("htmlEditor.tooltips.mobileView"), arrow: !0, children: /* @__PURE__ */ e(p, { value: "mobile", "aria-label": r("htmlEditor.device.mobile"), children: /* @__PURE__ */ e(Te, { fontSize: "small" }) }) })
+                    /* @__PURE__ */ e(g, { title: r("htmlEditor.tooltips.desktopView"), arrow: !0, slotProps: f, children: /* @__PURE__ */ e(
+                      x,
+                      {
+                        value: "desktop",
+                        "aria-label": r("htmlEditor.device.desktop"),
+                        sx: w === "desktop" ? S : void 0,
+                        children: /* @__PURE__ */ e(_e, { fontSize: "small" })
+                      }
+                    ) }),
+                    /* @__PURE__ */ e(g, { title: r("htmlEditor.tooltips.mobileView"), arrow: !0, slotProps: f, children: /* @__PURE__ */ e(
+                      x,
+                      {
+                        value: "mobile",
+                        "aria-label": r("htmlEditor.device.mobile"),
+                        sx: w === "mobile" ? S : void 0,
+                        children: /* @__PURE__ */ e(Re, { fontSize: "small" })
+                      }
+                    ) })
                   ]
                 }
               ) })
@@ -296,12 +330,12 @@ function Ve({
               overflow: "hidden"
             },
             children: [
-              s === "split" && /* @__PURE__ */ d(re, { children: [
-                /* @__PURE__ */ e(i, { sx: { flex: 1, minHeight: 0, minWidth: 0, overflow: "hidden" }, children: D() }),
-                /* @__PURE__ */ e(i, { sx: { flex: 1, minHeight: 0, minWidth: 0, overflow: "hidden" }, children: C() })
+              a === "split" && /* @__PURE__ */ d(ye, { children: [
+                /* @__PURE__ */ e(i, { sx: { flex: 1, minHeight: 0, minWidth: 0, overflow: "hidden" }, children: H() }),
+                /* @__PURE__ */ e(i, { sx: { flex: 1, minHeight: 0, minWidth: 0, overflow: "hidden" }, children: F() })
               ] }),
-              s === "code" && /* @__PURE__ */ e(i, { sx: { flex: 1, minHeight: 0, minWidth: 0, overflow: "hidden" }, children: D() }),
-              s === "preview" && /* @__PURE__ */ e(i, { sx: { flex: 1, minHeight: 0, minWidth: 0, overflow: "hidden" }, children: C() })
+              a === "code" && /* @__PURE__ */ e(i, { sx: { flex: 1, minHeight: 0, minWidth: 0, overflow: "hidden" }, children: H() }),
+              a === "preview" && /* @__PURE__ */ e(i, { sx: { flex: 1, minHeight: 0, minWidth: 0, overflow: "hidden" }, children: F() })
             ]
           }
         )
@@ -310,6 +344,6 @@ function Ve({
   );
 }
 export {
-  Ve as HtmlEditor,
-  Ve as default
+  lt as HtmlEditor,
+  lt as default
 };

package/dist/index.js

@@ -325,7 +325,7 @@ function ui({
 function di() {
   return fo($o);
 }
-const pi = "#212443", et = "#1E40AF", Vn = "#1F8466", nt = "#E81212", kn = "#F6DC9F", mi = "#6C0E7C", fi = "#CC996C", hi = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"', gi = 'ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", monospace', y = ko({
+const pi = "#212443", et = "#1E40AF", Vn = "#1F8466", nt = "#E81212", kn = "#F6DC9F", mi = "#6C0E7C", fi = "#CC996C", hi = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"', gi = 'ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", monospace', I = ko({
   palette: {
     background: {
       default: "#f2f5f7"
@@ -338,7 +338,7 @@ const pi = "#212443", et = "#1E40AF", Vn = "#1F8466", nt = "#E81212", kn = "#F6D
   typography: {
     fontFamily: hi
   }
-}), Ci = ko(y, {
+}), Ci = ko(I, {
   palette: {
     brand: {
       navy: pi,
@@ -400,7 +400,7 @@ const pi = "#212443", et = "#1E40AF", Vn = "#1F8466", nt = "#E81212", kn = "#F6D
     MuiAlert: {
       styleOverrides: {
         root: {
-          fontSize: y.typography.pxToRem(14)
+          fontSize: I.typography.pxToRem(14)
         },
         action: {
           paddingTop: 0,
@@ -414,7 +414,7 @@ const pi = "#212443", et = "#1E40AF", Vn = "#1F8466", nt = "#E81212", kn = "#F6D
     MuiStepLabel: {
       styleOverrides: {
         label: {
-          fontWeight: y.typography.fontWeightMedium
+          fontWeight: I.typography.fontWeightMedium
         }
       }
     },
@@ -424,15 +424,15 @@ const pi = "#212443", et = "#1E40AF", Vn = "#1F8466", nt = "#E81212", kn = "#F6D
       },
       styleOverrides: {
         paper: {
-          borderRadius: y.spacing(1)
+          borderRadius: I.spacing(1)
         }
       }
     },
     MuiDialogContent: {
       styleOverrides: {
         root: {
-          paddingTop: y.spacing(1),
-          paddingBottom: y.spacing(2)
+          paddingTop: I.spacing(1),
+          paddingBottom: I.spacing(2)
         }
       }
     },
@@ -442,8 +442,8 @@ const pi = "#212443", et = "#1E40AF", Vn = "#1F8466", nt = "#E81212", kn = "#F6D
       },
       styleOverrides: {
         root: {
-          paddingTop: y.spacing(3),
-          paddingBottom: y.spacing(1)
+          paddingTop: I.spacing(3),
+          paddingBottom: I.spacing(1)
         }
       }
     },
@@ -451,23 +451,23 @@ const pi = "#212443", et = "#1E40AF", Vn = "#1F8466", nt = "#E81212", kn = "#F6D
       styleOverrides: {
         root: {
           borderTop: "1px solid",
-          borderTopColor: y.palette.divider,
-          marginTop: y.spacing(2.5),
-          padding: `${y.spacing(1.5)} ${y.spacing(3)}`
+          borderTopColor: I.palette.divider,
+          marginTop: I.spacing(2.5),
+          padding: `${I.spacing(1.5)} ${I.spacing(3)}`
         }
       }
     },
     MuiTableCell: {
       styleOverrides: {
         root: {
-          ...y.typography.body2,
-          borderColor: y.palette.grey[200]
+          ...I.typography.body2,
+          borderColor: I.palette.grey[200]
         },
         head: {
-          ...y.typography.overline,
-          fontWeight: y.typography.fontWeightMedium,
+          ...I.typography.overline,
+          fontWeight: I.typography.fontWeightMedium,
           letterSpacing: "0.075em",
-          color: y.palette.text.secondary
+          color: I.palette.text.secondary
         }
       }
     },
@@ -484,7 +484,7 @@ const pi = "#212443", et = "#1E40AF", Vn = "#1F8466", nt = "#E81212", kn = "#F6D
       styleOverrides: {
         root: {
           textTransform: "uppercase",
-          fontSize: y.typography.pxToRem(14)
+          fontSize: I.typography.pxToRem(14)
         }
       }
     },
@@ -492,23 +492,23 @@ const pi = "#212443", et = "#1E40AF", Vn = "#1F8466", nt = "#E81212", kn = "#F6D
       styleOverrides: {
         root: {
           "&.MuiChip-filledError, &.MuiChip-filledSuccess": {
-            fill: y.palette.primary.contrastText
+            fill: I.palette.primary.contrastText
           }
         },
         sizeSmall: {
-          borderRadius: y.spacing(0.5),
+          borderRadius: I.spacing(0.5),
           fontSize: 12
         },
         iconSmall: {
           fontSize: 14,
-          marginLeft: y.spacing(1)
+          marginLeft: I.spacing(1)
         },
         colorSecondary: {
-          borderColor: y.palette.grey[400],
-          color: y.palette.text.secondary
+          borderColor: I.palette.grey[400],
+          color: I.palette.text.secondary
         },
         label: {
-          fontWeight: y.typography.fontWeightMedium
+          fontWeight: I.typography.fontWeightMedium
         }
       }
     },
@@ -522,11 +522,11 @@ const pi = "#212443", et = "#1E40AF", Vn = "#1F8466", nt = "#E81212", kn = "#F6D
     MuiTooltip: {
       styleOverrides: {
         tooltip: {
-          fontSize: y.typography.pxToRem(12),
-          backgroundColor: wt(y.palette.text.primary, 0.9)
+          // fontSize: BASE_THEME.typography.pxToRem(12),
+          backgroundColor: wt(I.palette.text.primary, 0.9)
         },
         arrow: {
-          color: wt(y.palette.text.primary, 0.9)
+          color: wt(I.palette.text.primary, 0.9)
         }
       }
     },
@@ -541,10 +541,10 @@ const pi = "#212443", et = "#1E40AF", Vn = "#1F8466", nt = "#E81212", kn = "#F6D
         },
         rail: {
           height: 1,
-          backgroundColor: y.palette.grey[500]
+          backgroundColor: I.palette.grey[500]
         },
         mark: {
-          backgroundColor: y.palette.grey[500]
+          backgroundColor: I.palette.grey[500]
         },
         markActive: {
           height: 0
@@ -576,7 +576,7 @@ const pi = "#212443", et = "#1E40AF", Vn = "#1F8466", nt = "#E81212", kn = "#F6D
       styleOverrides: {
         root: {
           "&.MuiButton-containedSecondary.Mui-disabled": {
-            backgroundColor: y.palette.grey[100]
+            backgroundColor: I.palette.grey[100]
           }
         }
       }
@@ -589,10 +589,10 @@ const pi = "#212443", et = "#1E40AF", Vn = "#1F8466", nt = "#E81212", kn = "#F6D
     MuiIconButton: {
       styleOverrides: {
         edgeStart: {
-          marginLeft: y.spacing(-1)
+          marginLeft: I.spacing(-1)
         },
         colorSecondary: {
-          color: y.palette.grey[500]
+          color: I.palette.grey[500]
         }
       }
     },
@@ -605,10 +605,10 @@ const pi = "#212443", et = "#1E40AF", Vn = "#1F8466", nt = "#E81212", kn = "#F6D
           borderRadius: 8
         },
         textPrimary: {
-          color: y.palette.text.primary
+          color: I.palette.text.primary
         },
         textSecondary: {
-          color: y.palette.text.secondary
+          color: I.palette.text.secondary
         },
         outlinedPrimary: {
           // borderColor: BASE_THEME.palette.grey[300],
@@ -619,13 +619,13 @@ const pi = "#212443", et = "#1E40AF", Vn = "#1F8466", nt = "#E81212", kn = "#F6D
           // },
         },
         containedSecondary: {
-          backgroundColor: y.palette.common.white,
-          border: `1px solid ${y.palette.grey[300]}`,
-          color: y.palette.text.primary,
+          backgroundColor: I.palette.common.white,
+          border: `1px solid ${I.palette.grey[300]}`,
+          color: I.palette.text.primary,
           "&:hover, &:active, &:focus": {
-            backgroundColor: y.palette.common.white,
-            borderColor: y.palette.grey[500],
-            color: y.palette.text.primary
+            backgroundColor: I.palette.common.white,
+            borderColor: I.palette.grey[500],
+            color: I.palette.text.primary
           }
         }
       }
@@ -633,8 +633,8 @@ const pi = "#212443", et = "#1E40AF", Vn = "#1F8466", nt = "#E81212", kn = "#F6D
     MuiToggleButton: {
       styleOverrides: {
         root: {
-          paddingLeft: y.spacing(1.5),
-          paddingRight: y.spacing(1.5)
+          paddingLeft: I.spacing(1.5),
+          paddingRight: I.spacing(1.5)
         }
       }
     },
@@ -642,35 +642,35 @@ const pi = "#212443", et = "#1E40AF", Vn = "#1F8466", nt = "#E81212", kn = "#F6D
       styleOverrides: {
         root: {
           "&:not(.Mui-disabled, .Mui-error):before": {
-            borderBottom: `1px solid ${y.palette.grey[400]}`
+            borderBottom: `1px solid ${I.palette.grey[400]}`
           },
           "&:hover:not(.Mui-disabled, .Mui-error):before": {
-            borderBottom: `1px solid ${y.palette.grey[500]} !important`
+            borderBottom: `1px solid ${I.palette.grey[500]} !important`
           },
           "&:after": {
-            borderBottom: `1px solid ${y.palette.text.primary} !important`
+            borderBottom: `1px solid ${I.palette.text.primary} !important`
           },
           "&.MuiOutlinedInput-root:not(.Mui-error)": {
             "& fieldset": {
-              borderColor: y.palette.grey[300],
+              borderColor: I.palette.grey[300],
               transition: "border-color 0.2s"
             }
           },
           "&.MuiOutlinedInput-root:not(.Mui-disabled, .Mui-error)": {
             "&:hover fieldset": {
-              borderColor: y.palette.grey[400]
+              borderColor: I.palette.grey[400]
             },
             "&.Mui-focused fieldset": {
-              borderColor: y.palette.text.secondary,
+              borderColor: I.palette.text.secondary,
               borderWidth: 1
             }
           }
         },
         input: {
-          fontSize: y.typography.pxToRem(14),
+          fontSize: I.typography.pxToRem(14),
           "&.Mui-disabled": {
             WebkitTextFillColor: "inherit",
-            color: y.palette.text.secondary
+            color: I.palette.text.secondary
           }
         },
         inputSizeSmall: {}
@@ -690,8 +690,8 @@ const pi = "#212443", et = "#1E40AF", Vn = "#1F8466", nt = "#E81212", kn = "#F6D
       styleOverrides: {
         root: {
           "& .MuiTypography-root": {
-            fontSize: y.typography.pxToRem(14),
-            color: y.palette.text.secondary
+            fontSize: I.typography.pxToRem(14),
+            color: I.palette.text.secondary
           }
         }
       }
@@ -703,9 +703,9 @@ const pi = "#212443", et = "#1E40AF", Vn = "#1F8466", nt = "#E81212", kn = "#F6D
       styleOverrides: {
         shrink: {
           transform: "scale(0.85)",
-          fontWeight: y.typography.fontWeightMedium,
+          fontWeight: I.typography.fontWeightMedium,
           "&.Mui-focused": {
-            color: y.palette.text.primary
+            color: I.palette.text.primary
           },
           "&.MuiInputLabel-standard": {
             transform: "translate(0, -4px) scale(0.85)",
@@ -724,7 +724,7 @@ const pi = "#212443", et = "#1E40AF", Vn = "#1F8466", nt = "#E81212", kn = "#F6D
       styleOverrides: {
         indicator: {
           height: 1,
-          backgroundColor: y.palette.text.primary
+          backgroundColor: I.palette.text.primary
         }
       }
     },
@@ -732,19 +732,19 @@ const pi = "#212443", et = "#1E40AF", Vn = "#1F8466", nt = "#E81212", kn = "#F6D
       styleOverrides: {
         root: {
           textTransform: "none",
-          minWidth: y.spacing(2),
-          paddingLeft: y.spacing(1.5),
-          paddingRight: y.spacing(1.5),
-          fontSize: y.typography.pxToRem(14),
-          fontFamily: y.typography.fontFamily,
+          minWidth: I.spacing(2),
+          paddingLeft: I.spacing(1.5),
+          paddingRight: I.spacing(1.5),
+          fontSize: I.typography.pxToRem(14),
+          fontFamily: I.typography.fontFamily,
           lineHeight: 1.5,
-          fontWeight: y.typography.fontWeightMedium,
+          fontWeight: I.typography.fontWeightMedium,
           transition: "color 0.2s",
           "&.Mui-selected": {
-            color: y.palette.text.primary
+            color: I.palette.text.primary
           },
           "&:hover": {
-            color: y.palette.text.primary
+            color: I.palette.text.primary
           }
         }
       }
@@ -759,69 +759,69 @@ const pi = "#212443", et = "#1E40AF", Vn = "#1F8466", nt = "#E81212", kn = "#F6D
     MuiCardHeader: {
       styleOverrides: {
         title: {
-          fontSize: y.typography.pxToRem(18),
-          fontWeight: y.typography.fontWeightMedium
+          fontSize: I.typography.pxToRem(18),
+          fontWeight: I.typography.fontWeightMedium
         }
       }
     }
   },
   typography: {
-    fontFamily: y.typography.fontFamily,
+    fontFamily: I.typography.fontFamily,
     h1: {
-      fontFamily: y.typography.fontFamily,
-      fontSize: y.typography.pxToRem(40),
+      fontFamily: I.typography.fontFamily,
+      fontSize: I.typography.pxToRem(40),
       lineHeight: 1.2,
       letterSpacing: "-0.02em",
-      fontWeight: y.typography.fontWeightMedium
+      fontWeight: I.typography.fontWeightMedium
     },
     h2: {
-      fontFamily: y.typography.fontFamily,
-      fontSize: y.typography.pxToRem(32),
+      fontFamily: I.typography.fontFamily,
+      fontSize: I.typography.pxToRem(32),
       lineHeight: 1.2,
       letterSpacing: "-0.02em",
-      fontWeight: y.typography.fontWeightMedium
+      fontWeight: I.typography.fontWeightMedium
     },
     h3: {
-      fontFamily: y.typography.fontFamily,
-      fontSize: y.typography.pxToRem(24),
+      fontFamily: I.typography.fontFamily,
+      fontSize: I.typography.pxToRem(24),
       lineHeight: 1.5,
       letterSpacing: "-0.01em",
-      fontWeight: y.typography.fontWeightMedium
+      fontWeight: I.typography.fontWeightMedium
     },
     h4: {
-      fontFamily: y.typography.fontFamily,
-      fontSize: y.typography.pxToRem(20),
+      fontFamily: I.typography.fontFamily,
+      fontSize: I.typography.pxToRem(20),
       lineHeight: 1.5,
       letterSpacing: "-0.01em",
-      fontWeight: y.typography.fontWeightMedium
+      fontWeight: I.typography.fontWeightMedium
     },
     h5: {
-      fontFamily: y.typography.fontFamily,
-      fontSize: y.typography.pxToRem(18),
+      fontFamily: I.typography.fontFamily,
+      fontSize: I.typography.pxToRem(18),
       lineHeight: 1.5,
       letterSpacing: "-0.01em",
-      fontWeight: y.typography.fontWeightMedium
+      fontWeight: I.typography.fontWeightMedium
     },
     h6: {
-      fontFamily: y.typography.fontFamily,
-      fontSize: y.typography.pxToRem(16),
+      fontFamily: I.typography.fontFamily,
+      fontSize: I.typography.pxToRem(16),
       lineHeight: 1.5,
       letterSpacing: "-0.005em",
-      fontWeight: y.typography.fontWeightMedium
+      fontWeight: I.typography.fontWeightMedium
     },
     body1: {
-      fontSize: y.typography.pxToRem(14)
+      fontSize: I.typography.pxToRem(14)
     },
     body2: {
-      fontSize: y.typography.pxToRem(12)
+      fontSize: I.typography.pxToRem(12)
     },
     overline: {
-      fontWeight: y.typography.fontWeightMedium,
+      fontWeight: I.typography.fontWeightMedium,
       letterSpacing: "0.05em"
     },
     button: {
       textTransform: "none",
-      fontWeight: y.typography.fontWeightMedium,
+      fontWeight: I.typography.fontWeightMedium,
       lineHeight: 1.5
     },
     caption: {
@@ -1501,7 +1501,7 @@ function Oi({ data: e, setData: o }) {
     else
       g.length === v ? R = g : R = Array.from(
         { length: v },
-        (I, k) => g[k] || { childrenIds: [] }
+        (y, k) => g[k] || { childrenIds: [] }
       );
     r({
       ...e,
@@ -2428,22 +2428,22 @@ const Un = [
 };
 function Ui({ data: e, setData: o }) {
   var v, O, R;
-  const { t, language: i } = q(), [, s] = M(null), [l, r] = M(null), [u, a] = M(null), [c, d] = M(null), g = ce(!1), f = (I) => {
-    const k = er.safeParse(I);
+  const { t, language: i } = q(), [, s] = M(null), [l, r] = M(null), [u, a] = M(null), [c, d] = M(null), g = ce(!1), f = (y) => {
+    const k = er.safeParse(y);
     k.success ? (o(k.data), s(null)) : s(k.error);
   }, h = ((v = e.props) == null ? void 0 : v.iconStyle) || "origin-colorful", p = ((O = e.props) == null ? void 0 : O.iconSize) ?? 36, x = ((R = e.props) == null ? void 0 : R.socials) || [];
-  x.map((I) => I.platform);
-  const b = (I) => {
+  x.map((y) => y.platform);
+  const b = (y) => {
     f({
       ...e,
       props: {
         ...e.props,
-        iconStyle: I
+        iconStyle: y
       }
     });
-  }, B = (I, k) => {
+  }, B = (y, k) => {
     const z = [...x];
-    z[I] = { ...z[I], url: k }, f({
+    z[y] = { ...z[y], url: k }, f({
       ...e,
       props: {
         ...e.props,
@@ -2451,9 +2451,9 @@ function Ui({ data: e, setData: o }) {
         socials: z
       }
     });
-  }, m = (I, k) => {
+  }, m = (y, k) => {
     const z = [...x];
-    z[I] = { ...z[I], platform: k }, f({
+    z[y] = { ...z[y], platform: k }, f({
       ...e,
       props: {
         ...e.props,
@@ -2461,8 +2461,8 @@ function Ui({ data: e, setData: o }) {
         socials: z
       }
     });
-  }, A = (I) => {
-    const k = x.filter((z, $) => $ !== I);
+  }, A = (y) => {
+    const k = x.filter((z, $) => $ !== y);
     f({
       ...e,
       props: {
@@ -2472,7 +2472,7 @@ function Ui({ data: e, setData: o }) {
       }
     });
   }, P = () => {
-    const I = new Set(x.map((U) => U.platform)), z = Un.find((U) => !I.has(U)) || Un[0], $ = [...x, { platform: z, url: null }];
+    const y = new Set(x.map((U) => U.platform)), z = Un.find((U) => !y.has(U)) || Un[0], $ = [...x, { platform: z, url: null }];
     f({
       ...e,
       props: {
@@ -2481,35 +2481,35 @@ function Ui({ data: e, setData: o }) {
         socials: $
       }
     });
-  }, X = (I, k) => {
+  }, X = (y, k) => {
     if (!g.current) {
       k.preventDefault();
       return;
     }
-    r(I), k.dataTransfer.effectAllowed = "move", k.dataTransfer.setData("text/plain", `social-${I}`);
+    r(y), k.dataTransfer.effectAllowed = "move", k.dataTransfer.setData("text/plain", `social-${y}`);
   }, T = () => {
     g.current = !0;
   };
   Z(() => {
-    const I = () => {
+    const y = () => {
       g.current = !1;
     };
-    return document.addEventListener("mouseup", I), () => {
-      document.removeEventListener("mouseup", I);
+    return document.addEventListener("mouseup", y), () => {
+      document.removeEventListener("mouseup", y);
     };
   }, []);
-  const K = (I, k) => {
-    if (I.preventDefault(), I.stopPropagation(), l === null) return;
+  const K = (y, k) => {
+    if (y.preventDefault(), y.stopPropagation(), l === null) return;
     if (l === k) {
       a(null), d(null);
       return;
     }
-    const z = I.currentTarget.getBoundingClientRect(), $ = I.clientY, U = z.top + z.height / 2, Y = $ < U ? "top" : "bottom";
+    const z = y.currentTarget.getBoundingClientRect(), $ = y.clientY, U = z.top + z.height / 2, Y = $ < U ? "top" : "bottom";
     a(k), d(Y);
-  }, re = (I) => {
-    I.preventDefault(), I.stopPropagation();
-  }, G = (I, k) => {
-    if (I.preventDefault(), I.stopPropagation(), l === null) {
+  }, re = (y) => {
+    y.preventDefault(), y.stopPropagation();
+  }, G = (y, k) => {
+    if (y.preventDefault(), y.stopPropagation(), l === null) {
       r(null), a(null), d(null);
       return;
     }
@@ -2537,10 +2537,10 @@ function Ui({ data: e, setData: o }) {
         V,
         {
           spacing: 1,
-          onDragOver: (I) => {
+          onDragOver: (y) => {
             if (l !== null) {
-              I.preventDefault(), I.stopPropagation(), I.dataTransfer.dropEffect = "move";
-              const k = I.clientY, z = Array.from(I.currentTarget.querySelectorAll(".MuiPaper-root"));
+              y.preventDefault(), y.stopPropagation(), y.dataTransfer.dropEffect = "move";
+              const k = y.clientY, z = Array.from(y.currentTarget.querySelectorAll(".MuiPaper-root"));
               for (let $ = 0; $ < z.length; $++) {
                 const U = z[$].getBoundingClientRect(), Y = U.top - 24, ue = U.bottom + 24;
                 if (k >= Y && k <= ue) {
@@ -2551,11 +2551,11 @@ function Ui({ data: e, setData: o }) {
               }
             }
           },
-          onDrop: (I) => {
-            l !== null && u !== null && (I.preventDefault(), I.stopPropagation(), G(I, u));
+          onDrop: (y) => {
+            l !== null && u !== null && (y.preventDefault(), y.stopPropagation(), G(y, u));
           },
-          children: x.map((I, k) => {
-            const z = C ? rt[I.platform].zh : rt[I.platform].en, $ = l === k, U = u === k, Y = U && c === "top", ue = U && c === "bottom", he = `social-${k}`;
+          children: x.map((y, k) => {
+            const z = C ? rt[y.platform].zh : rt[y.platform].en, $ = l === k, U = u === k, Y = U && c === "top", ue = U && c === "bottom", he = `social-${k}`;
             return /* @__PURE__ */ w($e.Fragment, { children: [
               Y && /* @__PURE__ */ n(
                 N,
@@ -2632,7 +2632,7 @@ function Ui({ data: e, setData: o }) {
                       /* @__PURE__ */ n(
                         br,
                         {
-                          value: I.platform,
+                          value: y.platform,
                           onChange: (F) => m(k, F.target.value),
                           size: "small",
                           sx: { flex: 1, fontSize: "12px" },
@@ -2659,7 +2659,7 @@ function Ui({ data: e, setData: o }) {
                       {
                         label: "",
                         placeholder: `${t("socials.iconUrl")} - ${z}`,
-                        defaultValue: I.url || "",
+                        defaultValue: y.url || "",
                         onChange: (F) => B(k, F || null)
                       }
                     ) })
@@ -2721,14 +2721,14 @@ function Ui({ data: e, setData: o }) {
     /* @__PURE__ */ n(at, { sx: { my: 1 } }),
     /* @__PURE__ */ w(N, { sx: { mb: 2 }, children: [
       /* @__PURE__ */ n(ie, { variant: "body2", sx: { color: "text.secondary", mb: 1, fontSize: "12px", fontWeight: 500 }, children: t("socials.iconStyle") }),
-      /* @__PURE__ */ n(V, { spacing: 1, sx: { mt: 1 }, children: Zo.map((I) => {
-        const k = C ? ro[I].zh : ro[I].en;
+      /* @__PURE__ */ n(V, { spacing: 1, sx: { mt: 1 }, children: Zo.map((y) => {
+        const k = C ? ro[y].zh : ro[y].en;
         return /* @__PURE__ */ n(
           zl,
           {
-            value: I,
-            selected: h === I,
-            onChange: () => b(I),
+            value: y,
+            selected: h === y,
+            onChange: () => b(y),
             fullWidth: !0,
             size: "small",
             sx: {
@@ -2738,7 +2738,7 @@ function Ui({ data: e, setData: o }) {
             },
             children: k
           },
-          I
+          y
         );
       }) })
     ] }),
@@ -2749,12 +2749,12 @@ function Ui({ data: e, setData: o }) {
         label: t("socials.iconSize"),
         iconLabel: /* @__PURE__ */ n(Bo, { sx: { fontSize: 16 } }),
         defaultValue: p,
-        onChange: (I) => {
+        onChange: (y) => {
           f({
             ...e,
             props: {
               ...e.props,
-              iconSize: I
+              iconSize: y
             }
           });
         },
@@ -2770,7 +2770,7 @@ function Ui({ data: e, setData: o }) {
       {
         names: ["backgroundColor", "padding"],
         value: e.style,
-        onChange: (I) => f({ ...e, style: I })
+        onChange: (y) => f({ ...e, style: y })
       }
     )
   ] });
@@ -3578,8 +3578,8 @@ function Vt({ childrenIds: e, onChange: o, containerId: t, allowReplace: i = !1,
     D.preventDefault(), D.stopPropagation();
     const v = Dn();
     if (v) {
-      const O = _n(), R = _.getState().document, I = gn(O, t, R);
-      d(!I), I ? (D.dataTransfer.effectAllowed = "move", D.dataTransfer.dropEffect = "move") : (D.dataTransfer.effectAllowed = "none", D.dataTransfer.dropEffect = "none"), r(v);
+      const O = _n(), R = _.getState().document, y = gn(O, t, R);
+      d(!y), y ? (D.dataTransfer.effectAllowed = "move", D.dataTransfer.dropEffect = "move") : (D.dataTransfer.effectAllowed = "none", D.dataTransfer.dropEffect = "none"), r(v);
       const k = D.currentTarget.getBoundingClientRect(), z = D.clientY, $ = k.top + k.height / 2;
       if (z < $)
         a(C);
@@ -3625,7 +3625,7 @@ function Vt({ childrenIds: e, onChange: o, containerId: t, allowReplace: i = !1,
       window.__currentDraggedBlockId = null, window.__currentDraggedBlock = null, window.__isSidebarBlock = !1, r(null), a(null);
       return;
     }
-    const I = window.__isSidebarBlock === !0, k = I ? tn() : v;
+    const y = window.__isSidebarBlock === !0, k = y ? tn() : v;
     if (t && k === t) {
       window.__currentDraggedBlockId = null, window.__currentDraggedBlock = null, r(null), a(null);
       return;
@@ -3637,9 +3637,9 @@ function Vt({ childrenIds: e, onChange: o, containerId: t, allowReplace: i = !1,
     }
     const $ = [...e];
     i && C >= 0 && C < e.length ? $.splice(C, 1, k) : $.splice(C, 0, k);
-    const U = I ? { containerId: null, columnIndex: null } : Q(z, v), Y = !I && U.containerId === t && U.columnIndex !== null;
+    const U = y ? { containerId: null, columnIndex: null } : Q(z, v), Y = !y && U.containerId === t && U.columnIndex !== null;
     let ue = z;
-    !I && !Y && (ue = Cn(z, v, U), ee(ue)), setTimeout(() => {
+    !y && !Y && (ue = Cn(z, v, U), ee(ue)), setTimeout(() => {
       o({
         blockId: k,
         block: R,
@@ -3680,14 +3680,14 @@ function Vt({ childrenIds: e, onChange: o, containerId: t, allowReplace: i = !1,
             window.__currentDraggedBlockId = null, window.__currentDraggedBlock = null, r(null), a(null);
             return;
           }
-          const I = _.getState().document;
-          if (!gn(v, t, I)) {
+          const y = _.getState().document;
+          if (!gn(v, t, y)) {
             window.__currentDraggedBlockId = null, window.__currentDraggedBlock = null, r(null), a(null), d(!1);
             return;
           }
-          const k = [R], z = O ? { containerId: null, columnIndex: null } : Q(I, C), $ = !O && z.containerId === t && z.columnIndex !== null;
-          let U = I;
-          !O && !$ && (U = Cn(I, C, z), ee(U)), setTimeout(() => {
+          const k = [R], z = O ? { containerId: null, columnIndex: null } : Q(y, C), $ = !O && z.containerId === t && z.columnIndex !== null;
+          let U = y;
+          !O && !$ && (U = Cn(y, C, z), ee(U)), setTimeout(() => {
             o({
               blockId: R,
               block: v,
@@ -3724,7 +3724,7 @@ function Vt({ childrenIds: e, onChange: o, containerId: t, allowReplace: i = !1,
   e && e.length > 0;
   const re = /* @__PURE__ */ w(Yn, { children: [
     e.map((D, C) => {
-      const v = C === e.length - 1, O = l !== null && l !== D && !e.includes(l), R = u === C && l !== null && l !== D && !O, I = (v && u === e.length || !v && u === C + 1) && l !== null && l !== D && (!O || !i), k = l ? Q(S, l) : null, z = Q(S, D), $ = l && l !== D && k && k.columnIndex !== null && z.columnIndex !== null && k.containerId === z.containerId && k.containerId !== null && k.columnIndex !== z.columnIndex, U = k && k.columnIndex !== null && z.columnIndex !== null && k.containerId === z.containerId && k.columnIndex !== z.columnIndex, Y = l ? S[l] : null, ue = (Y == null ? void 0 : Y.type) === "Container" || (Y == null ? void 0 : Y.type) === "ColumnsContainer", he = O && k && k.columnIndex === null && // 外部元素不在列中
+      const v = C === e.length - 1, O = l !== null && l !== D && !e.includes(l), R = u === C && l !== null && l !== D && !O, y = (v && u === e.length || !v && u === C + 1) && l !== null && l !== D && (!O || !i), k = l ? Q(S, l) : null, z = Q(S, D), $ = l && l !== D && k && k.columnIndex !== null && z.columnIndex !== null && k.containerId === z.containerId && k.containerId !== null && k.columnIndex !== z.columnIndex, U = k && k.columnIndex !== null && z.columnIndex !== null && k.containerId === z.containerId && k.columnIndex !== z.columnIndex, Y = l ? S[l] : null, ue = (Y == null ? void 0 : Y.type) === "Container" || (Y == null ? void 0 : Y.type) === "ColumnsContainer", he = O && k && k.columnIndex === null && // 外部元素不在列中
       z.columnIndex !== null && // 目标在列中
       !i && // 列有元素
       !U && // 不是跨列拖拽
@@ -4160,7 +4160,7 @@ function Vt({ childrenIds: e, onChange: o, containerId: t, allowReplace: i = !1,
                   backgroundColor: c ? "#d3d9dd" : "primary.main",
                   zIndex: 1e3,
                   pointerEvents: "none"
-                } : I || ar ? {
+                } : y || ar ? {
                   content: '""',
                   position: "absolute",
                   bottom: -2,
@@ -4213,17 +4213,17 @@ function pa({ style: e, props: o }) {
       }
     let O = T, R = X;
     v !== null && X.type && (O = `block-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`, R = JSON.parse(JSON.stringify(X)));
-    const I = [];
+    const y = [];
     for (let Y = 0; Y < a; Y++)
       if (Y === P) {
         const ue = v !== null ? K.map((he) => he === T ? O : he) : K;
-        I.push({ childrenIds: ue });
+        y.push({ childrenIds: ue });
       } else if (Y === v) {
         const ue = C[Y], he = ((ue == null ? void 0 : ue.childrenIds) || []).filter((F) => F !== T);
-        I.push({ childrenIds: he });
+        y.push({ childrenIds: he });
       } else {
         const ue = C[Y];
-        I.push(ue ? { childrenIds: ue.childrenIds || [] } : { childrenIds: [] });
+        y.push(ue ? { childrenIds: ue.childrenIds || [] } : { childrenIds: [] });
       }
     const k = {
       [t]: {
@@ -4233,12 +4233,12 @@ function pa({ style: e, props: o }) {
           props: {
             ...u,
             columnsCount: a,
-            columns: I
+            columns: y
           }
         })
       }
     };
-    k[t].data.props && (k[t].data.props.columns = I, k[t].data.props.columnsCount = a), X.type ? (v !== null ? k[O] = R : G || (k[T] = X), ee(k), X.type && Ve(O)) : ee(k);
+    k[t].data.props && (k[t].data.props.columns = y, k[t].data.props.columnsCount = a), X.type ? (v !== null ? k[O] = R : G || (k[T] = X), ee(k), X.type && Ve(O)) : ee(k);
   }, f = ve()[t], h = f && f.type === "ColumnsContainer" && ((A = f.data.props) == null ? void 0 : A.columns) || c, S = ((u == null ? void 0 : u.contentAlignment) ?? "middle") === "stretch", x = u == null ? void 0 : u.columnHeights, b = {
     width: "100%",
     height: "100%",
@@ -4419,25 +4419,25 @@ function ba(e) {
                 }
               };
             } else {
-              const v = D.data, R = (D.type === "Container" ? ((re = v.props) == null ? void 0 : re.childrenIds) || [] : v.childrenIds || []).filter((I) => I !== c);
+              const v = D.data, R = (D.type === "Container" ? ((re = v.props) == null ? void 0 : re.childrenIds) || [] : v.childrenIds || []).filter((y) => y !== c);
               if (D.type === "Container") {
-                const I = D.data;
+                const y = D.data;
                 C[G.containerId] = {
                   ...D,
                   data: {
-                    ...I,
+                    ...y,
                     props: {
-                      ...I.props,
+                      ...y.props,
                       childrenIds: R
                     }
                   }
                 };
               } else {
-                const I = D.data;
+                const y = D.data;
                 C[G.containerId] = {
                   ...D,
                   data: {
-                    ...I,
+                    ...y,
                     childrenIds: R
                   }
                 };
@@ -5851,8 +5851,8 @@ function Xa() {
               s && /* @__PURE__ */ n(Pa, {}),
               s && /* @__PURE__ */ n(Va, {}),
               /* @__PURE__ */ w(go, { size: "small", value: i, exclusive: !0, onChange: r, children: [
-                /* @__PURE__ */ n(W, { value: "desktop", children: /* @__PURE__ */ n(Be, { title: e("common.desktopView"), arrow: !0, children: /* @__PURE__ */ n(Cl, { fontSize: "small" }) }) }),
-                /* @__PURE__ */ n(W, { value: "mobile", children: /* @__PURE__ */ n(Be, { title: e("common.mobileView"), arrow: !0, children: /* @__PURE__ */ n(bl, { fontSize: "small" }) }) })
+                /* @__PURE__ */ n(Be, { title: e("common.desktopView"), arrow: !0, children: /* @__PURE__ */ n(W, { value: "desktop", children: /* @__PURE__ */ n(Cl, { fontSize: "small" }) }) }),
+                /* @__PURE__ */ n(Be, { title: e("common.mobileView"), arrow: !0, children: /* @__PURE__ */ n(W, { value: "mobile", children: /* @__PURE__ */ n(bl, { fontSize: "small" }) }) })
               ] })
             ] })
           ] }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "monto-email-builder",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "description": "A powerful and customizable email template builder React component library with visual editing, internationalization, and image upload support",
   "keywords": [
     "email",