mail-editor-pancake 0.0.7 → 0.0.9

package/packages/blocks/dist/index.js

@@ -1,4 +1,4 @@
-import { defineBlock as h, blockButtonWidthCss as A, docContentWidthCss as H, mjRawEmailTableWrap as _, mjRawCellTypographyFromStyles as q, normalizeFontWeightStep as k, FONT_WEIGHT_STEP_OPTIONS as L } from "@simple-mail/core";
+import { defineBlock as h, blockButtonWidthCss as F, docContentWidthCss as L, mjRawEmailTableWrap as V, mjRawCellTypographyFromStyles as U, normalizeFontWeightStep as f, FONT_WEIGHT_STEP_OPTIONS as M } 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>'
-}, y = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;"), G = h({
+}, x = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;"), G = 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="${y(n)}"` : "";
-    return `<mj-button href="${y(e.href)}" background-color="${y(
+    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="${x(n)}"` : "";
+    return `<mj-button href="${x(e.href)}" background-color="${x(
       e.backgroundColor
-    )}" color="${y(e.color)}" border-radius="${e.borderRadius}px" font-size="${y(
+    )}" color="${x(e.color)}" border-radius="${e.borderRadius}px" font-size="${x(
       e.fontSize
-    )}" align="${e.align}" padding="${t}" inner-padding="${o}"${i}>${y(
+    )}" align="${e.align}" padding="${t}" inner-padding="${o}"${i}>${x(
       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="${y(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}">${y(e.text)}</span></a>
+      <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>`;
   }
-}), E = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;"), K = h({
+}), P = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;"), q = h({
   type: "divider",
   name: "分隔线",
   category: "content",
@@ -103,7 +103,7 @@ 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="${P(e.color)}" border-width="${e.thickness}px" width="${P(
     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>`
@@ -136,7 +136,7 @@ const m = {
       ${b(e.address)}<br/>
       <a href="${b(e.unsubscribeHref)}" style="color:${e.textColor};">${b(e.unsubscribeText)}</a>
     </div>`
-}), z = (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;"), K = 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="${z(e.backgroundUrl)}"
-      background-color="${z(e.backgroundColor)}"
+      background-url="${k(e.backgroundUrl)}"
+      background-color="${k(e.backgroundColor)}"
       padding="${n}"
       vertical-align="${e.verticalAlign}"
     >
       <mj-text
         align="${e.textAlign}"
-        color="${z(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`, l = z(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`, a = 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(${l});
+        background-image:linear-gradient(to bottom,rgba(0,0,0,0.25),rgba(0,0,0,0.35)),url(${a});
         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:${z(e.textColor)};
+        color:${k(e.textColor)};
         overflow:hidden;
         border-radius:2px;
       "
@@ -242,7 +242,7 @@ const m = {
         style="
           width:100%;
           text-align:${e.textAlign};
-          color:${z(e.textColor)};
+          color:${k(e.textColor)};
           text-shadow:0 1px 2px rgba(0,0,0,0.45);
         "
       >${e.content}</div>
@@ -278,10 +278,10 @@ const m = {
   },
   toMjml: (e, t) => {
     const o = `${e.paddingTop}px ${e.paddingRight}px ${e.paddingBottom}px ${e.paddingLeft}px`;
-    return _(o, e.html, q(t.doc.styles));
+    return V(o, e.html, U(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({
+}), w = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;"), X = h({
   type: "image",
   name: "图片",
   category: "content",
@@ -325,16 +325,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({
+}), B = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;"), Y = h({
   type: "custom:logo",
   name: "公司 Logo",
   category: "custom",
@@ -361,25 +361,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="${B(e.src)}" href="${B(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="${B(
       e.src
     )}" alt="logo" style="display:block;${t}width:${e.width}px;max-width:100%;height:auto;" /></div>`;
   }
 });
-function Q(e) {
+function H(e) {
   const t = e.trim();
   return t === "ig" ? "instagram" : t === "rabbit" || t === "tiktok" || t === "reddit" ? "web" : t;
 }
-const ee = [
+const Z = [
   { label: "X", value: "x" },
   { label: "Rabbit", value: "rabbit" },
   { label: "Facebook", value: "facebook" },
   { label: "TikTok", value: "tiktok" },
   { label: "Instagram", value: "ig" }
-], te = [
+], Q = [
   { label: "微信", value: "wechat" },
   { label: "微博", value: "weibo" },
   { label: "X", value: "x" },
@@ -390,7 +390,7 @@ const ee = [
   { label: "YouTube", value: "youtube" },
   { label: "Reddit", value: "reddit" },
   { label: "网页", value: "web" }
-], oe = {
+], ee = {
   wechat: { color: "#1AAD19", preview: "信" },
   weibo: { color: "#E6162D", preview: "微" },
   x: { color: "#000000", preview: "X" },
@@ -405,11 +405,40 @@ const ee = [
   rabbit: { color: "#FF2442", preview: "R" },
   website: { color: "#6b7280", preview: "◇" },
   web: { color: "#6b7280", preview: "◇" }
-}, s = (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: "·" };
+}, g = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;"), te = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+function E(e) {
+  return ee[e] ?? { color: "#6b7280", preview: "·" };
 }
-function T(e) {
+const oe = "https://www.mailjet.com/images/theme/v1/icons/ico-social/", ne = {
+  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 ie(e) {
+  const t = ne[H(e)];
+  return t ? `${oe}${t}` : null;
+}
+function N(e) {
+  const { network: t, iconSize: o, iconBorderRadius: n, iconSrc: i, backgroundColor: a } = e, d = le(o, n), c = E(t), l = (a == null ? void 0 : a.trim()) || c.color, r = (i == null ? void 0 : i.trim()) || ie(t);
+  return r ? `<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="${g(r)}" 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;">${c.preview}</span>`;
+}
+function S(e) {
   return `${e.paddingTop}px ${e.paddingRight}px ${e.paddingBottom}px ${e.paddingLeft}px`;
 }
 function W(e, t) {
@@ -418,13 +447,13 @@ function W(e, t) {
   const i = o / 2;
   return n >= 999 || n >= i ? "999px" : `${Math.min(n, o)}px`;
 }
-function V(e, t) {
+function le(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));
 }
@@ -432,47 +461,47 @@ function I(e) {
   return e === "right" ? "flex-end" : e === "left" ? "flex-start" : "center";
 }
 function O(e, t) {
-  var d;
-  const o = t.labelFontSize > 0 ? t.labelFontSize : 13, n = Math.max(8, Math.min(48, o)), i = k(t.labelFontWeight), l = ((d = t.labelColor) == null ? void 0 : d.trim()) || "#333333", g = s(i);
-  return e.map((a) => {
-    var v, S, f;
-    const p = P(a.network), $ = ((v = a.backgroundColor) == null ? void 0 : v.trim()) || p.color, c = [
-      `name="${s(Q(a.network))}"`,
-      `href="${s(a.href)}"`,
-      `background-color="${s($)}"`,
-      `color="${s(l)}"`,
+  var c;
+  const o = t.labelFontSize > 0 ? t.labelFontSize : 13, n = Math.max(8, Math.min(48, o)), i = f(t.labelFontWeight), a = ((c = t.labelColor) == null ? void 0 : c.trim()) || "#333333", d = g(i);
+  return e.map((l) => {
+    var j, T, R;
+    const r = E(l.network), s = ((j = l.backgroundColor) == null ? void 0 : j.trim()) || r.color, y = [
+      `name="${g(H(l.network))}"`,
+      `href="${g(l.href)}"`,
+      `background-color="${g(s)}"`,
+      `color="${g(a)}"`,
       `font-size="${n}px"`,
-      `font-weight="${g}"`
-    ].join(" "), w = (S = a.iconSrc) == null ? void 0 : S.trim(), u = w ? `${c} src="${s(w)}"` : c, x = ((f = a.label) == null ? void 0 : f.trim()) ?? "";
-    return x ? `  <mj-social-element ${u}>
-    ${ne(x)}
+      `font-weight="${d}"`
+    ].join(" "), $ = (T = l.iconSrc) == null ? void 0 : T.trim(), u = $ ? `${y} src="${g($)}"` : y, z = ((R = l.label) == null ? void 0 : R.trim()) ?? "";
+    return z ? `  <mj-social-element ${u}>
+    ${te(z)}
   </mj-social-element>` : `  <mj-social-element ${u} />`;
   }).join(`
 `);
 }
-const U = [
+const _ = [
   { 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 N(e) {
+function A(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;
+  })) : _;
 }
-const ie = h({
+const re = h({
   type: "custom:social",
   name: "社交链接",
   category: "custom",
   icon: m.social,
   defaultProps: {
-    elements: U,
+    elements: _,
     align: "center",
     iconSize: 28,
     iconBorderRadius: 999,
@@ -490,7 +519,7 @@ const ie = h({
       key: "elements",
       label: "社交链接",
       type: "socialLinkList",
-      options: ee,
+      options: Z,
       help: "平台：X、Rabbit、Facebook、TikTok、Instagram (ig)。可填标签、自定义图标 URL。MJML 侧 Rabbit/TikTok 使用 web 占位图标，需要品牌图时请填「图标 URL」。"
     },
     {
@@ -506,7 +535,7 @@ const ie = h({
       label: "标签字重",
       type: "select",
       selectVariant: "segmented",
-      options: [...L]
+      options: [...M]
     },
     { key: "labelColor", label: "标签颜色", type: "color" },
     {
@@ -542,37 +571,41 @@ const ie = h({
     { key: "paddingTop", label: "外边距", type: "spacing" }
   ],
   toMjml: (e) => {
-    const t = T(e), o = W(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}"`, l = N(e).filter((a) => {
-      var p;
-      return (p = a.href) == null ? void 0 : p.trim();
-    }), g = {
+    const t = S(e), o = W(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}"`, a = A(e).filter((l) => {
+      var r;
+      return (r = l.href) == null ? void 0 : r.trim();
+    }), d = {
       labelFontSize: Number(e.labelFontSize ?? 13),
-      labelFontWeight: k(String(e.labelFontWeight ?? "400")),
+      labelFontWeight: f(String(e.labelFontWeight ?? "400")),
       labelColor: String(e.labelColor ?? "#333333")
-    }, d = O(l, g);
-    return d.trim() ? `<mj-social ${i}>
-${d}
+    }, c = O(a, d);
+    return c.trim() ? `<mj-social ${i}>
+${c}
 </mj-social>` : `<mj-social ${i}></mj-social>`;
   },
   renderPreview: (e) => {
-    var $;
-    const t = e.labelFontSize != null && e.labelFontSize > 0 ? e.labelFontSize : 13, o = Math.max(8, Math.min(48, t)), n = k(e.labelFontWeight), i = (($ = e.labelColor) == null ? void 0 : $.trim()) || "#333333", l = V(e.iconSize, e.iconBorderRadius ?? 999), g = F(e.iconSpacing, 10), d = I(e.align), a = N(e).filter((r) => {
-      var c;
-      return (c = r.href) == null ? void 0 : c.trim();
-    }).map((r) => {
-      var f, C, j;
-      const c = P(r.network), w = ((f = r.backgroundColor) == null ? void 0 : f.trim()) || c.color, u = ((C = r.label) == null ? void 0 : C.trim()) ?? "", x = (j = r.iconSrc) == null ? void 0 : j.trim(), v = x ? `<img src="${s(x)}" alt="" style="width:${e.iconSize}px;height:${e.iconSize}px;object-fit:cover;border-radius:${l};flex-shrink:0;" />` : `<span style="display:inline-flex;width:${e.iconSize}px;height:${e.iconSize}px;border-radius:${l};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;">${c.preview}</span>`, S = u ? `<span style="font-size:${o}px !important;font-weight:${n};color:${s(
+    var r;
+    const t = e.labelFontSize != null && e.labelFontSize > 0 ? e.labelFontSize : 13, o = Math.max(8, Math.min(48, t)), n = f(e.labelFontWeight), i = ((r = e.labelColor) == null ? void 0 : r.trim()) || "#333333", a = C(e.iconSpacing, 10), d = I(e.align), c = A(e).filter((s) => {
+      var p;
+      return (p = s.href) == null ? void 0 : p.trim();
+    }).map((s) => {
+      var u;
+      const p = ((u = s.label) == null ? void 0 : u.trim()) ?? "", y = N({
+        network: s.network,
+        iconSize: e.iconSize,
+        iconBorderRadius: e.iconBorderRadius ?? 999,
+        iconSrc: s.iconSrc,
+        backgroundColor: s.backgroundColor
+      }), $ = p ? `<span style="font-size:${o}px !important;font-weight:${n};color:${g(
         i
-      )} !important;line-height:1.2;">${s(u)}</span>` : "";
-      return `<span style="display:inline-flex;align-items:center;gap:6px;"><a href="${s(
-        r.href
-      )}" style="display:inline-flex;align-items:center;text-decoration:none;line-height:0;">${v}</a>${S}</span>`;
-    }).join(""), p = T(e);
-    return `<div style="display:flex;flex-wrap:wrap;justify-content:${d};align-items:center;gap:${g}px;padding:${p};">${a || '<span style="color:#9ca3af;font-size:12px;">请填写链接 URL</span>'}</div>`;
+      )} !important;line-height:1.2;">${g(p)}</span>` : "";
+      return `<span style="display:inline-flex;align-items:center;gap:6px;"><a href="${g(
+        s.href
+      )}" style="display:inline-flex;align-items:center;text-decoration:none;line-height:0;">${y}</a>${$}</span>`;
+    }).join(""), l = S(e);
+    return `<div style="display:flex;flex-wrap:wrap;justify-content:${d};align-items:center;gap:${a}px;padding:${l};">${c || '<span style="color:#9ca3af;font-size:12px;">请填写链接 URL</span>'}</div>`;
   }
-}), le = h({
+}), ae = h({
   type: "social-group",
   name: "社交组",
   category: "content",
@@ -599,7 +632,7 @@ ${d}
       key: "elements",
       label: "社交链接",
       type: "socialLinkList",
-      options: te,
+      options: Q,
       help: "每行：平台、链接、可选标签文字、自定义图标 URL、图标背景色。标签的字号/字重/颜色在下方统一设置。"
     },
     {
@@ -615,7 +648,7 @@ ${d}
       label: "标签字重",
       type: "select",
       selectVariant: "segmented",
-      options: [...L]
+      options: [...M]
     },
     { key: "labelColor", label: "标签颜色", type: "color" },
     {
@@ -651,37 +684,41 @@ ${d}
     { key: "paddingTop", label: "外边距", type: "spacing" }
   ],
   toMjml: (e) => {
-    const t = T(e), o = W(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}"`, l = e.elements.filter((a) => {
-      var p;
-      return (p = a.href) == null ? void 0 : p.trim();
-    }), g = {
+    const t = S(e), o = W(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}"`, a = e.elements.filter((l) => {
+      var r;
+      return (r = l.href) == null ? void 0 : r.trim();
+    }), d = {
       labelFontSize: Number(e.labelFontSize ?? 13),
-      labelFontWeight: k(String(e.labelFontWeight ?? "400")),
+      labelFontWeight: f(String(e.labelFontWeight ?? "400")),
       labelColor: String(e.labelColor ?? "#333333")
-    }, d = O(l, g);
-    return d.trim() ? `<mj-social ${i}>
-${d}
+    }, c = O(a, d);
+    return c.trim() ? `<mj-social ${i}>
+${c}
 </mj-social>` : `<mj-social ${i}></mj-social>`;
   },
   renderPreview: (e) => {
-    var $;
-    const t = e.labelFontSize != null && e.labelFontSize > 0 ? e.labelFontSize : 13, o = Math.max(8, Math.min(48, t)), n = k(e.labelFontWeight), i = (($ = e.labelColor) == null ? void 0 : $.trim()) || "#333333", l = V(e.iconSize, e.iconBorderRadius ?? 999), g = F(e.iconSpacing, 10), d = I(e.align), a = e.elements.filter((r) => {
-      var c;
-      return (c = r.href) == null ? void 0 : c.trim();
-    }).map((r) => {
-      var f, C, j;
-      const c = P(r.network), w = ((f = r.backgroundColor) == null ? void 0 : f.trim()) || c.color, u = ((C = r.label) == null ? void 0 : C.trim()) ?? "", x = (j = r.iconSrc) == null ? void 0 : j.trim(), v = x ? `<img src="${s(x)}" alt="" style="width:${e.iconSize}px;height:${e.iconSize}px;object-fit:cover;border-radius:${l};flex-shrink:0;" />` : `<span style="display:inline-flex;width:${e.iconSize}px;height:${e.iconSize}px;border-radius:${l};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;">${c.preview}</span>`, S = u ? `<span style="font-size:${o}px !important;font-weight:${n};color:${s(
+    var r;
+    const t = e.labelFontSize != null && e.labelFontSize > 0 ? e.labelFontSize : 13, o = Math.max(8, Math.min(48, t)), n = f(e.labelFontWeight), i = ((r = e.labelColor) == null ? void 0 : r.trim()) || "#333333", a = C(e.iconSpacing, 10), d = I(e.align), c = e.elements.filter((s) => {
+      var p;
+      return (p = s.href) == null ? void 0 : p.trim();
+    }).map((s) => {
+      var u;
+      const p = ((u = s.label) == null ? void 0 : u.trim()) ?? "", y = N({
+        network: s.network,
+        iconSize: e.iconSize,
+        iconBorderRadius: e.iconBorderRadius ?? 999,
+        iconSrc: s.iconSrc,
+        backgroundColor: s.backgroundColor
+      }), $ = p ? `<span style="font-size:${o}px !important;font-weight:${n};color:${g(
         i
-      )} !important;line-height:1.2;">${s(u)}</span>` : "";
-      return `<span style="display:inline-flex;align-items:center;gap:6px;"><a href="${s(
-        r.href
-      )}" style="display:inline-flex;align-items:center;text-decoration:none;line-height:0;">${v}</a>${S}</span>`;
-    }).join(""), p = T(e);
-    return `<div style="display:flex;flex-wrap:wrap;justify-content:${d};align-items:center;gap:${g}px;padding:${p};">${a || '<span style="color:#9ca3af;font-size:12px;">请添加社交链接</span>'}</div>`;
+      )} !important;line-height:1.2;">${g(p)}</span>` : "";
+      return `<span style="display:inline-flex;align-items:center;gap:6px;"><a href="${g(
+        s.href
+      )}" style="display:inline-flex;align-items:center;text-decoration:none;line-height:0;">${y}</a>${$}</span>`;
+    }).join(""), l = S(e);
+    return `<div style="display:flex;flex-wrap:wrap;justify-content:${d};align-items:center;gap:${a}px;padding:${l};">${c || '<span style="color:#9ca3af;font-size:12px;">请添加社交链接</span>'}</div>`;
   }
-}), re = h({
+}), ce = h({
   type: "spacer",
   name: "间距",
   category: "content",
@@ -690,7 +727,7 @@ ${d}
   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;"), se = h({
   type: "text",
   name: "文本",
   category: "content",
@@ -698,10 +735,10 @@ ${d}
   defaultProps: {
     content: '<p style="margin:0;">在此处输入文本。<strong>双击</strong>进入编辑模式，<em>选中文字</em>会出现工具条；支持变量 {{user.name}}</p>',
     align: "left",
-    color: "#433f3f",
-    fontSize: "16px",
+    color: "",
+    fontSize: "",
     fontFamily: "",
-    fontWeight: "400",
+    fontWeight: "",
     lineHeight: "",
     paddingTop: 8,
     paddingRight: 0,
@@ -711,7 +748,7 @@ ${d}
   schema: [
     {
       key: "align",
-      label: "默认对齐",
+      label: "对齐",
       type: "select",
       selectVariant: "segmented",
       options: [
@@ -720,15 +757,16 @@ ${d}
         { label: "右", value: "right" }
       ]
     },
-    { key: "color", label: "默认颜色", type: "color" },
-    { key: "fontSize", label: "默认字号", type: "text", placeholder: "14px" },
+    { key: "color", label: "颜色", type: "color", placeholder: "继承全局" },
+    { key: "fontSize", label: "字号", type: "text", inheritGlobal: !0 },
     { key: "fontFamily", label: "字体", type: "text", placeholder: "继承全局" },
     {
       key: "fontWeight",
       label: "字重",
       type: "select",
       selectVariant: "segmented",
-      options: [...L]
+      inheritGlobal: !0,
+      options: [...M]
     },
     {
       key: "lineHeight",
@@ -766,50 +804,50 @@ ${d}
     placeholder: "输入文本…"
   },
   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 = k(e.fontWeight), i = n !== "400" ? ` font-weight="${B(n)}"` : "", l = String(e.lineHeight ?? "").trim(), g = l ? ` line-height="${B(l)}"` : "";
-    return `<mj-text align="${e.align}" color="${B(e.color)}" font-size="${B(
-      e.fontSize
-    )}"${g}${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(f(n))}"` : "", a = String(e.lineHeight ?? "").trim(), d = a ? ` line-height="${v(a)}"` : "", c = String(e.color ?? "").trim(), l = c ? ` color="${v(c)}"` : "", r = String(e.fontSize ?? "").trim(), s = r ? ` font-size="${v(r)}"` : "";
+    return `<mj-text align="${e.align}"${l}${s}${d}${o}${i} padding="${t}">${e.content}</mj-text>`;
   },
   renderPreview: (e) => {
-    const t = e.fontFamily ? `font-family:${e.fontFamily};` : "", o = k(e.fontWeight), n = o !== "400" ? `font-weight:${o};` : "", i = String(e.lineHeight ?? "").trim(), l = i ? `line-height:${i};` : "line-height:normal;";
-    return `<div class="sm-text-content" style="text-align:${e.align};color:${e.color};font-size:${e.fontSize};${l}${t}${n}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:${f(o)};` : "", i = String(e.lineHeight ?? "").trim(), a = i ? `line-height:${i};` : "line-height:normal;", d = String(e.color ?? "").trim(), c = d ? `color:${d};` : "", l = String(e.fontSize ?? "").trim(), r = l ? `font-size:${l};` : "";
+    return `<div class="sm-text-content" style="text-align:${e.align};${c}${r}${n}${a}${t}padding:${e.paddingTop}px ${e.paddingRight}px ${e.paddingBottom}px ${e.paddingLeft}px;">${e.content}</div>`;
   }
-}), ce = [
-  ae,
+}), de = [
+  se,
   D,
-  Y,
-  le,
   X,
-  G,
+  ae,
   K,
-  re
-], se = [Z, ie, J], ge = [...ce, ...se];
+  G,
+  q,
+  ce
+], ge = [Y, re, J], he = [...de, ...ge];
 export {
-  te as SOCIAL_NETWORK_OPTIONS,
-  ge as allBlocks,
-  ce as builtinBlocks,
+  Q as SOCIAL_NETWORK_OPTIONS,
+  he as allBlocks,
+  de as builtinBlocks,
   G as buttonBlock,
-  K as dividerBlock,
-  s as escAttr,
-  ne as escMjmlText,
-  se as exampleCustomBlocks,
+  q as dividerBlock,
+  g as escAttr,
+  te as escMjmlText,
+  ge as exampleCustomBlocks,
   I as flexJustifyFromAlign,
   J as footerBlock,
-  X as heroBlock,
+  K as heroBlock,
   D as htmlBlock,
-  Y as imageBlock,
-  Z as logoBlock,
-  Q as mjSocialElementName,
+  X as imageBlock,
+  Y as logoBlock,
+  ie as mjSocialDefaultIconSrc,
+  H as mjSocialElementName,
   O as mjSocialElementsLines,
-  T as paddingQuad,
-  ie as socialBlock,
-  le as socialGroupBlock,
-  V as socialIconBorderRadiusCss,
+  S as paddingQuad,
+  N as renderSocialIconPreviewHtml,
+  re as socialBlock,
+  ae as socialGroupBlock,
+  le as socialIconBorderRadiusCss,
   W as socialIconBorderRadiusMjml,
-  F as socialIconSpacingPx,
-  P as socialMeta,
-  re as spacerBlock,
-  ae as textBlock
+  C as socialIconSpacingPx,
+  E as socialMeta,
+  ce as spacerBlock,
+  se as textBlock
 };
 //# sourceMappingURL=index.js.map