monto-email-builder 1.3.1 → 1.4.0

package/dist/html-editor.js

@@ -1,212 +1,442 @@
-import { jsxs as s, jsx as e, Fragment as De } from "react/jsx-runtime";
-import { useState as E, useRef as Z, useEffect as T, useMemo as Me } from "react";
-import Se from "@uiw/react-codemirror";
-import { html as Fe } from "@codemirror/lang-html";
-import { xcodeDark as He, tomorrowNightBlue as Ie, dracula as le, basicDark as Pe, abcdef as Oe, bbedit as Ne, noctisLilac as ze, gruvboxLight as Be, tokyoNightDay as Ve, vscodeLight as We, xcodeLight as je } from "@uiw/codemirror-themes-all";
-import g from "@mui/material/ToggleButton";
-import ee from "@mui/material/ToggleButtonGroup";
-import { useTheme as _e, Box as i, Tooltip as b, FormControl as Re, InputLabel as Ye, Select as Ae, ListSubheader as te, MenuItem as oe } from "@mui/material";
-import { alpha as re } from "@mui/material/styles";
-import * as Ge from "@mui/icons-material/Code";
-import * as $e from "@mui/icons-material/Visibility";
-import * as Xe from "@mui/icons-material/ViewColumn";
-import * as qe from "@mui/icons-material/MonitorOutlined";
-import * as Ke from "@mui/icons-material/PhoneIphoneOutlined";
-import { r as x, t as Ue } from "./chunks/chunk-kYwVqyDL.js";
-const Je = x(Ge), Qe = x($e), Ze = x(Xe), et = x(qe), tt = x(Ke), C = {
+import { jsxs as m, jsx as r, Fragment as wt } from "react/jsx-runtime";
+import { forwardRef as St, useState as y, useRef as oe, useEffect as J, useCallback as w, useMemo as Q, useImperativeHandle as Ht } from "react";
+import Lt from "@uiw/react-codemirror";
+import { html as Dt } from "@codemirror/lang-html";
+import { xcodeDark as Mt, tomorrowNightBlue as It, dracula as Je, basicDark as kt, abcdef as At, bbedit as zt, noctisLilac as Ot, gruvboxLight as Rt, tokyoNightDay as Bt, vscodeLight as Ft, xcodeLight as Nt } from "@uiw/codemirror-themes-all";
+import F from "@mui/material/ToggleButton";
+import _e from "@mui/material/ToggleButtonGroup";
+import { useTheme as $t, Box as d, Tooltip as O, FormControl as _t, InputLabel as Pt, Select as Wt, ListSubheader as Pe, MenuItem as We, Button as ie, Tabs as jt, Tab as je, Typography as S, Accordion as Gt, AccordionSummary as Kt, AccordionDetails as Ut, TextField as le, Divider as Yt } from "@mui/material";
+import { alpha as Ge } from "@mui/material/styles";
+import * as qt from "@mui/icons-material/AddOutlined";
+import * as Xt from "@mui/icons-material/Code";
+import * as Jt from "@mui/icons-material/DataObjectOutlined";
+import * as Qt from "@mui/icons-material/ExpandMoreOutlined";
+import * as Zt from "@mui/icons-material/HelpOutlined";
+import * as er from "@mui/icons-material/Visibility";
+import * as tr from "@mui/icons-material/ViewColumn";
+import * as rr from "@mui/icons-material/MonitorOutlined";
+import * as or from "@mui/icons-material/PhoneIphoneOutlined";
+import { B as ir, V as H, r as V, t as lr } from "./chunks/chunk-CF4KXMbF.js";
+const ae = ir, Ke = "unsubscribe_link", ne = /\{\{\s*([^{}]+?)\s*\}\}/g, Ue = /\{%\s*([^{}%]+?)\s*%\}/g;
+function se(o, a, s, l, c) {
+  return o[a - 1] !== l && o[s] !== c;
+}
+function Qe(o, a = "user") {
+  return a === "builtin" || a === "system" ? `{%${o}%}` : `{{${o}}}`;
+}
+function ar(o) {
+  const a = typeof o == "string" ? o.trim() : "";
+  if (a.startsWith("{{") && a.endsWith("}}")) {
+    const s = a.slice(2, -2).trim();
+    if (H.test(s)) return { attribute: s, type: "user" };
+  }
+  if (a.startsWith("{%") && a.endsWith("%}")) {
+    const s = a.slice(2, -2).trim();
+    if (H.test(s)) return { attribute: s, type: "system" };
+  }
+  return null;
+}
+function nr(o, a) {
+  const s = o.variable ?? o.Variable ?? o.key ?? "", l = ar(s), g = (o.type ?? o.Type ?? (l == null ? void 0 : l.type) ?? "user") === "system" ? "system" : "user", h = o.attribute ?? o.Attribute ?? (l == null ? void 0 : l.attribute) ?? "", p = String(h).trim();
+  return !p || !H.test(p) ? null : {
+    id: Number(o.id) || a + 1,
+    variable: g === "system" ? `{%${p}%}` : `{{${p}}}`,
+    type: g,
+    attribute: p,
+    default: String(o.default ?? o.Default ?? o.value ?? "")
+  };
+}
+function Ye(o) {
+  if (!Array.isArray(o)) return [];
+  const a = /* @__PURE__ */ new Map();
+  return o.forEach((s, l) => {
+    const c = nr(s, l);
+    c && a.set(`${c.type}:${c.attribute}`, c);
+  }), Array.from(a.values()).map((s, l) => ({
+    ...s,
+    id: l + 1
+  }));
+}
+function sr(o) {
+  const a = o || "", s = /* @__PURE__ */ new Map(), l = (h, p) => {
+    const f = `${p}:${h}`;
+    s.has(f) || s.set(f, {
+      id: s.size + 1,
+      variable: p === "system" ? `{%${h}%}` : `{{${h}}}`,
+      type: p,
+      attribute: h,
+      default: ""
+    });
+  };
+  let c;
+  for (ne.lastIndex = 0; c = ne.exec(a); ) {
+    const h = c.index, p = h + c[0].length;
+    if (!se(a, h, p, "{", "}")) continue;
+    const f = c[1].trim();
+    !f || !H.test(f) || l(f, "user");
+  }
+  let g;
+  for (Ue.lastIndex = 0; g = Ue.exec(a); ) {
+    const h = g.index, p = h + g[0].length;
+    if (!se(a, h, p, "{", "}")) continue;
+    const f = g[1].trim();
+    !f || !H.test(f) || l(f, "system");
+  }
+  return Array.from(s.values());
+}
+function dr(o, a) {
+  const s = /* @__PURE__ */ new Map();
+  return a.forEach((l) => {
+    s.set(`${l.type}:${l.attribute}`, l.default ?? "");
+  }), o.map((l, c) => ({
+    ...l,
+    id: c + 1,
+    default: s.get(`${l.type}:${l.attribute}`) ?? l.default ?? ""
+  }));
+}
+function cr(o) {
+  return o.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function ur(o, a) {
+  const s = /* @__PURE__ */ new Map();
+  return a.forEach((l) => {
+    l.type === "user" && s.set(l.attribute, l.default ?? "");
+  }), (o || "").replace(ne, (l, c, g, h) => {
+    const p = g + l.length;
+    if (!se(h, g, p, "{", "}")) return l;
+    const f = String(c).trim();
+    if (!f || !H.test(f)) return l;
+    const R = s.get(f);
+    return R === void 0 || R === "" ? l : cr(R);
+  });
+}
+function qe(o, a, s = "") {
+  const l = o.trim();
+  if (!l || !H.test(l)) return null;
+  const c = a === "builtin" ? "system" : "user";
+  return {
+    id: 1,
+    variable: Qe(l, a),
+    type: c,
+    attribute: l,
+    default: c === "system" ? "" : s
+  };
+}
+function mr(o) {
+  const a = o.trim();
+  return a ? ae.some((s) => s.items.some((l) => l.name === a)) : !1;
+}
+function hr(o, a) {
+  const s = o.trim();
+  return a === "user" && s === Ke ? `<a href="{{${Ke}}">Unsubscribe Link</a>` : Qe(s, a);
+}
+const br = V(qt), pr = V(Xt), fr = V(Jt), xr = V(Qt), gr = V(Zt), yr = V(er), vr = V(tr), Er = V(rr), Tr = V(or), de = {
   // 浅色主题
-  xcodeLight: je,
-  vscodeLight: We,
-  tokyoNightDay: Ve,
-  gruvboxLight: Be,
-  noctisLilac: ze,
-  bbedit: Ne,
+  xcodeLight: Nt,
+  vscodeLight: Ft,
+  tokyoNightDay: Bt,
+  gruvboxLight: Rt,
+  noctisLilac: Ot,
+  bbedit: zt,
   // 深色主题
-  abcdef: Oe,
-  basicDark: Pe,
-  dracula: le,
-  tomorrowNightBlue: Ie,
-  xcodeDark: He
-}, ot = {
+  abcdef: At,
+  basicDark: kt,
+  dracula: Je,
+  tomorrowNightBlue: It,
+  xcodeDark: Mt
+}, Vr = {
   xcodeLight: "Xcode Light (Light)",
   vscodeLight: "VSCode Light (Light)",
   tokyoNightDay: "Tokyo Night Day (Light)",
   gruvboxLight: "Gruvbox Light (Light)",
   noctisLilac: "Noctis Lilac (Light)",
   bbedit: "BBEdit (Light)"
-}, rt = {
+}, Cr = {
   abcdef: "ABCDEF (Dark)",
   basicDark: "Basic Dark (Dark)",
   dracula: "Dracula (Dark)",
   tomorrowNightBlue: "Tomorrow Night Blue (Dark)",
   xcodeDark: "Xcode Dark (Dark)"
-}, ne = "html-editor-theme", ie = "dracula";
-function it(l = ie) {
-  const c = l && C[l] ? l : ie;
-  if (typeof window > "u") return c;
+}, Ze = "html-editor-theme", Xe = "dracula";
+function wr(o = Xe) {
+  const a = o && de[o] ? o : Xe;
+  if (typeof window > "u") return a;
   try {
-    const p = localStorage.getItem(ne);
-    if (p && C[p]) return p;
+    const s = localStorage.getItem(Ze);
+    if (s && de[s]) return s;
   } catch {
     console.error("Failed to get HTML Editor stored theme");
   }
-  return c;
+  return a;
 }
-function lt(l) {
+function Sr(o) {
   try {
-    localStorage.setItem(ne, l);
+    localStorage.setItem(Ze, o);
   } catch {
-    console.error("Failed to set HTML Editor stored theme", l);
+    console.error("Failed to set HTML Editor stored theme", o);
   }
 }
-function xt({
-  value: l,
-  onChange: c,
-  language: p = "zh",
-  initialMode: de = "split",
-  initialDevice: ae = "desktop",
-  codeEditorHeight: se = "100%",
-  previewHeight: ce = "100%",
-  sx: me,
-  showToolbar: he = !0,
-  initialTheme: pe
-}) {
-  var F, H, I, P, O, N, z, B, V, W, j, _, R, Y, A, G, $, X;
-  const r = (o, t) => Ue(o, t, p), [n, ue] = E(de), [m, fe] = E(ae), [k, ge] = E(() => it(pe)), [v, D] = E(l), u = Z(null), y = Z(null);
-  T(() => {
-    l !== v && D(l);
-  }, [l]);
-  const be = (o) => {
-    D(o), u.current && clearTimeout(u.current), u.current = setTimeout(() => {
-      c == null || c(o);
+function Hr({
+  value: o,
+  onChange: a,
+  language: s = "zh",
+  initialMode: l = "split",
+  initialDevice: c = "desktop",
+  codeEditorHeight: g = "100%",
+  previewHeight: h = "100%",
+  sx: p,
+  showToolbar: f = !0,
+  initialTheme: R,
+  initialRightTab: et = "preview",
+  variables: N,
+  onVariablesChange: $,
+  requireVariableDefaults: ce = !0
+}, tt) {
+  var ve, Ee, Te, Ve, Ce, we, Se, He, Le, De, Me, Ie, ke, Ae, ze, Oe, Re, Be;
+  const n = (e, t) => lr(e, t, s), [v, rt] = y(l), [D, ot] = y(c), [ue, it] = y(() => wr(R)), [x, me] = y(o), [he, M] = y(et), [u, be] = y(() => Ye(N)), [lt, at] = y(!1), [nt, st] = y("custom"), [I, pe] = y(""), [k, fe] = y(""), [Z, _] = y(!1), [ee, P] = y(!1), B = oe(null), xe = oe(null), W = oe(null);
+  J(() => {
+    o !== x && me(o);
+  }, [o]), J(() => {
+    N !== void 0 && be(Ye(N));
+  }, [N]);
+  const C = w(
+    (e) => {
+      const t = e.map((i, b) => ({
+        ...i,
+        id: b + 1,
+        default: i.type === "system" ? "" : i.default ?? ""
+      }));
+      return be(t), $ == null || $(t), t;
+    },
+    [$]
+  ), te = (e) => {
+    me(e), B.current && clearTimeout(B.current), B.current = setTimeout(() => {
+      a == null || a(e);
     }, 300);
-  };
-  T(() => () => {
-    u.current && clearTimeout(u.current);
+  }, j = w(
+    (e = x) => {
+      const t = sr(e), i = dr(t, u);
+      return C(i);
+    },
+    [u, x, C]
+  ), G = w(() => {
+    const e = j(x), t = ce ? e.filter((i) => i.type === "user" && i.default.trim() === "") : [];
+    return at(t.length > 0), t.length > 0 && M("variables"), {
+      valid: t.length === 0,
+      variables: e,
+      missing: t
+    };
+  }, [x, ce, j]), dt = w(() => {
+    G(), M("variables");
+  }, [G]);
+  J(() => () => {
+    B.current && clearTimeout(B.current);
   }, []);
-  const xe = (o) => {
-    var K, U, J;
-    const t = o || "";
-    let h = t;
+  const ct = (e) => {
+    var X, Fe, Ne;
+    const t = e || "";
+    let i = t;
     if (!t.trim())
-      h = "<!DOCTYPE html><html><head></head><body></body></html>";
+      i = "<!DOCTYPE html><html><head></head><body></body></html>";
     else {
-      const a = new DOMParser().parseFromString(t, "text/html"), L = ((K = a.documentElement) == null ? void 0 : K.tagName.toLowerCase()) === "html", Te = ((U = a.head) == null ? void 0 : U.tagName.toLowerCase()) === "head", Ce = ((J = a.body) == null ? void 0 : J.tagName.toLowerCase()) === "body";
-      if (!L || !Te || !Ce) {
-        const ke = a.body ? a.body.innerHTML : t;
-        h = `<!DOCTYPE html><html><head>${a.head ? a.head.innerHTML : ""}</head><body>${ke}</body></html>`;
+      const T = new DOMParser().parseFromString(t, "text/html"), re = ((X = T.documentElement) == null ? void 0 : X.tagName.toLowerCase()) === "html", Tt = ((Fe = T.head) == null ? void 0 : Fe.tagName.toLowerCase()) === "head", Vt = ((Ne = T.body) == null ? void 0 : Ne.tagName.toLowerCase()) === "body";
+      if (!re || !Tt || !Vt) {
+        const Ct = T.body ? T.body.innerHTML : t;
+        i = `<!DOCTYPE html><html><head>${T.head ? T.head.innerHTML : ""}</head><body>${Ct}</body></html>`;
       } else
-        h = `<!DOCTYPE html>${a.documentElement.outerHTML}`;
+        i = `<!DOCTYPE html>${T.documentElement.outerHTML}`;
     }
-    const Le = ["script", "iframe", "object", "embed", "canvas"], q = new DOMParser().parseFromString(h, "text/html");
-    return Le.forEach((Q) => {
-      q.querySelectorAll(Q).forEach((L) => L.remove());
-    }), h = `<!DOCTYPE html>${q.documentElement.outerHTML}`, h;
-  }, w = Me(() => xe(v), [v]);
-  T(() => {
-    y.current && y.current.srcdoc !== w && (y.current.srcdoc = w);
-  }, [w]);
-  const ve = (o, t) => {
-    t !== null && ue(t);
-  }, ye = (o, t) => {
-    (t === "desktop" || t === "mobile") && fe(t);
-  }, d = _e(), we = m === "desktop" || m === "mobile" ? m : "desktop", Ee = n === "split" || n === "code" || n === "preview" ? n : "split";
-  (H = (F = d.palette) == null ? void 0 : F.action) == null || H.selected, (P = (I = d.palette) == null ? void 0 : I.primary) == null || P.main, (N = (O = d.palette) == null ? void 0 : O.action) == null || N.selected, (B = (z = d.palette) == null ? void 0 : z.background) == null || B.paper, (W = (V = d.palette) == null ? void 0 : V.text) == null || W.primary, (_ = (j = d.palette) == null ? void 0 : j.action) == null || _.hover;
-  const f = {
+    const b = ["script", "iframe", "object", "embed", "canvas"], z = new DOMParser().parseFromString(i, "text/html");
+    return b.forEach(($e) => {
+      z.querySelectorAll($e).forEach((re) => re.remove());
+    }), i = `<!DOCTYPE html>${z.documentElement.outerHTML}`, i;
+  }, K = Q(
+    () => ur(x, u),
+    [u, x]
+  ), U = Q(() => ct(K), [K]);
+  Ht(
+    tt,
+    () => ({
+      getValue: () => x,
+      getPreviewHtml: () => K,
+      scanVariables: () => j(x),
+      getVariables: (e) => (e == null || e(u), u),
+      validateVariables: G,
+      showVariables: () => M("variables")
+    }),
+    [u, x, K, j, G]
+  ), J(() => {
+    W.current && W.current.srcdoc !== U && (W.current.srcdoc = U);
+  }, [U]);
+  const ut = (e, t) => {
+    t !== null && rt(t);
+  }, mt = (e, t) => {
+    (t === "desktop" || t === "mobile") && ot(t);
+  }, Y = w(
+    (e) => {
+      var i, b;
+      const t = xe.current;
+      if (t != null && t.state && (t != null && t.dispatch)) {
+        const L = (i = t.state.selection) == null ? void 0 : i.main, z = (L == null ? void 0 : L.from) ?? t.state.doc.length, X = (L == null ? void 0 : L.to) ?? z;
+        t.dispatch({
+          changes: { from: z, to: X, insert: e },
+          selection: { anchor: z + e.length }
+        }), (b = t.focus) == null || b.call(t), te(t.state.doc.toString());
+        return;
+      }
+      te(`${x}${e}`);
+    },
+    [x]
+  ), ht = w(
+    (e, t, i) => {
+      C(
+        u.map(
+          (b) => b.attribute === e && b.type === t ? { ...b, default: i } : b
+        )
+      );
+    },
+    [u, C]
+  ), bt = w(
+    (e, t) => {
+      const i = qe(e, t);
+      i && (Y(hr(e, t)), u.some((b) => b.attribute === i.attribute && b.type === i.type) || C([...u, i]), M("variables"));
+    },
+    [u, Y, C]
+  ), q = Q(() => {
+    const e = I.trim();
+    return e ? H.test(e) ? mr(e) || u.some((t) => t.type === "user" && t.attribute === e) ? n("text.variables.customVariableNameDuplicate") : "" : n("text.variables.customVariableNameInvalid") : n("text.variables.customVariableNameRequired");
+  }, [I, u]), pt = w(() => {
+    const e = k.trim();
+    if (_(!0), P(!0), q || e === "") return;
+    const t = qe(I.trim(), "user", e);
+    t && (Y(t.variable), C([...u, t]), pe(""), fe(""), _(!1), P(!1), M("variables"));
+  }, [k, I, q, u, Y, C]), ft = Q(() => [{ id: "custom", items: u.filter((t) => t.type === "user").filter((t) => !ae.some((i) => i.items.some((b) => b.name === t.attribute))).map((t) => ({
+    name: t.attribute,
+    labelKey: t.attribute,
+    kind: "user"
+  })) }, ...ae], [u]), xt = (e) => e === "custom" ? "text.variables.groupCustom" : e === "contacts" ? "text.variables.groupContacts" : e === "email" ? "text.variables.groupEmail" : e === "organization" ? "text.variables.groupOrganization" : e === "date" ? "text.variables.groupDate" : "text.variables.groupLinks", E = $t(), gt = D === "desktop" || D === "mobile" ? D : "desktop", yt = v === "split" || v === "code" || v === "preview" ? v : "split";
+  (Ee = (ve = E.palette) == null ? void 0 : ve.action) == null || Ee.selected, (Ve = (Te = E.palette) == null ? void 0 : Te.primary) == null || Ve.main, (we = (Ce = E.palette) == null ? void 0 : Ce.action) == null || we.selected, (He = (Se = E.palette) == null ? void 0 : Se.background) == null || He.paper, (De = (Le = E.palette) == null ? void 0 : Le.text) == null || De.primary, (Ie = (Me = E.palette) == null ? void 0 : Me.action) == null || Ie.hover;
+  const A = {
     tooltip: {
       sx: {
-        fontSize: "11px",
-        fontWeight: 300,
-        backgroundColor: re(((Y = (R = d.palette) == null ? void 0 : R.text) == null ? void 0 : Y.primary) ?? "#1F1F21", 0.9),
-        color: ((G = (A = d.palette) == null ? void 0 : A.common) == null ? void 0 : G.white) ?? "#fff"
+        fontSize: "13px",
+        fontWeight: 400,
+        lineHeight: 1.45,
+        maxWidth: 360,
+        backgroundColor: Ge(((Ae = (ke = E.palette) == null ? void 0 : ke.text) == null ? void 0 : Ae.primary) ?? "#1F1F21", 0.9),
+        color: ((Oe = (ze = E.palette) == null ? void 0 : ze.common) == null ? void 0 : Oe.white) ?? "#fff"
       }
     },
     arrow: {
-      sx: { color: re(((X = ($ = d.palette) == null ? void 0 : $.text) == null ? void 0 : X.primary) ?? "#1F1F21", 0.9) }
+      sx: { color: Ge(((Be = (Re = E.palette) == null ? void 0 : Re.text) == null ? void 0 : Be.primary) ?? "#1F1F21", 0.9) }
     }
-  }, M = () => /* @__PURE__ */ e(
-    i,
+  }, ge = () => /* @__PURE__ */ m(
+    d,
     {
       sx: {
-        height: se,
+        height: g,
         minHeight: 0,
         display: "flex",
         flexDirection: "column",
-        borderRight: n === "split" ? "1px solid" : "none",
+        position: "relative",
+        borderRight: v === "split" ? "1px solid" : "none",
         borderColor: "divider"
       },
-      children: /* @__PURE__ */ e(
-        i,
-        {
-          sx: {
-            flex: 1,
-            minHeight: 0,
-            overflow: "hidden",
-            display: "flex",
-            flexDirection: "column",
-            "& .cm-editor": {
-              fontSize: "14px"
-            },
-            "& .cm-scroller": {
-              fontFamily: "monospace"
-            },
-            "& .cm-theme": {
-              height: "100%"
-            },
-            // 自定义光标样式，使其更粗、更显眼
-            "& .cm-cursor": {
-              borderLeftWidth: "2px !important",
-              borderLeftStyle: "solid !important",
-              marginLeft: "-1px"
-              // 补偿增加的宽度，保持位置居中
+      children: [
+        /* @__PURE__ */ r(
+          d,
+          {
+            sx: {
+              flex: 1,
+              minHeight: 0,
+              overflow: "hidden",
+              display: "flex",
+              flexDirection: "column",
+              "& .cm-editor": {
+                fontSize: "14px"
+              },
+              "& .cm-scroller": {
+                fontFamily: "monospace"
+              },
+              "& .cm-theme": {
+                height: "100%"
+              },
+              // 自定义光标样式，使其更粗、更显眼
+              "& .cm-cursor": {
+                borderLeftWidth: "2px !important",
+                borderLeftStyle: "solid !important",
+                marginLeft: "-1px"
+                // 补偿增加的宽度，保持位置居中
+              },
+              "& .cm-focused .cm-cursor": {
+                borderLeftWidth: "2px !important",
+                borderLeftStyle: "solid !important",
+                opacity: 1
+              }
             },
-            "& .cm-focused .cm-cursor": {
-              borderLeftWidth: "2px !important",
-              borderLeftStyle: "solid !important",
-              opacity: 1
-            }
-          },
-          children: /* @__PURE__ */ e(
-            Se,
-            {
-              value: v,
-              height: "100%",
-              extensions: [Fe()],
-              theme: C[k] || le,
-              onChange: be,
-              basicSetup: {
-                lineNumbers: !0,
-                foldGutter: !0,
-                dropCursor: !0,
-                allowMultipleSelections: !0
+            children: /* @__PURE__ */ r(
+              Lt,
+              {
+                value: x,
+                height: "100%",
+                extensions: [Dt()],
+                theme: de[ue] || Je,
+                onChange: te,
+                onCreateEditor: (e) => {
+                  xe.current = e;
+                },
+                basicSetup: {
+                  lineNumbers: !0,
+                  foldGutter: !0,
+                  dropCursor: !0,
+                  allowMultipleSelections: !0
+                }
               }
-            }
-          )
-        }
-      )
+            )
+          }
+        ),
+        /* @__PURE__ */ r(
+          ie,
+          {
+            size: "small",
+            variant: "contained",
+            startIcon: /* @__PURE__ */ r(fr, { fontSize: "small" }),
+            onClick: dt,
+            sx: {
+              position: "absolute",
+              right: 16,
+              bottom: 16,
+              zIndex: 2,
+              textTransform: "none",
+              boxShadow: 3
+            },
+            children: n("common.save")
+          }
+        )
+      ]
     }
-  ), S = () => /* @__PURE__ */ e(i, { sx: {
-    height: ce,
+  ), vt = () => /* @__PURE__ */ r(d, { sx: {
+    height: h,
     overflow: "auto",
     backgroundColor: "#F5F5F5",
-    padding: m === "mobile" ? "32px 16px" : "16px",
+    padding: D === "mobile" ? "32px 16px" : "16px",
     display: "flex",
     justifyContent: "center"
-  }, children: /* @__PURE__ */ e(
-    i,
+  }, children: /* @__PURE__ */ r(
+    d,
     {
       sx: {
         width: "100%",
-        maxWidth: m === "mobile" ? "370px" : "100%",
-        height: m === "mobile" ? "800px" : "100%",
+        maxWidth: D === "mobile" ? "370px" : "100%",
+        height: D === "mobile" ? "800px" : "100%",
         border: "none",
         overflow: "hidden"
       },
-      children: /* @__PURE__ */ e(
+      children: /* @__PURE__ */ r(
         "iframe",
         {
-          ref: y,
-          srcDoc: w,
+          ref: W,
+          srcDoc: U,
           style: {
             width: "100%",
             height: "100%",
@@ -218,9 +448,215 @@ function xt({
         }
       )
     }
-  ) });
-  return /* @__PURE__ */ s(
-    i,
+  ) }), Et = () => /* @__PURE__ */ m(
+    d,
+    {
+      sx: {
+        height: h,
+        overflow: "auto",
+        backgroundColor: "background.paper",
+        p: 2
+      },
+      children: [
+        /* @__PURE__ */ r(d, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 1, mb: 1.5 }, children: /* @__PURE__ */ m(d, { sx: { minWidth: 0 }, children: [
+          /* @__PURE__ */ m(d, { sx: { display: "flex", alignItems: "center", gap: 0.75 }, children: [
+            /* @__PURE__ */ r(S, { variant: "subtitle1", sx: { fontWeight: 700 }, children: n("htmlEditor.variables.title") }),
+            /* @__PURE__ */ r(O, { title: n("htmlEditor.variables.help"), arrow: !0, slotProps: A, children: /* @__PURE__ */ r(d, { component: "span", sx: { display: "inline-flex", color: "text.secondary", cursor: "help" }, children: /* @__PURE__ */ r(gr, { fontSize: "small" }) }) })
+          ] }),
+          /* @__PURE__ */ r(S, { variant: "body2", color: "text.secondary", children: n("htmlEditor.variables.scanHint") })
+        ] }) }),
+        /* @__PURE__ */ r(d, { sx: { mb: 2 }, children: ft.map((e) => {
+          const t = nt === e.id;
+          return /* @__PURE__ */ m(
+            Gt,
+            {
+              disableGutters: !0,
+              square: !0,
+              elevation: 0,
+              expanded: t,
+              onChange: (i, b) => st(b ? e.id : null),
+              sx: {
+                "&:before": { display: "none" },
+                border: 1,
+                borderColor: "divider",
+                borderRadius: 1,
+                overflow: "hidden",
+                mb: 1
+              },
+              children: [
+                /* @__PURE__ */ r(
+                  Kt,
+                  {
+                    expandIcon: /* @__PURE__ */ r(xr, { fontSize: "small" }),
+                    sx: {
+                      minHeight: 44,
+                      "& .MuiAccordionSummary-content": { my: 1 }
+                    },
+                    children: /* @__PURE__ */ r(S, { variant: "body2", color: "text.primary", children: n(xt(e.id)) })
+                  }
+                ),
+                /* @__PURE__ */ m(Ut, { sx: { pt: 0, pb: 1.25 }, children: [
+                  e.id === "custom" && /* @__PURE__ */ m(d, { sx: { mb: 1 }, children: [
+                    /* @__PURE__ */ r(
+                      le,
+                      {
+                        size: "small",
+                        fullWidth: !0,
+                        label: n("text.variables.customVariableName"),
+                        value: I,
+                        placeholder: "e.g. order_id",
+                        onChange: (i) => {
+                          pe(i.target.value), !Z && i.target.value.trim() !== "" && _(!0);
+                        },
+                        onBlur: () => {
+                          I.trim() !== "" && _(!0);
+                        },
+                        error: Z && !!q,
+                        helperText: Z && q || " ",
+                        sx: { mb: 1 }
+                      }
+                    ),
+                    /* @__PURE__ */ r(
+                      le,
+                      {
+                        size: "small",
+                        fullWidth: !0,
+                        label: n("text.variables.defaultValueLabel"),
+                        value: k,
+                        placeholder: n("text.variables.defaultPlaceholder"),
+                        onChange: (i) => {
+                          fe(i.target.value), !ee && i.target.value.trim() !== "" && P(!0);
+                        },
+                        onBlur: () => {
+                          k.trim() !== "" && P(!0);
+                        },
+                        error: ee && k.trim() === "",
+                        helperText: ee && k.trim() === "" ? n("text.variables.defaultRequired") : " "
+                      }
+                    ),
+                    /* @__PURE__ */ r(
+                      ie,
+                      {
+                        fullWidth: !0,
+                        size: "small",
+                        variant: "outlined",
+                        startIcon: /* @__PURE__ */ r(br, { fontSize: "small" }),
+                        onClick: pt,
+                        sx: {
+                          justifyContent: "center",
+                          borderColor: "divider",
+                          borderStyle: "dashed",
+                          color: "text.secondary",
+                          textTransform: "none"
+                        },
+                        children: n("text.variables.addCustomVariable")
+                      }
+                    )
+                  ] }),
+                  e.items.length > 0 && /* @__PURE__ */ r(d, { sx: { display: "grid", gap: 0.75 }, children: e.items.map((i) => /* @__PURE__ */ r(
+                    ie,
+                    {
+                      size: "small",
+                      variant: "outlined",
+                      onClick: () => bt(i.name, i.kind),
+                      sx: {
+                        justifyContent: "flex-start",
+                        borderColor: "divider",
+                        color: "text.secondary",
+                        textTransform: "none"
+                      },
+                      children: /* @__PURE__ */ m(d, { sx: { textAlign: "left", minWidth: 0 }, children: [
+                        /* @__PURE__ */ r(S, { variant: "body2", color: "text.primary", children: e.id === "custom" ? i.name : n(i.labelKey) }),
+                        /* @__PURE__ */ r(S, { variant: "caption", color: "text.secondary", sx: { fontFamily: "monospace" }, children: i.kind === "builtin" ? `{%${i.name}%}` : `{{${i.name}}}` })
+                      ] })
+                    },
+                    `${e.id}:${i.name}`
+                  )) })
+                ] })
+              ]
+            },
+            e.id
+          );
+        }) }),
+        /* @__PURE__ */ r(Yt, { sx: { my: 2 } }),
+        /* @__PURE__ */ r(S, { variant: "subtitle2", sx: { mb: 1 }, children: n("htmlEditor.variables.detected") }),
+        /* @__PURE__ */ r(S, { variant: "body2", color: "text.secondary", sx: { mb: 1.25 }, children: n("htmlEditor.variables.defaultHelp") }),
+        u.length === 0 ? /* @__PURE__ */ r(
+          d,
+          {
+            sx: {
+              border: "1px dashed",
+              borderColor: "divider",
+              borderRadius: 1,
+              p: 2,
+              color: "text.secondary",
+              fontSize: 14,
+              textAlign: "center"
+            },
+            children: n("htmlEditor.variables.empty")
+          }
+        ) : /* @__PURE__ */ r(d, { sx: { display: "grid", gap: 1.5 }, children: u.map((e) => {
+          const t = lt && e.type === "user" && e.default.trim() === "";
+          return /* @__PURE__ */ m(
+            d,
+            {
+              sx: {
+                display: "grid",
+                gap: 0.75,
+                p: 1.25,
+                border: "1px solid",
+                borderColor: t ? "error.main" : "divider",
+                borderRadius: 1
+              },
+              children: [
+                /* @__PURE__ */ r(S, { variant: "body2", sx: { fontFamily: "monospace", wordBreak: "break-all" }, children: e.variable }),
+                /* @__PURE__ */ r(
+                  le,
+                  {
+                    size: "small",
+                    fullWidth: !0,
+                    disabled: e.type === "system",
+                    value: e.default,
+                    label: n("text.variables.defaultValueLabel"),
+                    placeholder: e.type === "system" ? n("htmlEditor.variables.systemDefault") : n("text.variables.defaultPlaceholder"),
+                    error: t,
+                    helperText: t ? n("text.variables.defaultRequired") : " ",
+                    onChange: (i) => ht(e.attribute, e.type, i.target.value)
+                  }
+                )
+              ]
+            },
+            `${e.type}:${e.attribute}`
+          );
+        }) })
+      ]
+    }
+  ), ye = () => /* @__PURE__ */ m(d, { sx: { height: h, minHeight: 0, display: "flex", flexDirection: "column" }, children: [
+    /* @__PURE__ */ m(
+      jt,
+      {
+        value: he,
+        onChange: (e, t) => M(t),
+        sx: {
+          minHeight: 40,
+          borderBottom: "1px solid",
+          borderColor: "divider",
+          backgroundColor: "background.paper",
+          "& .MuiTab-root": {
+            minHeight: 40,
+            textTransform: "none"
+          }
+        },
+        children: [
+          /* @__PURE__ */ r(je, { value: "preview", label: n("htmlEditor.tabs.preview") }),
+          /* @__PURE__ */ r(je, { value: "variables", label: n("htmlEditor.tabs.variables") })
+        ]
+      }
+    ),
+    /* @__PURE__ */ r(d, { sx: { flex: 1, minHeight: 0, overflow: "hidden" }, children: he === "preview" ? vt() : Et() })
+  ] });
+  return /* @__PURE__ */ m(
+    d,
     {
       sx: {
         display: "flex",
@@ -229,11 +665,11 @@ function xt({
         width: "100%",
         minHeight: 0,
         minWidth: 0,
-        ...me
+        ...p
       },
       children: [
-        he && /* @__PURE__ */ s(
-          i,
+        f && /* @__PURE__ */ m(
+          d,
           {
             sx: {
               display: "flex",
@@ -245,55 +681,55 @@ function xt({
               backgroundColor: "background.paper"
             },
             children: [
-              /* @__PURE__ */ s(i, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
-                /* @__PURE__ */ s(
-                  ee,
+              /* @__PURE__ */ m(d, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+                /* @__PURE__ */ m(
+                  _e,
                   {
-                    value: Ee,
+                    value: yt,
                     exclusive: !0,
-                    onChange: ve,
+                    onChange: ut,
                     size: "small",
-                    "aria-label": r("htmlEditor.mode.split"),
+                    "aria-label": n("htmlEditor.mode.split"),
                     children: [
-                      /* @__PURE__ */ e(b, { title: r("htmlEditor.tooltips.splitView"), arrow: !0, slotProps: f, children: /* @__PURE__ */ e(
-                        g,
+                      /* @__PURE__ */ r(O, { title: n("htmlEditor.tooltips.splitView"), arrow: !0, slotProps: A, children: /* @__PURE__ */ r(
+                        F,
                         {
                           value: "split",
-                          "aria-label": r("htmlEditor.mode.split"),
-                          children: /* @__PURE__ */ e(Ze, { fontSize: "small" })
+                          "aria-label": n("htmlEditor.mode.split"),
+                          children: /* @__PURE__ */ r(vr, { fontSize: "small" })
                         }
                       ) }),
-                      /* @__PURE__ */ e(b, { title: r("htmlEditor.tooltips.codeOnly"), arrow: !0, slotProps: f, children: /* @__PURE__ */ e(
-                        g,
+                      /* @__PURE__ */ r(O, { title: n("htmlEditor.tooltips.codeOnly"), arrow: !0, slotProps: A, children: /* @__PURE__ */ r(
+                        F,
                         {
                           value: "code",
-                          "aria-label": r("htmlEditor.mode.code"),
-                          children: /* @__PURE__ */ e(Je, { fontSize: "small" })
+                          "aria-label": n("htmlEditor.mode.code"),
+                          children: /* @__PURE__ */ r(pr, { fontSize: "small" })
                         }
                       ) }),
-                      /* @__PURE__ */ e(b, { title: r("htmlEditor.tooltips.previewOnly"), arrow: !0, slotProps: f, children: /* @__PURE__ */ e(
-                        g,
+                      /* @__PURE__ */ r(O, { title: n("htmlEditor.tooltips.previewOnly"), arrow: !0, slotProps: A, children: /* @__PURE__ */ r(
+                        F,
                         {
                           value: "preview",
-                          "aria-label": r("htmlEditor.mode.preview"),
-                          children: /* @__PURE__ */ e(Qe, { fontSize: "small" })
+                          "aria-label": n("htmlEditor.mode.preview"),
+                          children: /* @__PURE__ */ r(yr, { fontSize: "small" })
                         }
                       ) })
                     ]
                   }
                 ),
-                /* @__PURE__ */ s(Re, { size: "small", sx: { minWidth: 140 }, children: [
-                  /* @__PURE__ */ e(Ye, { id: "theme-select-label", children: r("htmlEditor.theme") }),
-                  /* @__PURE__ */ s(
-                    Ae,
+                /* @__PURE__ */ m(_t, { size: "small", sx: { minWidth: 140 }, children: [
+                  /* @__PURE__ */ r(Pt, { id: "theme-select-label", children: n("htmlEditor.theme") }),
+                  /* @__PURE__ */ m(
+                    Wt,
                     {
                       labelId: "theme-select-label",
                       id: "theme-select",
-                      value: k,
-                      label: r("htmlEditor.theme"),
-                      onChange: (o) => {
-                        const t = o.target.value;
-                        ge(t), console.log("theme changed to", t), lt(t);
+                      value: ue,
+                      label: n("htmlEditor.theme"),
+                      onChange: (e) => {
+                        const t = e.target.value;
+                        it(t), console.log("theme changed to", t), Sr(t);
                       },
                       sx: {
                         // fontSize: '0.875rem',
@@ -302,38 +738,38 @@ function xt({
                         }
                       },
                       children: [
-                        /* @__PURE__ */ e(te, { children: r("htmlEditor.lightThemes") }),
-                        Object.entries(ot).map(([o, t]) => /* @__PURE__ */ e(oe, { value: o, children: t }, o)),
-                        /* @__PURE__ */ e(te, { children: r("htmlEditor.darkThemes") }),
-                        Object.entries(rt).map(([o, t]) => /* @__PURE__ */ e(oe, { value: o, children: t }, o))
+                        /* @__PURE__ */ r(Pe, { children: n("htmlEditor.lightThemes") }),
+                        Object.entries(Vr).map(([e, t]) => /* @__PURE__ */ r(We, { value: e, children: t }, e)),
+                        /* @__PURE__ */ r(Pe, { children: n("htmlEditor.darkThemes") }),
+                        Object.entries(Cr).map(([e, t]) => /* @__PURE__ */ r(We, { value: e, children: t }, e))
                       ]
                     }
                   )
                 ] })
               ] }),
-              /* @__PURE__ */ e(i, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: n !== "code" && /* @__PURE__ */ s(
-                ee,
+              /* @__PURE__ */ r(d, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: v !== "code" && /* @__PURE__ */ m(
+                _e,
                 {
-                  value: we,
+                  value: gt,
                   exclusive: !0,
-                  onChange: ye,
+                  onChange: mt,
                   size: "small",
-                  "aria-label": r("htmlEditor.device.desktop"),
+                  "aria-label": n("htmlEditor.device.desktop"),
                   children: [
-                    /* @__PURE__ */ e(b, { title: r("htmlEditor.tooltips.desktopView"), arrow: !0, slotProps: f, children: /* @__PURE__ */ e(
-                      g,
+                    /* @__PURE__ */ r(O, { title: n("htmlEditor.tooltips.desktopView"), arrow: !0, slotProps: A, children: /* @__PURE__ */ r(
+                      F,
                       {
                         value: "desktop",
-                        "aria-label": r("htmlEditor.device.desktop"),
-                        children: /* @__PURE__ */ e(et, { fontSize: "small" })
+                        "aria-label": n("htmlEditor.device.desktop"),
+                        children: /* @__PURE__ */ r(Er, { fontSize: "small" })
                       }
                     ) }),
-                    /* @__PURE__ */ e(b, { title: r("htmlEditor.tooltips.mobileView"), arrow: !0, slotProps: f, children: /* @__PURE__ */ e(
-                      g,
+                    /* @__PURE__ */ r(O, { title: n("htmlEditor.tooltips.mobileView"), arrow: !0, slotProps: A, children: /* @__PURE__ */ r(
+                      F,
                       {
                         value: "mobile",
-                        "aria-label": r("htmlEditor.device.mobile"),
-                        children: /* @__PURE__ */ e(tt, { fontSize: "small" })
+                        "aria-label": n("htmlEditor.device.mobile"),
+                        children: /* @__PURE__ */ r(Tr, { fontSize: "small" })
                       }
                     ) })
                   ]
@@ -342,8 +778,8 @@ function xt({
             ]
           }
         ),
-        /* @__PURE__ */ s(
-          i,
+        /* @__PURE__ */ m(
+          d,
           {
             sx: {
               flex: 1,
@@ -353,12 +789,12 @@ function xt({
               overflow: "hidden"
             },
             children: [
-              n === "split" && /* @__PURE__ */ s(De, { children: [
-                /* @__PURE__ */ e(i, { sx: { flex: 1, minHeight: 0, minWidth: 0, overflow: "hidden" }, children: M() }),
-                /* @__PURE__ */ e(i, { sx: { flex: 1, minHeight: 0, minWidth: 0, overflow: "hidden" }, children: S() })
+              v === "split" && /* @__PURE__ */ m(wt, { children: [
+                /* @__PURE__ */ r(d, { sx: { flex: 1, minHeight: 0, minWidth: 0, overflow: "hidden" }, children: ge() }),
+                /* @__PURE__ */ r(d, { sx: { flex: 1, minHeight: 0, minWidth: 0, overflow: "hidden" }, children: ye() })
               ] }),
-              n === "code" && /* @__PURE__ */ e(i, { sx: { flex: 1, minHeight: 0, minWidth: 0, overflow: "hidden" }, children: M() }),
-              n === "preview" && /* @__PURE__ */ e(i, { sx: { flex: 1, minHeight: 0, minWidth: 0, overflow: "hidden" }, children: S() })
+              v === "code" && /* @__PURE__ */ r(d, { sx: { flex: 1, minHeight: 0, minWidth: 0, overflow: "hidden" }, children: ge() }),
+              v === "preview" && /* @__PURE__ */ r(d, { sx: { flex: 1, minHeight: 0, minWidth: 0, overflow: "hidden" }, children: ye() })
             ]
           }
         )
@@ -366,7 +802,9 @@ function xt({
     }
   );
 }
+const Lr = St(Hr);
+Lr.displayName = "HtmlEditor";
 export {
-  xt as HtmlEditor,
-  xt as default
+  Lr as HtmlEditor,
+  Lr as default
 };