mail-editor-pancake 0.0.8 → 0.1.0

package/packages/blocks/dist/index.js

@@ -1,4 +1,4 @@
-import { defineBlock as h, blockButtonWidthCss as A, docContentWidthCss as H, mjRawEmailTableWrap as _, mjRawCellTypographyFromStyles as G, normalizeFontWeightStep as k, FONT_WEIGHT_STEP_OPTIONS as L } from "@simple-mail/core";
+import { defineBlock as h, blockButtonWidthCss as F, docContentWidthCss as L, htmlContainsMjmlTags as U, mjRawEmailTableWrap as J, mjRawCellTypographyFromStyles as G, normalizeFontWeightStep as y, FONT_WEIGHT_STEP_OPTIONS as j, isRichHtmlEffectivelyEmpty as q } from "@simple-mail/core";
 const m = {
   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 m = {
   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>'
-}, $ = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;"), q = h({
+}, f = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;"), K = h({
   type: "button",
   name: "按钮",
   category: "content",
@@ -69,22 +69,22 @@ const m = {
     placeholder: "按钮文字"
   },
   toMjml: (e) => {
-    const t = `${e.paddingTop}px ${e.paddingRight}px ${e.paddingBottom}px ${e.paddingLeft}px`, o = `${e.innerPaddingV}px ${e.innerPaddingH}px`, n = A(e.width), i = n ? ` width="${$(n)}"` : "";
-    return `<mj-button href="${$(e.href)}" background-color="${$(
+    const t = `${e.paddingTop}px ${e.paddingRight}px ${e.paddingBottom}px ${e.paddingLeft}px`, o = `${e.innerPaddingV}px ${e.innerPaddingH}px`, n = F(e.width), i = n ? ` width="${f(n)}"` : "";
+    return `<mj-button href="${f(e.href)}" background-color="${f(
       e.backgroundColor
-    )}" color="${$(e.color)}" border-radius="${e.borderRadius}px" font-size="${$(
+    )}" color="${f(e.color)}" border-radius="${e.borderRadius}px" font-size="${f(
       e.fontSize
-    )}" align="${e.align}" padding="${t}" inner-padding="${o}"${i}>${$(
+    )}" align="${e.align}" padding="${t}" inner-padding="${o}"${i}>${f(
       e.text
     )}</mj-button>`;
   },
   renderPreview: (e) => {
-    const t = A(e.width), o = t ? `width:${t};max-width:100%;box-sizing:border-box;` : "";
+    const t = F(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="${$(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}">${$(e.text)}</span></a>
+      <a href="${f(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}">${f(e.text)}</span></a>
     </div>`;
   }
-}), E = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;"), K = h({
+}), A = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;"), D = h({
   type: "divider",
   name: "分隔线",
   category: "content",
@@ -103,11 +103,11 @@ const m = {
     { key: "paddingTop", label: "上边距", type: "number", min: 0, max: 80 },
     { key: "paddingBottom", label: "下边距", type: "number", min: 0, max: 80 }
   ],
-  toMjml: (e) => `<mj-divider border-color="${E(e.color)}" border-width="${e.thickness}px" width="${E(
+  toMjml: (e) => `<mj-divider border-color="${A(e.color)}" border-width="${e.thickness}px" width="${A(
     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>`
-}), b = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;"), J = h({
+}), b = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;"), X = h({
   type: "custom:footer",
   name: "页脚",
   category: "custom",
@@ -136,7 +136,7 @@ const m = {
       ${b(e.address)}<br/>
       <a href="${b(e.unsubscribeHref)}" style="color:${e.textColor};">${b(e.unsubscribeText)}</a>
     </div>`
-}), C = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;"), X = h({
+}), k = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;"), Y = h({
   type: "hero",
   name: "Hero 大图",
   category: "content",
@@ -197,26 +197,26 @@ const m = {
     placeholder: "编写覆盖在图片上的文案…"
   },
   toMjml: (e, t) => {
-    const o = H(t.doc.meta.width), n = `${e.paddingTop}px ${e.paddingRight}px ${e.paddingBottom}px ${e.paddingLeft}px`, i = `${e.height}px`;
+    const o = L(t.doc.meta.width), n = `${e.paddingTop}px ${e.paddingRight}px ${e.paddingBottom}px ${e.paddingLeft}px`, i = `${e.height}px`;
     return `<mj-hero
       mode="fixed-height"
       height="${i}"
       background-width="${o}"
       background-height="${i}"
-      background-url="${C(e.backgroundUrl)}"
-      background-color="${C(e.backgroundColor)}"
+      background-url="${k(e.backgroundUrl)}"
+      background-color="${k(e.backgroundColor)}"
       padding="${n}"
       vertical-align="${e.verticalAlign}"
     >
       <mj-text
         align="${e.textAlign}"
-        color="${C(e.textColor)}"
+        color="${k(e.textColor)}"
         padding="0"
       >${e.content}</mj-text>
     </mj-hero>`;
   },
   renderPreview: (e, t) => {
-    const o = H(t.doc.meta.width), n = e.verticalAlign === "top" ? "flex-start" : e.verticalAlign === "bottom" ? "flex-end" : "center", i = `${e.paddingTop}px ${e.paddingRight}px ${e.paddingBottom}px ${e.paddingLeft}px`, r = C(e.backgroundUrl);
+    const o = L(t.doc.meta.width), n = e.verticalAlign === "top" ? "flex-start" : e.verticalAlign === "bottom" ? "flex-end" : "center", i = `${e.paddingTop}px ${e.paddingRight}px ${e.paddingBottom}px ${e.paddingLeft}px`, c = k(e.backgroundUrl);
     return `<div
       style="
         box-sizing:border-box;
@@ -224,7 +224,7 @@ const m = {
         max-width:${o};
         min-height:${e.height}px;
         margin:0 auto;
-        background-image:linear-gradient(to bottom,rgba(0,0,0,0.25),rgba(0,0,0,0.35)),url(${r});
+        background-image:linear-gradient(to bottom,rgba(0,0,0,0.25),rgba(0,0,0,0.35)),url(${c});
         background-size:cover;
         background-position:center;
         background-color:${e.backgroundColor};
@@ -232,7 +232,7 @@ const m = {
         align-items:${n};
         justify-content:${e.textAlign === "right" ? "flex-end" : e.textAlign === "center" ? "center" : "flex-start"};
         padding:${i};
-        color:${C(e.textColor)};
+        color:${k(e.textColor)};
         overflow:hidden;
         border-radius:2px;
       "
@@ -242,13 +242,13 @@ const m = {
         style="
           width:100%;
           text-align:${e.textAlign};
-          color:${C(e.textColor)};
+          color:${k(e.textColor)};
           text-shadow:0 1px 2px rgba(0,0,0,0.45);
         "
       >${e.content}</div>
     </div>`;
   }
-}), D = h({
+}), Z = h({
   type: "html",
   name: "HTML",
   category: "content",
@@ -265,7 +265,7 @@ const m = {
       key: "html",
       label: "HTML",
       type: "textarea",
-      help: "插入 MJML 的 mj-raw。邮件客户端常会过滤脚本与不支持的标签。"
+      help: "只写 HTML（如 <a>、<table>），不要写 <mj-text> 等 MJML 标签；MJML 标签在 mj-raw 内不会被编译。简单链接建议用「文本」块。"
     },
     { key: "paddingTop", label: "内边距", type: "spacing" }
   ],
@@ -278,10 +278,13 @@ const m = {
   },
   toMjml: (e, t) => {
     const o = `${e.paddingTop}px ${e.paddingRight}px ${e.paddingBottom}px ${e.paddingLeft}px`;
-    return _(o, e.html, G(t.doc.styles));
+    return J(o, e.html, G(t.doc.styles));
   },
-  renderPreview: (e) => `<div class="sm-html-content" style="padding:${`${e.paddingTop}px ${e.paddingRight}px ${e.paddingBottom}px ${e.paddingLeft}px`};min-height:1em;">${e.html}</div>`
-}), M = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;"), Y = h({
+  renderPreview: (e) => {
+    const t = `${e.paddingTop}px ${e.paddingRight}px ${e.paddingBottom}px ${e.paddingLeft}px`, o = U(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;"), Q = h({
   type: "image",
   name: "图片",
   category: "content",
@@ -325,16 +328,16 @@ const m = {
     { key: "paddingTop", label: "内边距", type: "spacing" }
   ],
   toMjml: (e) => {
-    const t = `${e.paddingTop}px ${e.paddingRight}px ${e.paddingBottom}px ${e.paddingLeft}px`, o = e.href ? ` href="${M(e.href)}"` : "", n = ` alt="${M(e.alt || "")}"`, i = e.height != null && e.height > 0 ? ` height="${e.height}px"` : "";
-    return `<mj-image src="${M(e.src)}"${n}${o} width="${e.width}px"${i} align="${e.align}" padding="${t}" />`;
+    const t = `${e.paddingTop}px ${e.paddingRight}px ${e.paddingBottom}px ${e.paddingLeft}px`, o = e.href ? ` href="${w(e.href)}"` : "", n = ` alt="${w(e.alt || "")}"`, i = e.height != null && e.height > 0 ? ` height="${e.height}px"` : "";
+    return `<mj-image src="${w(e.src)}"${n}${o} width="${e.width}px"${i} align="${e.align}" padding="${t}" />`;
   },
   renderPreview: (e) => {
     const t = e.align === "center" ? "margin:0 auto;" : e.align === "right" ? "margin-left:auto;" : "", o = e.height != null && e.height > 0 ? e.height : 0, n = o > 0 ? `width:${e.width}px;height:${o}px;object-fit:cover;object-position:center;` : `width:${e.width}px;height:auto;`;
-    return `<div style="padding:${e.paddingTop}px ${e.paddingRight}px ${e.paddingBottom}px ${e.paddingLeft}px;text-align:${e.align};"><img src="${M(
+    return `<div style="padding:${e.paddingTop}px ${e.paddingRight}px ${e.paddingBottom}px ${e.paddingLeft}px;text-align:${e.align};"><img src="${w(
       e.src
-    )}" alt="${M(e.alt)}" style="display:block;${t}max-width:100%;${n}border:0;outline:none;" /></div>`;
+    )}" alt="${w(e.alt)}" style="display:block;${t}max-width:100%;${n}border:0;outline:none;" /></div>`;
   }
-}), R = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;"), Z = h({
+}), M = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;"), ee = h({
   type: "custom:logo",
   name: "公司 Logo",
   category: "custom",
@@ -361,25 +364,25 @@ const m = {
       ]
     }
   ],
-  toMjml: (e) => `<mj-image src="${R(e.src)}" href="${R(e.href)}" width="${e.width}px" align="${e.align}" alt="logo" padding="8px 0px 8px 0px" />`,
+  toMjml: (e) => `<mj-image src="${M(e.src)}" href="${M(e.href)}" width="${e.width}px" align="${e.align}" alt="logo" padding="8px 0px 8px 0px" />`,
   renderPreview: (e) => {
     const t = e.align === "center" ? "margin:0 auto;" : e.align === "right" ? "margin-left:auto;" : "";
-    return `<div style="padding:8px 0;text-align:${e.align};"><img src="${R(
+    return `<div style="padding:8px 0;text-align:${e.align};"><img src="${M(
       e.src
     )}" alt="logo" style="display:block;${t}width:${e.width}px;max-width:100%;height:auto;" /></div>`;
   }
 });
-function Q(e) {
+function E(e) {
   const t = e.trim();
   return t === "ig" ? "instagram" : t === "rabbit" || t === "tiktok" || t === "reddit" ? "web" : t;
 }
-const ee = [
+const te = [
   { label: "X", value: "x" },
   { label: "Rabbit", value: "rabbit" },
   { label: "Facebook", value: "facebook" },
   { label: "TikTok", value: "tiktok" },
   { label: "Instagram", value: "ig" }
-], te = [
+], oe = [
   { label: "微信", value: "wechat" },
   { label: "微博", value: "weibo" },
   { label: "X", value: "x" },
@@ -390,7 +393,7 @@ const ee = [
   { label: "YouTube", value: "youtube" },
   { label: "Reddit", value: "reddit" },
   { label: "网页", value: "web" }
-], oe = {
+], ne = {
   wechat: { color: "#1AAD19", preview: "信" },
   weibo: { color: "#E6162D", preview: "微" },
   x: { color: "#000000", preview: "X" },
@@ -405,74 +408,103 @@ const ee = [
   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;"), ne = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-function P(e) {
-  return oe[e] ?? { color: "#6b7280", preview: "·" };
+}, p = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;"), ie = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+function N(e) {
+  return ne[e] ?? { color: "#6b7280", preview: "·" };
+}
+const le = "https://www.mailjet.com/images/theme/v1/icons/ico-social/", re = {
+  facebook: "facebook.png",
+  twitter: "twitter.png",
+  x: "twitter-x.png",
+  google: "google-plus.png",
+  pinterest: "pinterest.png",
+  linkedin: "linkedin.png",
+  instagram: "instagram.png",
+  web: "web.png",
+  snapchat: "snapchat.png",
+  youtube: "youtube.png",
+  tumblr: "tumblr.png",
+  github: "github.png",
+  xing: "xing.png",
+  vimeo: "vimeo.png",
+  medium: "medium.png",
+  soundcloud: "soundcloud.png",
+  dribbble: "dribbble.png"
+};
+function ae(e) {
+  const t = re[E(e)];
+  return t ? `${le}${t}` : null;
+}
+function W(e) {
+  const { network: t, iconSize: o, iconBorderRadius: n, iconSrc: i, backgroundColor: c } = e, d = ce(o, n), s = N(t), l = (c == null ? void 0 : c.trim()) || s.color, a = (i == null ? void 0 : i.trim()) || ae(t);
+  return a ? `<span style="display:inline-flex;width:${o}px;height:${o}px;border-radius:${d};background:${l};overflow:hidden;align-items:center;justify-content:center;flex-shrink:0;line-height:0;"><img src="${p(a)}" alt="" width="${o}" height="${o}" style="display:block;width:${o}px;height:${o}px;border-radius:${d};" /></span>` : `<span style="display:inline-flex;width:${o}px;height:${o}px;border-radius:${d};background:${l};color:#fff;align-items:center;justify-content:center;font-size:${Math.round(
+    o / 2
+  )}px;font-weight:600;flex-shrink:0;overflow:hidden;">${s.preview}</span>`;
 }
-function T(e) {
+function S(e) {
   return `${e.paddingTop}px ${e.paddingRight}px ${e.paddingBottom}px ${e.paddingLeft}px`;
 }
-function N(e, t) {
+function I(e, t) {
   const o = Math.max(1, Number(e) || 28), n = Number(t);
   if (!Number.isFinite(n) || n <= 0) return "0px";
   const i = o / 2;
   return n >= 999 || n >= i ? "999px" : `${Math.min(n, o)}px`;
 }
-function V(e, t) {
+function ce(e, t) {
   const o = Math.max(1, Number(e) || 28), n = Number(t);
   if (!Number.isFinite(n) || n <= 0) return "0";
   const i = o / 2;
   return n >= 999 || n >= i ? "50%" : `${Math.min(n, o)}px`;
 }
-function F(e, t = 10) {
+function C(e, t = 10) {
   const o = Number(e);
   return !Number.isFinite(o) || o < 0 ? t : Math.min(64, Math.round(o));
 }
-function I(e) {
+function O(e) {
   return e === "right" ? "flex-end" : e === "left" ? "flex-start" : "center";
 }
-function O(e, t) {
-  var a;
-  const o = t.labelFontSize > 0 ? t.labelFontSize : 13, n = Math.max(8, Math.min(48, o)), i = k(t.labelFontWeight), r = ((a = t.labelColor) == null ? void 0 : a.trim()) || "#333333", d = p(i);
+function _(e, t) {
+  var s;
+  const o = t.labelFontSize > 0 ? t.labelFontSize : 13, n = Math.max(8, Math.min(48, o)), i = y(t.labelFontWeight), c = ((s = t.labelColor) == null ? void 0 : s.trim()) || "#333333", d = p(i);
   return e.map((l) => {
-    var v, S, y;
-    const c = P(l.network), u = ((v = l.backgroundColor) == null ? void 0 : v.trim()) || c.color, g = [
-      `name="${p(Q(l.network))}"`,
+    var T, z, R;
+    const a = N(l.network), r = ((T = l.backgroundColor) == null ? void 0 : T.trim()) || a.color, u = [
+      `name="${p(E(l.network))}"`,
       `href="${p(l.href)}"`,
-      `background-color="${p(u)}"`,
-      `color="${p(r)}"`,
+      `background-color="${p(r)}"`,
+      `color="${p(c)}"`,
       `font-size="${n}px"`,
       `font-weight="${d}"`
-    ].join(" "), w = (S = l.iconSrc) == null ? void 0 : S.trim(), x = w ? `${g} src="${p(w)}"` : g, f = ((y = l.label) == null ? void 0 : y.trim()) ?? "";
-    return f ? `  <mj-social-element ${x}>
-    ${ne(f)}
+    ].join(" "), $ = (z = l.iconSrc) == null ? void 0 : z.trim(), x = $ ? `${u} src="${p($)}"` : u, B = ((R = l.label) == null ? void 0 : R.trim()) ?? "";
+    return B ? `  <mj-social-element ${x}>
+    ${ie(B)}
   </mj-social-element>` : `  <mj-social-element ${x} />`;
   }).join(`
 `);
 }
-const U = [
+const V = [
   { network: "x", href: "https://x.com/" },
   { network: "rabbit", href: "https://example.com" },
   { network: "facebook", href: "https://facebook.com/" },
   { network: "tiktok", href: "https://www.tiktok.com/" },
   { network: "ig", href: "https://instagram.com/" }
 ];
-function W(e) {
+function P(e) {
   var o;
   if ((o = e.elements) != null && o.length) return e.elements;
   const t = e.links;
   return Array.isArray(t) && t.length ? t.map((n) => ({
     network: String(n.network ?? "web"),
     href: String(n.href ?? "")
-  })) : U;
+  })) : V;
 }
-const ie = h({
+const se = h({
   type: "custom:social",
   name: "社交链接",
   category: "custom",
   icon: m.social,
   defaultProps: {
-    elements: U,
+    elements: V,
     align: "center",
     iconSize: 28,
     iconBorderRadius: 999,
@@ -490,7 +522,7 @@ const ie = h({
       key: "elements",
       label: "社交链接",
       type: "socialLinkList",
-      options: ee,
+      options: te,
       help: "平台：X、Rabbit、Facebook、TikTok、Instagram (ig)。可填标签、自定义图标 URL。MJML 侧 Rabbit/TikTok 使用 web 占位图标，需要品牌图时请填「图标 URL」。"
     },
     {
@@ -506,7 +538,7 @@ const ie = h({
       label: "标签字重",
       type: "select",
       selectVariant: "segmented",
-      options: [...L]
+      options: [...j]
     },
     { key: "labelColor", label: "标签颜色", type: "color" },
     {
@@ -542,37 +574,41 @@ const ie = h({
     { key: "paddingTop", label: "外边距", type: "spacing" }
   ],
   toMjml: (e) => {
-    const t = T(e), o = N(e.iconSize, e.iconBorderRadius ?? 999), n = F(e.iconSpacing, 10), i = `align="${e.align}" icon-size="${e.iconSize}px" mode="horizontal" border-radius="${o}" inner-padding="${n}px" padding="${t}"`, r = W(e).filter((l) => {
-      var c;
-      return (c = l.href) == null ? void 0 : c.trim();
+    const t = S(e), o = I(e.iconSize, e.iconBorderRadius ?? 999), n = C(e.iconSpacing, 10), i = `align="${e.align}" icon-size="${e.iconSize}px" mode="horizontal" border-radius="${o}" inner-padding="${n}px" padding="${t}"`, c = P(e).filter((l) => {
+      var a;
+      return (a = l.href) == null ? void 0 : a.trim();
     }), d = {
       labelFontSize: Number(e.labelFontSize ?? 13),
-      labelFontWeight: k(String(e.labelFontWeight ?? "400")),
+      labelFontWeight: y(String(e.labelFontWeight ?? "400")),
       labelColor: String(e.labelColor ?? "#333333")
-    }, a = O(r, d);
-    return a.trim() ? `<mj-social ${i}>
-${a}
+    }, s = _(c, d);
+    return s.trim() ? `<mj-social ${i}>
+${s}
 </mj-social>` : `<mj-social ${i}></mj-social>`;
   },
   renderPreview: (e) => {
-    var u;
-    const t = e.labelFontSize != null && e.labelFontSize > 0 ? e.labelFontSize : 13, o = Math.max(8, Math.min(48, t)), n = k(e.labelFontWeight), i = ((u = e.labelColor) == null ? void 0 : u.trim()) || "#333333", r = V(e.iconSize, e.iconBorderRadius ?? 999), d = F(e.iconSpacing, 10), a = I(e.align), l = W(e).filter((s) => {
+    var a;
+    const t = e.labelFontSize != null && e.labelFontSize > 0 ? e.labelFontSize : 13, o = Math.max(8, Math.min(48, t)), n = y(e.labelFontWeight), i = ((a = e.labelColor) == null ? void 0 : a.trim()) || "#333333", c = C(e.iconSpacing, 10), d = O(e.align), s = P(e).filter((r) => {
       var g;
-      return (g = s.href) == null ? void 0 : g.trim();
-    }).map((s) => {
-      var y, z, j;
-      const g = P(s.network), w = ((y = s.backgroundColor) == null ? void 0 : y.trim()) || g.color, x = ((z = s.label) == null ? void 0 : z.trim()) ?? "", f = (j = s.iconSrc) == null ? void 0 : j.trim(), v = f ? `<img src="${p(f)}" alt="" style="width:${e.iconSize}px;height:${e.iconSize}px;object-fit:cover;border-radius:${r};flex-shrink:0;" />` : `<span style="display:inline-flex;width:${e.iconSize}px;height:${e.iconSize}px;border-radius:${r};background:${w};color:#fff;align-items:center;justify-content:center;font-size:${Math.round(
-        e.iconSize / 2
-      )}px;font-weight:600;flex-shrink:0;overflow:hidden;">${g.preview}</span>`, S = x ? `<span style="font-size:${o}px !important;font-weight:${n};color:${p(
+      return (g = r.href) == null ? void 0 : g.trim();
+    }).map((r) => {
+      var x;
+      const g = ((x = r.label) == null ? void 0 : x.trim()) ?? "", u = W({
+        network: r.network,
+        iconSize: e.iconSize,
+        iconBorderRadius: e.iconBorderRadius ?? 999,
+        iconSrc: r.iconSrc,
+        backgroundColor: r.backgroundColor
+      }), $ = g ? `<span style="font-size:${o}px !important;font-weight:${n};color:${p(
         i
-      )} !important;line-height:1.2;">${p(x)}</span>` : "";
+      )} !important;line-height:1.2;">${p(g)}</span>` : "";
       return `<span style="display:inline-flex;align-items:center;gap:6px;"><a href="${p(
-        s.href
-      )}" style="display:inline-flex;align-items:center;text-decoration:none;line-height:0;">${v}</a>${S}</span>`;
-    }).join(""), c = T(e);
-    return `<div style="display:flex;flex-wrap:wrap;justify-content:${a};align-items:center;gap:${d}px;padding:${c};">${l || '<span style="color:#9ca3af;font-size:12px;">请填写链接 URL</span>'}</div>`;
+        r.href
+      )}" style="display:inline-flex;align-items:center;text-decoration:none;line-height:0;">${u}</a>${$}</span>`;
+    }).join(""), l = S(e);
+    return `<div style="display:flex;flex-wrap:wrap;justify-content:${d};align-items:center;gap:${c}px;padding:${l};">${s || '<span style="color:#9ca3af;font-size:12px;">请填写链接 URL</span>'}</div>`;
   }
-}), le = h({
+}), de = h({
   type: "social-group",
   name: "社交组",
   category: "content",
@@ -599,7 +635,7 @@ ${a}
       key: "elements",
       label: "社交链接",
       type: "socialLinkList",
-      options: te,
+      options: oe,
       help: "每行：平台、链接、可选标签文字、自定义图标 URL、图标背景色。标签的字号/字重/颜色在下方统一设置。"
     },
     {
@@ -615,7 +651,7 @@ ${a}
       label: "标签字重",
       type: "select",
       selectVariant: "segmented",
-      options: [...L]
+      options: [...j]
     },
     { key: "labelColor", label: "标签颜色", type: "color" },
     {
@@ -651,37 +687,41 @@ ${a}
     { key: "paddingTop", label: "外边距", type: "spacing" }
   ],
   toMjml: (e) => {
-    const t = T(e), o = N(e.iconSize, e.iconBorderRadius ?? 999), n = F(e.iconSpacing, 10), i = `align="${e.align}" icon-size="${e.iconSize}px" mode="horizontal" border-radius="${o}" inner-padding="${n}px" padding="${t}"`, r = e.elements.filter((l) => {
-      var c;
-      return (c = l.href) == null ? void 0 : c.trim();
+    const t = S(e), o = I(e.iconSize, e.iconBorderRadius ?? 999), n = C(e.iconSpacing, 10), i = `align="${e.align}" icon-size="${e.iconSize}px" mode="horizontal" border-radius="${o}" inner-padding="${n}px" padding="${t}"`, c = e.elements.filter((l) => {
+      var a;
+      return (a = l.href) == null ? void 0 : a.trim();
     }), d = {
       labelFontSize: Number(e.labelFontSize ?? 13),
-      labelFontWeight: k(String(e.labelFontWeight ?? "400")),
+      labelFontWeight: y(String(e.labelFontWeight ?? "400")),
       labelColor: String(e.labelColor ?? "#333333")
-    }, a = O(r, d);
-    return a.trim() ? `<mj-social ${i}>
-${a}
+    }, s = _(c, d);
+    return s.trim() ? `<mj-social ${i}>
+${s}
 </mj-social>` : `<mj-social ${i}></mj-social>`;
   },
   renderPreview: (e) => {
-    var u;
-    const t = e.labelFontSize != null && e.labelFontSize > 0 ? e.labelFontSize : 13, o = Math.max(8, Math.min(48, t)), n = k(e.labelFontWeight), i = ((u = e.labelColor) == null ? void 0 : u.trim()) || "#333333", r = V(e.iconSize, e.iconBorderRadius ?? 999), d = F(e.iconSpacing, 10), a = I(e.align), l = e.elements.filter((s) => {
+    var a;
+    const t = e.labelFontSize != null && e.labelFontSize > 0 ? e.labelFontSize : 13, o = Math.max(8, Math.min(48, t)), n = y(e.labelFontWeight), i = ((a = e.labelColor) == null ? void 0 : a.trim()) || "#333333", c = C(e.iconSpacing, 10), d = O(e.align), s = e.elements.filter((r) => {
       var g;
-      return (g = s.href) == null ? void 0 : g.trim();
-    }).map((s) => {
-      var y, z, j;
-      const g = P(s.network), w = ((y = s.backgroundColor) == null ? void 0 : y.trim()) || g.color, x = ((z = s.label) == null ? void 0 : z.trim()) ?? "", f = (j = s.iconSrc) == null ? void 0 : j.trim(), v = f ? `<img src="${p(f)}" alt="" style="width:${e.iconSize}px;height:${e.iconSize}px;object-fit:cover;border-radius:${r};flex-shrink:0;" />` : `<span style="display:inline-flex;width:${e.iconSize}px;height:${e.iconSize}px;border-radius:${r};background:${w};color:#fff;align-items:center;justify-content:center;font-size:${Math.round(
-        e.iconSize / 2
-      )}px;font-weight:600;flex-shrink:0;overflow:hidden;">${g.preview}</span>`, S = x ? `<span style="font-size:${o}px !important;font-weight:${n};color:${p(
+      return (g = r.href) == null ? void 0 : g.trim();
+    }).map((r) => {
+      var x;
+      const g = ((x = r.label) == null ? void 0 : x.trim()) ?? "", u = W({
+        network: r.network,
+        iconSize: e.iconSize,
+        iconBorderRadius: e.iconBorderRadius ?? 999,
+        iconSrc: r.iconSrc,
+        backgroundColor: r.backgroundColor
+      }), $ = g ? `<span style="font-size:${o}px !important;font-weight:${n};color:${p(
         i
-      )} !important;line-height:1.2;">${p(x)}</span>` : "";
+      )} !important;line-height:1.2;">${p(g)}</span>` : "";
       return `<span style="display:inline-flex;align-items:center;gap:6px;"><a href="${p(
-        s.href
-      )}" style="display:inline-flex;align-items:center;text-decoration:none;line-height:0;">${v}</a>${S}</span>`;
-    }).join(""), c = T(e);
-    return `<div style="display:flex;flex-wrap:wrap;justify-content:${a};align-items:center;gap:${d}px;padding:${c};">${l || '<span style="color:#9ca3af;font-size:12px;">请添加社交链接</span>'}</div>`;
+        r.href
+      )}" style="display:inline-flex;align-items:center;text-decoration:none;line-height:0;">${u}</a>${$}</span>`;
+    }).join(""), l = S(e);
+    return `<div style="display:flex;flex-wrap:wrap;justify-content:${d};align-items:center;gap:${c}px;padding:${l};">${s || '<span style="color:#9ca3af;font-size:12px;">请添加社交链接</span>'}</div>`;
   }
-}), re = h({
+}), ge = h({
   type: "spacer",
   name: "间距",
   category: "content",
@@ -690,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>`
-}), B = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;"), ae = h({
+}), v = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;"), H = "输入文本…", pe = h({
   type: "text",
   name: "文本",
   category: "content",
@@ -729,7 +769,7 @@ ${a}
       type: "select",
       selectVariant: "segmented",
       inheritGlobal: !0,
-      options: [...L]
+      options: [...j]
     },
     {
       key: "lineHeight",
@@ -764,51 +804,53 @@ ${a}
     mode: "rich",
     multiline: !0,
     propKey: "content",
-    placeholder: "输入文本…"
+    placeholder: H
   },
   toMjml: (e) => {
-    const t = `${e.paddingTop}px ${e.paddingRight}px ${e.paddingBottom}px ${e.paddingLeft}px`, o = e.fontFamily ? ` font-family="${B(e.fontFamily)}"` : "", n = String(e.fontWeight ?? "").trim(), i = n ? ` font-weight="${B(k(n))}"` : "", r = String(e.lineHeight ?? "").trim(), d = r ? ` line-height="${B(r)}"` : "", a = String(e.color ?? "").trim(), l = a ? ` color="${B(a)}"` : "", c = String(e.fontSize ?? "").trim(), u = c ? ` font-size="${B(c)}"` : "";
-    return `<mj-text align="${e.align}"${l}${u}${d}${o}${i} 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)}"` : "", n = String(e.fontWeight ?? "").trim(), i = n ? ` font-weight="${v(y(n))}"` : "", c = String(e.lineHeight ?? "").trim(), d = c ? ` line-height="${v(c)}"` : "", s = String(e.color ?? "").trim(), l = s ? ` color="${v(s)}"` : "", a = String(e.fontSize ?? "").trim(), r = a ? ` font-size="${v(a)}"` : "";
+    return `<mj-text align="${e.align}"${l}${r}${d}${o}${i} padding="${t}">${e.content}</mj-text>`;
   },
   renderPreview: (e) => {
-    const t = e.fontFamily ? `font-family:${e.fontFamily};` : "", o = String(e.fontWeight ?? "").trim(), n = o ? `font-weight:${k(o)};` : "", i = String(e.lineHeight ?? "").trim(), r = i ? `line-height:${i};` : "line-height:normal;", d = String(e.color ?? "").trim(), a = d ? `color:${d};` : "", l = String(e.fontSize ?? "").trim(), c = l ? `font-size:${l};` : "";
-    return `<div class="sm-text-content" style="text-align:${e.align};${a}${c}${n}${r}${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(), n = o ? `font-weight:${y(o)};` : "", i = String(e.lineHeight ?? "").trim(), c = i ? `line-height:${i};` : "line-height:normal;", d = String(e.color ?? "").trim(), s = d ? `color:${d};` : "", l = String(e.fontSize ?? "").trim(), a = l ? `font-size:${l};` : "", r = q(e.content), g = r ? " is-empty" : "", u = r ? ` data-placeholder="${H}"` : "";
+    return `<div class="sm-text-content${g}"${u} style="text-align:${e.align};${s}${a}${n}${c}${t}padding:${e.paddingTop}px ${e.paddingRight}px ${e.paddingBottom}px ${e.paddingLeft}px;">${e.content}</div>`;
   }
-}), ce = [
-  ae,
-  D,
+}), he = [
+  pe,
+  Z,
+  Q,
+  de,
   Y,
-  le,
-  X,
-  q,
   K,
-  re
-], se = [Z, ie, J], ge = [...ce, ...se];
+  D,
+  ge
+], me = [ee, se, X], ue = [...he, ...me];
 export {
-  te as SOCIAL_NETWORK_OPTIONS,
-  ge as allBlocks,
-  ce as builtinBlocks,
-  q as buttonBlock,
-  K as dividerBlock,
+  oe as SOCIAL_NETWORK_OPTIONS,
+  ue as allBlocks,
+  he as builtinBlocks,
+  K as buttonBlock,
+  D as dividerBlock,
   p as escAttr,
-  ne as escMjmlText,
-  se as exampleCustomBlocks,
-  I as flexJustifyFromAlign,
-  J as footerBlock,
-  X as heroBlock,
-  D as htmlBlock,
-  Y as imageBlock,
-  Z as logoBlock,
-  Q as mjSocialElementName,
-  O as mjSocialElementsLines,
-  T as paddingQuad,
-  ie as socialBlock,
-  le as socialGroupBlock,
-  V as socialIconBorderRadiusCss,
-  N as socialIconBorderRadiusMjml,
-  F as socialIconSpacingPx,
-  P as socialMeta,
-  re as spacerBlock,
-  ae as textBlock
+  ie as escMjmlText,
+  me as exampleCustomBlocks,
+  O as flexJustifyFromAlign,
+  X as footerBlock,
+  Y as heroBlock,
+  Z as htmlBlock,
+  Q as imageBlock,
+  ee as logoBlock,
+  ae as mjSocialDefaultIconSrc,
+  E as mjSocialElementName,
+  _ as mjSocialElementsLines,
+  S as paddingQuad,
+  W as renderSocialIconPreviewHtml,
+  se as socialBlock,
+  de as socialGroupBlock,
+  ce as socialIconBorderRadiusCss,
+  I as socialIconBorderRadiusMjml,
+  C as socialIconSpacingPx,
+  N as socialMeta,
+  ge as spacerBlock,
+  pe as textBlock
 };
 //# sourceMappingURL=index.js.map