mail-editor-pancake 0.2.0 → 0.2.2

package/packages/blocks/dist/index.js

@@ -1,4 +1,4 @@
-import { defineBlock as h, blockButtonWidthCss as P, docContentWidthCss as E, htmlContainsMjmlTags as X, mjRawEmailTableWrap as Z, mjRawCellTypographyFromStyles as Q, normalizeFontWeightStep as k, FONT_WEIGHT_STEP_OPTIONS as L, isRichHtmlEffectivelyEmpty as ee, createI18nContext as te } from "@simple-mail/core";
+import { defineBlock as h, blockButtonWidthCss as j, docContentWidthCss as E, htmlContainsMjmlTags as Z, mjRawEmailTableWrap as Q, mjRawCellTypographyFromStyles as ee, normalizeFontWeightStep as k, FONT_WEIGHT_STEP_OPTIONS as L, isRichHtmlEffectivelyEmpty as te, createI18nContext as oe } from "@simple-mail/core";
 const b = {
   html: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><rect x="3.5" y="4" width="17" height="16" rx="2" stroke="currentColor" stroke-width="1.5" fill="none"/><path d="M8 8.5l3 3.5-3 3.5M16 8.5l-3 3.5 3 3.5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>',
   text: '<svg width="24" height="24" viewBox="0 0 24 24"><path d="M5 6h14M5 10h14M5 14h10M5 18h8" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" fill="none"/></svg>',
@@ -11,7 +11,7 @@ const b = {
   social: '<svg width="24" height="24" viewBox="0 0 24 24"><circle cx="6" cy="12" r="2.5" stroke="currentColor" stroke-width="1.4" fill="none"/><circle cx="12" cy="12" r="2.5" stroke="currentColor" stroke-width="1.4" fill="none"/><circle cx="18" cy="12" r="2.5" stroke="currentColor" stroke-width="1.4" fill="none"/></svg>',
   footer: '<svg width="24" height="24" viewBox="0 0 24 24"><rect x="3.5" y="5" width="17" height="10" rx="1.5" stroke="currentColor" stroke-width="1.4" fill="none"/><path d="M5 18h14" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>',
   socialGroup: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><rect x="3" y="5" width="18" height="14" rx="2" stroke="currentColor" stroke-width="1.5"/><circle cx="8" cy="12" r="2" stroke="currentColor" stroke-width="1.4"/><circle cx="12" cy="12" r="2" stroke="currentColor" stroke-width="1.4"/><circle cx="16" cy="12" r="2" stroke="currentColor" stroke-width="1.4"/></svg>'
-}, x = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;"), oe = h({
+}, x = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;"), le = h({
   type: "button",
   name: "按钮",
   category: "content",
@@ -69,7 +69,7 @@ const b = {
     placeholder: "按钮文字"
   },
   toMjml: (e) => {
-    const t = `${e.paddingTop}px ${e.paddingRight}px ${e.paddingBottom}px ${e.paddingLeft}px`, o = `${e.innerPaddingV}px ${e.innerPaddingH}px`, l = P(e.width), n = l ? ` width="${x(l)}"` : "";
+    const t = `${e.paddingTop}px ${e.paddingRight}px ${e.paddingBottom}px ${e.paddingLeft}px`, o = `${e.innerPaddingV}px ${e.innerPaddingH}px`, l = j(e.width), n = l ? ` width="${x(l)}"` : "";
     return `<mj-button href="${x(e.href)}" background-color="${x(
       e.backgroundColor
     )}" color="${x(e.color)}" border-radius="${e.borderRadius}px" font-size="${x(
@@ -79,12 +79,12 @@ const b = {
     )}</mj-button>`;
   },
   renderPreview: (e) => {
-    const t = P(e.width), o = t ? `width:${t};max-width:100%;box-sizing:border-box;` : "";
+    const t = j(e.width), o = t ? `width:${t};max-width:100%;box-sizing:border-box;` : "";
     return `<div style="padding:${e.paddingTop}px ${e.paddingRight}px ${e.paddingBottom}px ${e.paddingLeft}px;text-align:${e.align};">
       <a href="${x(e.href)}" style="display:inline-block;background:${e.backgroundColor};border-radius:${e.borderRadius}px;padding:${e.innerPaddingV}px ${e.innerPaddingH}px;text-decoration:none;font-size:${e.fontSize};line-height:1.2;${o}"><span class="sm-button-text" style="color:${e.color}">${x(e.text)}</span></a>
     </div>`;
   }
-}), A = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;"), le = h({
+}), A = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;"), ne = h({
   type: "divider",
   name: "分隔线",
   category: "content",
@@ -107,7 +107,7 @@ const b = {
     e.width
   )}" padding="${e.paddingTop}px 0px ${e.paddingBottom}px 0px" />`,
   renderPreview: (e) => `<div style="padding:${e.paddingTop}px 0 ${e.paddingBottom}px 0;"><div style="border-top:${e.thickness}px solid ${e.color};width:${e.width};margin:0 auto;"></div></div>`
-}), m = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;"), ne = h({
+}), m = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;"), ie = h({
   type: "custom:footer",
   name: "页脚",
   category: "custom",
@@ -136,7 +136,7 @@ const b = {
       ${m(e.address)}<br/>
       <a href="${m(e.unsubscribeHref)}" style="color:${e.textColor};">${m(e.unsubscribeText)}</a>
     </div>`
-}), $ = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;"), ie = h({
+}), $ = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;"), re = h({
   type: "hero",
   name: "Hero 大图",
   category: "content",
@@ -248,7 +248,7 @@ const b = {
       >${e.content}</div>
     </div>`;
   }
-}), re = h({
+}), ae = h({
   type: "html",
   name: "HTML",
   category: "content",
@@ -278,13 +278,13 @@ const b = {
   },
   toMjml: (e, t) => {
     const o = `${e.paddingTop}px ${e.paddingRight}px ${e.paddingBottom}px ${e.paddingLeft}px`;
-    return Z(o, e.html, Q(t.doc.styles));
+    return Q(o, e.html, ee(t.doc.styles));
   },
   renderPreview: (e) => {
-    const t = `${e.paddingTop}px ${e.paddingRight}px ${e.paddingBottom}px ${e.paddingLeft}px`, o = X(e.html) ? '<div class="sm-html-mjml-warn">检测到 MJML 标签，此处应只写 HTML，预览可能显示异常。</div>' : "";
+    const t = `${e.paddingTop}px ${e.paddingRight}px ${e.paddingBottom}px ${e.paddingLeft}px`, o = Z(e.html) ? '<div class="sm-html-mjml-warn">检测到 MJML 标签，此处应只写 HTML，预览可能显示异常。</div>' : "";
     return `<div class="sm-html-content" style="padding:${t};min-height:1em;">${o}${e.html}</div>`;
   }
-}), w = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;"), ae = h({
+}), w = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;"), ce = h({
   type: "image",
   name: "图片",
   category: "content",
@@ -337,7 +337,7 @@ const b = {
       e.src
     )}" alt="${w(e.alt)}" style="display:block;${t}max-width:100%;${l}border:0;outline:none;" /></div>`;
   }
-}), z = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;"), ce = h({
+}), z = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;"), se = h({
   type: "custom:logo",
   name: "公司 Logo",
   category: "custom",
@@ -372,17 +372,17 @@ const b = {
     )}" alt="logo" style="display:block;${t}width:${e.width}px;max-width:100%;height:auto;" /></div>`;
   }
 });
-function _(e) {
+function O(e) {
   const t = e.trim();
   return t === "ig" ? "instagram" : t === "rabbit" || t === "tiktok" || t === "reddit" ? "web" : t;
 }
-const se = [
+const de = [
   { label: "X", value: "x" },
   { label: "Rabbit", value: "rabbit" },
   { label: "Facebook", value: "facebook" },
   { label: "TikTok", value: "tiktok" },
   { label: "Instagram", value: "ig" }
-], de = [
+], ge = [
   { label: "微信", value: "wechat" },
   { label: "微博", value: "weibo" },
   { label: "X", value: "x" },
@@ -393,7 +393,7 @@ const se = [
   { label: "YouTube", value: "youtube" },
   { label: "Reddit", value: "reddit" },
   { label: "网页", value: "web" }
-], ge = {
+], pe = {
   wechat: { color: "#1AAD19", preview: "信" },
   weibo: { color: "#E6162D", preview: "微" },
   x: { color: "#000000", preview: "X" },
@@ -408,11 +408,11 @@ const se = [
   rabbit: { color: "#FF2442", preview: "R" },
   website: { color: "#6b7280", preview: "◇" },
   web: { color: "#6b7280", preview: "◇" }
-}, p = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;"), pe = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-function O(e) {
-  return ge[e] ?? { color: "#6b7280", preview: "·" };
+}, p = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;"), he = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+function K(e) {
+  return pe[e] ?? { color: "#6b7280", preview: "·" };
 }
-const he = "https://www.mailjet.com/images/theme/v1/icons/ico-social/", be = {
+const be = "https://www.mailjet.com/images/theme/v1/icons/ico-social/", me = {
   facebook: "facebook.png",
   twitter: "twitter.png",
   x: "twitter-x.png",
@@ -431,26 +431,26 @@ const he = "https://www.mailjet.com/images/theme/v1/icons/ico-social/", be = {
   soundcloud: "soundcloud.png",
   dribbble: "dribbble.png"
 };
-function me(e) {
-  const t = be[_(e)];
-  return t ? `${he}${t}` : null;
+function ue(e) {
+  const t = me[O(e)];
+  return t ? `${be}${t}` : null;
 }
-function K(e) {
-  const { network: t, iconSize: o, iconBorderRadius: l, iconSrc: n, backgroundColor: i } = e, s = ue(o, l), a = O(t), r = (i == null ? void 0 : i.trim()) || a.color, d = (n == null ? void 0 : n.trim()) || me(t);
-  return d ? `<span style="display:inline-flex;width:${o}px;height:${o}px;border-radius:${s};background:${r};overflow:hidden;align-items:center;justify-content:center;flex-shrink:0;line-height:0;"><img src="${p(d)}" alt="" width="${o}" height="${o}" style="display:block;width:${o}px;height:${o}px;border-radius:${s};" /></span>` : `<span style="display:inline-flex;width:${o}px;height:${o}px;border-radius:${s};background:${r};color:#fff;align-items:center;justify-content:center;font-size:${Math.round(
+function V(e) {
+  const { network: t, iconSize: o, iconBorderRadius: l, iconSrc: n, backgroundColor: i } = e, r = fe(o, l), c = K(t), a = (i == null ? void 0 : i.trim()) || c.color, d = (n == null ? void 0 : n.trim()) || ue(t);
+  return d ? `<span style="display:inline-flex;width:${o}px;height:${o}px;border-radius:${r};background:${a};overflow:hidden;align-items:center;justify-content:center;flex-shrink:0;line-height:0;"><img src="${p(d)}" alt="" width="${o}" height="${o}" style="display:block;width:${o}px;height:${o}px;border-radius:${r};" /></span>` : `<span style="display:inline-flex;width:${o}px;height:${o}px;border-radius:${r};background:${a};color:#fff;align-items:center;justify-content:center;font-size:${Math.round(
     o / 2
-  )}px;font-weight:600;flex-shrink:0;overflow:hidden;">${a.preview}</span>`;
+  )}px;font-weight:600;flex-shrink:0;overflow:hidden;">${c.preview}</span>`;
 }
 function S(e) {
   return `${e.paddingTop}px ${e.paddingRight}px ${e.paddingBottom}px ${e.paddingLeft}px`;
 }
-function V(e, t) {
+function U(e, t) {
   const o = Math.max(1, Number(e) || 28), l = Number(t);
   if (!Number.isFinite(l) || l <= 0) return "0px";
   const n = o / 2;
   return l >= 999 || l >= n ? "999px" : `${Math.min(l, o)}px`;
 }
-function ue(e, t) {
+function fe(e, t) {
   const o = Math.max(1, Number(e) || 28), l = Number(t);
   if (!Number.isFinite(l) || l <= 0) return "0";
   const n = o / 2;
@@ -460,29 +460,29 @@ function C(e, t = 10) {
   const o = Number(e);
   return !Number.isFinite(o) || o < 0 ? t : Math.min(64, Math.round(o));
 }
-function U(e) {
+function D(e) {
   return e === "right" ? "flex-end" : e === "left" ? "flex-start" : "center";
 }
-function D(e, t) {
-  var a;
-  const o = t.labelFontSize > 0 ? t.labelFontSize : 13, l = Math.max(8, Math.min(48, o)), n = k(t.labelFontWeight), i = ((a = t.labelColor) == null ? void 0 : a.trim()) || "#333333", s = p(n);
-  return e.map((r) => {
-    var T, F, j;
-    const d = O(r.network), c = ((T = r.backgroundColor) == null ? void 0 : T.trim()) || d.color, u = [
-      `name="${p(_(r.network))}"`,
-      `href="${p(r.href)}"`,
-      `background-color="${p(c)}"`,
+function G(e, t) {
+  var c;
+  const o = t.labelFontSize > 0 ? t.labelFontSize : 13, l = Math.max(8, Math.min(48, o)), n = k(t.labelFontWeight), i = ((c = t.labelColor) == null ? void 0 : c.trim()) || "#333333", r = p(n);
+  return e.map((a) => {
+    var T, P, F;
+    const d = K(a.network), s = ((T = a.backgroundColor) == null ? void 0 : T.trim()) || d.color, u = [
+      `name="${p(O(a.network))}"`,
+      `href="${p(a.href)}"`,
+      `background-color="${p(s)}"`,
       `color="${p(i)}"`,
       `font-size="${l}px"`,
-      `font-weight="${s}"`
-    ].join(" "), y = (F = r.iconSrc) == null ? void 0 : F.trim(), f = y ? `${u} src="${p(y)}"` : u, R = ((j = r.label) == null ? void 0 : j.trim()) ?? "";
+      `font-weight="${r}"`
+    ].join(" "), y = (P = a.iconSrc) == null ? void 0 : P.trim(), f = y ? `${u} src="${p(y)}"` : u, R = ((F = a.label) == null ? void 0 : F.trim()) ?? "";
     return R ? `  <mj-social-element ${f}>
-    ${pe(R)}
+    ${he(R)}
   </mj-social-element>` : `  <mj-social-element ${f} />`;
   }).join(`
 `);
 }
-const G = [
+const J = [
   { network: "x", href: "https://x.com/" },
   { network: "rabbit", href: "https://example.com" },
   { network: "facebook", href: "https://facebook.com/" },
@@ -496,15 +496,15 @@ function H(e) {
   return Array.isArray(t) && t.length ? t.map((l) => ({
     network: String(l.network ?? "web"),
     href: String(l.href ?? "")
-  })) : G;
+  })) : J;
 }
-const fe = h({
+const xe = h({
   type: "custom:social",
   name: "社交链接",
   category: "custom",
   icon: b.social,
   defaultProps: {
-    elements: G,
+    elements: J,
     align: "center",
     iconSize: 28,
     iconBorderRadius: 999,
@@ -522,7 +522,7 @@ const fe = h({
       key: "elements",
       label: "社交链接",
       type: "socialLinkList",
-      options: se,
+      options: de,
       help: "平台：X、Rabbit、Facebook、TikTok、Instagram (ig)。可填标签、自定义图标 URL。MJML 侧 Rabbit/TikTok 使用 web 占位图标，需要品牌图时请填「图标 URL」。"
     },
     {
@@ -574,41 +574,41 @@ const fe = h({
     { key: "paddingTop", label: "外边距", type: "spacing" }
   ],
   toMjml: (e) => {
-    const t = S(e), o = V(e.iconSize, e.iconBorderRadius ?? 999), l = C(e.iconSpacing, 10), n = `align="${e.align}" icon-size="${e.iconSize}px" mode="horizontal" border-radius="${o}" inner-padding="${l}px" padding="${t}"`, i = H(e).filter((r) => {
+    const t = S(e), o = U(e.iconSize, e.iconBorderRadius ?? 999), l = C(e.iconSpacing, 10), n = `align="${e.align}" icon-size="${e.iconSize}px" mode="horizontal" border-radius="${o}" inner-padding="${l}px" padding="${t}"`, i = H(e).filter((a) => {
       var d;
-      return (d = r.href) == null ? void 0 : d.trim();
-    }), s = {
+      return (d = a.href) == null ? void 0 : d.trim();
+    }), r = {
       labelFontSize: Number(e.labelFontSize ?? 13),
       labelFontWeight: k(String(e.labelFontWeight ?? "400")),
       labelColor: String(e.labelColor ?? "#333333")
-    }, a = D(i, s);
-    return a.trim() ? `<mj-social ${n}>
-${a}
+    }, c = G(i, r);
+    return c.trim() ? `<mj-social ${n}>
+${c}
 </mj-social>` : `<mj-social ${n}></mj-social>`;
   },
   renderPreview: (e) => {
     var d;
-    const t = e.labelFontSize != null && e.labelFontSize > 0 ? e.labelFontSize : 13, o = Math.max(8, Math.min(48, t)), l = k(e.labelFontWeight), n = ((d = e.labelColor) == null ? void 0 : d.trim()) || "#333333", i = C(e.iconSpacing, 10), s = U(e.align), a = H(e).filter((c) => {
+    const t = e.labelFontSize != null && e.labelFontSize > 0 ? e.labelFontSize : 13, o = Math.max(8, Math.min(48, t)), l = k(e.labelFontWeight), n = ((d = e.labelColor) == null ? void 0 : d.trim()) || "#333333", i = C(e.iconSpacing, 10), r = D(e.align), c = H(e).filter((s) => {
       var g;
-      return (g = c.href) == null ? void 0 : g.trim();
-    }).map((c) => {
+      return (g = s.href) == null ? void 0 : g.trim();
+    }).map((s) => {
       var f;
-      const g = ((f = c.label) == null ? void 0 : f.trim()) ?? "", u = K({
-        network: c.network,
+      const g = ((f = s.label) == null ? void 0 : f.trim()) ?? "", u = V({
+        network: s.network,
         iconSize: e.iconSize,
         iconBorderRadius: e.iconBorderRadius ?? 999,
-        iconSrc: c.iconSrc,
-        backgroundColor: c.backgroundColor
+        iconSrc: s.iconSrc,
+        backgroundColor: s.backgroundColor
       }), y = g ? `<span style="font-size:${o}px !important;font-weight:${l};color:${p(
         n
       )} !important;line-height:1.2;">${p(g)}</span>` : "";
       return `<span style="display:inline-flex;align-items:center;gap:6px;"><a href="${p(
-        c.href
+        s.href
       )}" style="display:inline-flex;align-items:center;text-decoration:none;line-height:0;">${u}</a>${y}</span>`;
-    }).join(""), r = S(e);
-    return `<div style="display:flex;flex-wrap:wrap;justify-content:${s};align-items:center;gap:${i}px;padding:${r};">${a || '<span style="color:#9ca3af;font-size:12px;">请填写链接 URL</span>'}</div>`;
+    }).join(""), a = S(e);
+    return `<div style="display:flex;flex-wrap:wrap;justify-content:${r};align-items:center;gap:${i}px;padding:${a};">${c || '<span style="color:#9ca3af;font-size:12px;">请填写链接 URL</span>'}</div>`;
   }
-}), xe = h({
+}), ke = h({
   type: "social-group",
   name: "社交组",
   category: "content",
@@ -635,7 +635,7 @@ ${a}
       key: "elements",
       label: "社交链接",
       type: "socialLinkList",
-      options: de,
+      options: ge,
       help: "每行：平台、链接、可选标签文字、自定义图标 URL、图标背景色。标签的字号/字重/颜色在下方统一设置。"
     },
     {
@@ -687,41 +687,41 @@ ${a}
     { key: "paddingTop", label: "外边距", type: "spacing" }
   ],
   toMjml: (e) => {
-    const t = S(e), o = V(e.iconSize, e.iconBorderRadius ?? 999), l = C(e.iconSpacing, 10), n = `align="${e.align}" icon-size="${e.iconSize}px" mode="horizontal" border-radius="${o}" inner-padding="${l}px" padding="${t}"`, i = e.elements.filter((r) => {
+    const t = S(e), o = U(e.iconSize, e.iconBorderRadius ?? 999), l = C(e.iconSpacing, 10), n = `align="${e.align}" icon-size="${e.iconSize}px" mode="horizontal" border-radius="${o}" inner-padding="${l}px" padding="${t}"`, i = e.elements.filter((a) => {
       var d;
-      return (d = r.href) == null ? void 0 : d.trim();
-    }), s = {
+      return (d = a.href) == null ? void 0 : d.trim();
+    }), r = {
       labelFontSize: Number(e.labelFontSize ?? 13),
       labelFontWeight: k(String(e.labelFontWeight ?? "400")),
       labelColor: String(e.labelColor ?? "#333333")
-    }, a = D(i, s);
-    return a.trim() ? `<mj-social ${n}>
-${a}
+    }, c = G(i, r);
+    return c.trim() ? `<mj-social ${n}>
+${c}
 </mj-social>` : `<mj-social ${n}></mj-social>`;
   },
   renderPreview: (e) => {
     var d;
-    const t = e.labelFontSize != null && e.labelFontSize > 0 ? e.labelFontSize : 13, o = Math.max(8, Math.min(48, t)), l = k(e.labelFontWeight), n = ((d = e.labelColor) == null ? void 0 : d.trim()) || "#333333", i = C(e.iconSpacing, 10), s = U(e.align), a = e.elements.filter((c) => {
+    const t = e.labelFontSize != null && e.labelFontSize > 0 ? e.labelFontSize : 13, o = Math.max(8, Math.min(48, t)), l = k(e.labelFontWeight), n = ((d = e.labelColor) == null ? void 0 : d.trim()) || "#333333", i = C(e.iconSpacing, 10), r = D(e.align), c = e.elements.filter((s) => {
       var g;
-      return (g = c.href) == null ? void 0 : g.trim();
-    }).map((c) => {
+      return (g = s.href) == null ? void 0 : g.trim();
+    }).map((s) => {
       var f;
-      const g = ((f = c.label) == null ? void 0 : f.trim()) ?? "", u = K({
-        network: c.network,
+      const g = ((f = s.label) == null ? void 0 : f.trim()) ?? "", u = V({
+        network: s.network,
         iconSize: e.iconSize,
         iconBorderRadius: e.iconBorderRadius ?? 999,
-        iconSrc: c.iconSrc,
-        backgroundColor: c.backgroundColor
+        iconSrc: s.iconSrc,
+        backgroundColor: s.backgroundColor
       }), y = g ? `<span style="font-size:${o}px !important;font-weight:${l};color:${p(
         n
       )} !important;line-height:1.2;">${p(g)}</span>` : "";
       return `<span style="display:inline-flex;align-items:center;gap:6px;"><a href="${p(
-        c.href
+        s.href
       )}" style="display:inline-flex;align-items:center;text-decoration:none;line-height:0;">${u}</a>${y}</span>`;
-    }).join(""), r = S(e);
-    return `<div style="display:flex;flex-wrap:wrap;justify-content:${s};align-items:center;gap:${i}px;padding:${r};">${a || '<span style="color:#9ca3af;font-size:12px;">请添加社交链接</span>'}</div>`;
+    }).join(""), a = S(e);
+    return `<div style="display:flex;flex-wrap:wrap;justify-content:${r};align-items:center;gap:${i}px;padding:${a};">${c || '<span style="color:#9ca3af;font-size:12px;">请添加社交链接</span>'}</div>`;
   }
-}), ke = h({
+}), ye = h({
   type: "spacer",
   name: "间距",
   category: "content",
@@ -730,7 +730,7 @@ ${a}
   schema: [{ key: "height", label: "高度 (px)", type: "number", min: 1, max: 200 }],
   toMjml: (e) => `<mj-spacer height="${e.height}px" />`,
   renderPreview: (e) => `<div style="height:${e.height}px;line-height:${e.height}px;"></div>`
-}), v = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;"), I = "输入文本…", ye = h({
+}), v = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;"), I = "输入文本…", $e = h({
   type: "text",
   name: "文本",
   category: "content",
@@ -807,14 +807,14 @@ ${a}
     placeholder: I
   },
   toMjml: (e) => {
-    const t = `${e.paddingTop}px ${e.paddingRight}px ${e.paddingBottom}px ${e.paddingLeft}px`, o = e.fontFamily ? ` font-family="${v(e.fontFamily)}"` : "", l = String(e.fontWeight ?? "").trim(), n = l ? ` font-weight="${v(k(l))}"` : "", i = String(e.lineHeight ?? "").trim(), s = i ? ` line-height="${v(i)}"` : "", a = String(e.color ?? "").trim(), r = a ? ` color="${v(a)}"` : "", d = String(e.fontSize ?? "").trim(), c = d ? ` font-size="${v(d)}"` : "";
-    return `<mj-text align="${e.align}"${r}${c}${s}${o}${n} padding="${t}">${e.content}</mj-text>`;
+    const t = `${e.paddingTop}px ${e.paddingRight}px ${e.paddingBottom}px ${e.paddingLeft}px`, o = e.fontFamily ? ` font-family="${v(e.fontFamily)}"` : "", l = String(e.fontWeight ?? "").trim(), n = l ? ` font-weight="${v(k(l))}"` : "", i = String(e.lineHeight ?? "").trim(), r = i ? ` line-height="${v(i)}"` : "", c = String(e.color ?? "").trim(), a = c ? ` color="${v(c)}"` : "", d = String(e.fontSize ?? "").trim(), s = d ? ` font-size="${v(d)}"` : "";
+    return `<mj-text align="${e.align}"${a}${s}${r}${o}${n} padding="${t}">${e.content}</mj-text>`;
   },
   renderPreview: (e) => {
-    const t = e.fontFamily ? `font-family:${e.fontFamily};` : "", o = String(e.fontWeight ?? "").trim(), l = o ? `font-weight:${k(o)};` : "", n = String(e.lineHeight ?? "").trim(), i = n ? `line-height:${n};` : "line-height:normal;", s = String(e.color ?? "").trim(), a = s ? `color:${s};` : "", r = String(e.fontSize ?? "").trim(), d = r ? `font-size:${r};` : "", c = ee(e.content), g = c ? " is-empty" : "", u = c ? ` data-placeholder="${I}"` : "";
-    return `<div class="sm-text-content${g}"${u} style="text-align:${e.align};${a}${d}${l}${i}${t}padding:${e.paddingTop}px ${e.paddingRight}px ${e.paddingBottom}px ${e.paddingLeft}px;">${e.content}</div>`;
+    const t = e.fontFamily ? `font-family:${e.fontFamily};` : "", o = String(e.fontWeight ?? "").trim(), l = o ? `font-weight:${k(o)};` : "", n = String(e.lineHeight ?? "").trim(), i = n ? `line-height:${n};` : "line-height:normal;", r = String(e.color ?? "").trim(), c = r ? `color:${r};` : "", a = String(e.fontSize ?? "").trim(), d = a ? `font-size:${a};` : "", s = te(e.content), g = s ? " is-empty" : "", u = s ? ` data-placeholder="${I}"` : "";
+    return `<div class="sm-text-content${g}"${u} style="text-align:${e.align};${c}${d}${l}${i}${t}padding:${e.paddingTop}px ${e.paddingRight}px ${e.paddingBottom}px ${e.paddingLeft}px;">${e.content}</div>`;
   }
-}), $e = {
+}), we = {
   align: "blocks.field.align",
   textAlign: "blocks.field.textAlign",
   verticalAlign: "blocks.field.verticalAlign",
@@ -849,7 +849,7 @@ ${a}
   address: "blocks.field.address",
   unsubscribeText: "blocks.field.unsubscribeText",
   unsubscribeHref: "blocks.field.unsubscribeLink"
-}, we = {
+}, ve = {
   button: {
     backgroundColor: "blocks.field.backgroundColor",
     color: "blocks.field.textColor",
@@ -909,12 +909,12 @@ ${a}
     color: "blocks.field.inheritGlobalPlaceholder",
     fontFamily: "blocks.field.inheritGlobalPlaceholder"
   }
-}, ve = {
+}, Se = {
   button: "blocks.field.buttonTextPlaceholder",
   hero: "blocks.field.heroPlaceholder",
   html: "blocks.field.htmlPlaceholder",
   text: "blocks.field.textPlaceholder"
-}, Se = {
+}, Ce = {
   button: { text: "blocks.button.defaultText" },
   hero: { content: "blocks.hero.defaultContent" },
   html: { html: "blocks.html.defaultHtml" },
@@ -926,111 +926,125 @@ ${a}
   }
 };
 function B(e, t) {
-  return e.map((o) => Ce(o, t));
+  return e.map((o) => Be(o, t));
 }
-function Ce(e, t) {
-  const o = J(e.type), l = `blocks.${o}.name`, n = t(l);
+function Be(e, t) {
+  const o = q(e.type), l = `blocks.${o}.name`, n = t(l), i = Re(o, e, t);
   return {
     ...e,
     name: n === l ? e.name : n,
-    defaultProps: Be(e, t),
-    schema: e.schema.map((i) => ze(o, i, t)),
+    defaultProps: ze(e, t),
+    schema: e.schema.map((r) => Le(o, r, t)),
+    renderPreview: Te(e, i),
     inlineEditable: e.inlineEditable ? {
       ...e.inlineEditable,
-      placeholder: Me(o, e, t)
+      placeholder: i
     } : void 0
   };
 }
-function Be(e, t) {
-  const o = { ...e.defaultProps }, l = Se[J(e.type)] ?? {};
+function ze(e, t) {
+  const o = { ...e.defaultProps }, l = Ce[q(e.type)] ?? {};
   for (const [n, i] of Object.entries(l))
     o[n] = t(i);
   return o;
 }
-function ze(e, t, o) {
-  var n, i, s, a;
-  const l = ((n = we[e]) == null ? void 0 : n[t.key]) ?? $e[t.key];
+function Le(e, t, o) {
+  var n, i, r, c;
+  const l = ((n = ve[e]) == null ? void 0 : n[t.key]) ?? we[t.key];
   return {
     ...t,
     label: l ? o(l) : t.label,
     placeholder: (i = W[e]) != null && i[t.key] ? o(W[e][t.key]) : t.placeholder,
-    help: (s = N[e]) != null && s[t.key] ? o(N[e][t.key]) : t.help,
-    options: (a = t.options) == null ? void 0 : a.map((r) => ({
-      ...r,
-      label: Le(r, o)
+    help: (r = N[e]) != null && r[t.key] ? o(N[e][t.key]) : t.help,
+    options: (c = t.options) == null ? void 0 : c.map((a) => ({
+      ...a,
+      label: Me(a, o)
     }))
   };
 }
-function Le(e, t) {
+function Me(e, t) {
   return e.value === "left" ? t("common.left") : e.value === "center" ? t("common.center") : e.value === "right" ? t("common.right") : e.value === "top" ? t("blocks.option.top") : e.value === "middle" ? t("blocks.option.middle") : e.value === "bottom" ? t("blocks.option.bottom") : e.value === "" ? t("common.inheritGlobal") : e.label;
 }
-function Me(e, t, o) {
+function Re(e, t, o) {
   var n;
-  const l = ve[e];
+  const l = Se[e];
   return l ? o(l) : (n = t.inlineEditable) == null ? void 0 : n.placeholder;
 }
-function J(e) {
+function Te(e, t) {
+  var n;
+  if (!e.renderPreview || !((n = e.inlineEditable) != null && n.placeholder) || !t)
+    return e.renderPreview;
+  const o = _(e.inlineEditable.placeholder), l = _(t);
+  return (i, r) => e.renderPreview(i, r).replaceAll(
+    `data-placeholder="${o}"`,
+    `data-placeholder="${l}"`
+  );
+}
+function _(e) {
+  return e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+function q(e) {
   return e.startsWith("custom:") ? e.slice(7) : e;
 }
-const q = [
-  ye,
-  re,
+const Y = [
+  $e,
   ae,
-  xe,
-  ie,
-  oe,
+  ce,
+  ke,
+  re,
   le,
-  ke
-], Y = [ce, fe, ne];
+  ne,
+  ye
+], X = [se, xe, ie];
 function M(e = {}) {
-  return e.t ?? te(e).t;
+  return e.t ?? oe(e).t;
 }
-function Re(e = {}) {
-  return B(q, M(e));
-}
-function Te(e = {}) {
+function Pe(e = {}) {
   return B(Y, M(e));
 }
 function Fe(e = {}) {
+  return B(X, M(e));
+}
+function je(e = {}) {
   const t = M(e);
   return [
-    ...B(q, t),
-    ...B(Y, t)
+    ...B(Y, t),
+    ...B(X, t)
   ];
 }
-const Pe = Re(), Ee = Te(), Ae = Fe();
+const Ae = Pe(), He = Fe(), Ie = je();
 export {
-  de as SOCIAL_NETWORK_OPTIONS,
-  Ae as allBlocks,
-  Pe as builtinBlocks,
-  oe as buttonBlock,
-  Fe as createAllBlocks,
-  Re as createBuiltinBlocks,
-  Te as createExampleCustomBlocks,
-  le as dividerBlock,
+  ge as SOCIAL_NETWORK_OPTIONS,
+  Ie as allBlocks,
+  Ae as builtinBlocks,
+  le as buttonBlock,
+  je as createAllBlocks,
+  Pe as createBuiltinBlocks,
+  Fe as createExampleCustomBlocks,
+  ne as dividerBlock,
   p as escAttr,
-  pe as escMjmlText,
-  Ee as exampleCustomBlocks,
-  U as flexJustifyFromAlign,
-  ne as footerBlock,
-  ie as heroBlock,
-  re as htmlBlock,
-  ae as imageBlock,
-  Ce as localizeBlockDefinition,
+  he as escMjmlText,
+  He as exampleCustomBlocks,
+  D as flexJustifyFromAlign,
+  ie as footerBlock,
+  re as heroBlock,
+  ae as htmlBlock,
+  ce as imageBlock,
+  Be as localizeBlockDefinition,
   B as localizeBlockDefinitions,
-  ce as logoBlock,
-  me as mjSocialDefaultIconSrc,
-  _ as mjSocialElementName,
-  D as mjSocialElementsLines,
+  se as logoBlock,
+  ue as mjSocialDefaultIconSrc,
+  O as mjSocialElementName,
+  G as mjSocialElementsLines,
   S as paddingQuad,
-  K as renderSocialIconPreviewHtml,
-  fe as socialBlock,
-  xe as socialGroupBlock,
-  ue as socialIconBorderRadiusCss,
-  V as socialIconBorderRadiusMjml,
+  V as renderSocialIconPreviewHtml,
+  xe as socialBlock,
+  ke as socialGroupBlock,
+  fe as socialIconBorderRadiusCss,
+  U as socialIconBorderRadiusMjml,
   C as socialIconSpacingPx,
-  O as socialMeta,
-  ke as spacerBlock,
-  ye as textBlock
+  K as socialMeta,
+  ye as spacerBlock,
+  $e as textBlock
 };
 //# sourceMappingURL=index.js.map