mail-editor-pancake 0.2.7 → 0.3.0

package/packages/blocks/dist/index.js

@@ -284,7 +284,179 @@ const b = {
     const t = `${e.paddingTop}px ${e.paddingRight}px ${e.paddingBottom}px ${e.paddingLeft}px`, o = Q(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;"), se = h({
+}), se = {
+  align: "blocks.field.align",
+  textAlign: "blocks.field.textAlign",
+  verticalAlign: "blocks.field.verticalAlign",
+  color: "blocks.field.color",
+  textColor: "blocks.field.textColor",
+  backgroundColor: "blocks.field.backgroundColor",
+  backgroundUrl: "blocks.field.backgroundUrl",
+  height: "blocks.field.heightPx",
+  width: "blocks.field.width",
+  thickness: "blocks.field.thicknessPx",
+  paddingTop: "blocks.field.padding",
+  text: "blocks.field.text",
+  href: "blocks.field.link",
+  src: "blocks.field.imageUrl",
+  alt: "blocks.field.alt",
+  fontSize: "blocks.field.fontSize",
+  fontFamily: "blocks.field.fontFamily",
+  fontWeight: "blocks.field.fontWeight",
+  lineHeight: "blocks.field.lineHeight",
+  html: "blocks.field.html",
+  borderRadius: "blocks.field.borderRadius",
+  innerPaddingV: "blocks.field.buttonInnerPaddingV",
+  innerPaddingH: "blocks.field.buttonInnerPaddingH",
+  elements: "blocks.field.socialLinks",
+  labelFontSize: "blocks.field.labelFontSize",
+  labelFontWeight: "blocks.field.labelFontWeight",
+  labelColor: "blocks.field.labelColor",
+  iconSize: "blocks.field.iconSize",
+  iconBorderRadius: "blocks.field.iconRadius",
+  iconSpacing: "blocks.field.iconSpacing",
+  companyName: "blocks.field.companyName",
+  address: "blocks.field.address",
+  unsubscribeText: "blocks.field.unsubscribeText",
+  unsubscribeHref: "blocks.field.unsubscribeLink"
+}, de = {
+  button: {
+    backgroundColor: "blocks.field.backgroundColor",
+    color: "blocks.field.textColor",
+    width: "blocks.field.width"
+  },
+  divider: {
+    width: "blocks.field.widthPercentOrPx",
+    paddingTop: "blocks.field.topMargin",
+    paddingBottom: "blocks.field.bottomMargin"
+  },
+  hero: {
+    backgroundColor: "blocks.field.backgroundPlaceholderColor",
+    height: "blocks.field.areaHeightPx",
+    content: "blocks.field.bodyHtml"
+  },
+  html: {
+    paddingTop: "blocks.field.padding"
+  },
+  image: {
+    href: "blocks.field.href",
+    width: "blocks.field.widthPx"
+  },
+  logo: {
+    src: "blocks.field.logoImage",
+    href: "blocks.field.websiteLink",
+    width: "blocks.field.widthPx"
+  },
+  text: {
+    content: "blocks.field.contentHtml"
+  }
+}, N = {
+  button: { width: "blocks.help.buttonWidth" },
+  hero: {
+    backgroundColor: "blocks.help.imageFallbackColor",
+    content: "blocks.help.canvasEditRecommendedShort"
+  },
+  html: { html: "blocks.help.htmlOnly" },
+  image: { height: "blocks.help.imageAutoHeight" },
+  "social-group": {
+    elements: "blocks.help.socialLinks",
+    iconBorderRadius: "blocks.help.iconRadius",
+    iconSpacing: "blocks.help.iconSpacing"
+  },
+  social: {
+    elements: "blocks.help.bizSocialLinks",
+    iconBorderRadius: "blocks.help.iconRadius",
+    iconSpacing: "blocks.help.bizIconSpacing"
+  },
+  text: {
+    content: "blocks.help.canvasEditRecommended",
+    lineHeight: "blocks.help.globalLineHeight"
+  }
+}, I = {
+  button: { width: "blocks.placeholder.buttonWidth" },
+  image: { alt: "blocks.field.imageDescription" },
+  text: {
+    color: "blocks.field.inheritGlobalPlaceholder",
+    fontFamily: "blocks.field.inheritGlobalPlaceholder"
+  }
+}, ge = {
+  button: "blocks.field.buttonTextPlaceholder",
+  hero: "blocks.field.heroPlaceholder",
+  html: "blocks.field.htmlPlaceholder",
+  text: "blocks.field.textPlaceholder"
+}, pe = {
+  button: { text: "blocks.button.defaultText" },
+  hero: { content: "blocks.hero.defaultContent" },
+  html: { html: "blocks.html.defaultHtml" },
+  text: { content: "blocks.text.defaultContent" },
+  footer: {
+    companyName: "blocks.footer.defaultCompanyName",
+    address: "blocks.footer.defaultAddress",
+    unsubscribeText: "blocks.footer.defaultUnsubscribeText"
+  }
+};
+function S(e, t) {
+  return e.map((o) => he(o, t));
+}
+function he(e, t) {
+  const o = K(e.type), l = `blocks.${o}.name`, n = t(l), i = fe(o, e, t);
+  return {
+    ...e,
+    name: n === l ? e.name : n,
+    defaultProps: be(e, t),
+    schema: e.schema.map((r) => me(o, r, t)),
+    renderPreview: xe(e, i),
+    inlineEditable: e.inlineEditable ? {
+      ...e.inlineEditable,
+      placeholder: i
+    } : void 0
+  };
+}
+function be(e, t) {
+  const o = { ...e.defaultProps }, l = pe[K(e.type)] ?? {};
+  for (const [n, i] of Object.entries(l))
+    o[n] = t(i);
+  return o;
+}
+function me(e, t, o) {
+  var n, i, r, c;
+  const l = ((n = de[e]) == null ? void 0 : n[t.key]) ?? se[t.key];
+  return {
+    ...t,
+    label: l ? o(l) : t.label,
+    placeholder: (i = I[e]) != null && i[t.key] ? o(I[e][t.key]) : t.placeholder,
+    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: ue(a, o)
+    }))
+  };
+}
+function ue(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 fe(e, t, o) {
+  var n;
+  const l = ge[e];
+  return l ? o(l) : (n = t.inlineEditable) == null ? void 0 : n.placeholder;
+}
+function xe(e, t) {
+  var n;
+  if (!e.renderPreview || !((n = e.inlineEditable) != null && n.placeholder) || !t)
+    return e.renderPreview;
+  const o = W(e.inlineEditable.placeholder), l = W(t);
+  return (i, r) => e.renderPreview(i, r).replaceAll(
+    `data-placeholder="${o}"`,
+    `data-placeholder="${l}"`
+  );
+}
+function W(e) {
+  return e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+function K(e) {
+  return e.startsWith("custom:") ? e.slice(7) : e;
+}
+const w = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;"), ke = h({
   type: "image",
   name: "图片",
   category: "content",
@@ -337,7 +509,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;"), de = h({
+}), z = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;"), ye = h({
   type: "custom:logo",
   name: "公司 Logo",
   category: "custom",
@@ -372,17 +544,29 @@ const b = {
     )}" alt="logo" style="display:block;${t}width:${e.width}px;max-width:100%;height:auto;" /></div>`;
   }
 });
-function K(e) {
+function V(e) {
   const t = e.trim();
   return t === "ig" ? "instagram" : t === "rabbit" || t === "tiktok" || t === "reddit" ? "web" : t;
 }
-const ge = [
+const $e = /* @__PURE__ */ new Set([
+  "facebook",
+  "twitter",
+  "x",
+  "google",
+  "pinterest",
+  "linkedin"
+]);
+function we(e) {
+  const t = V(e);
+  return $e.has(t) ? `${t}-noshare` : t;
+}
+const ve = [
   { label: "X", value: "x" },
   { label: "Rabbit", value: "rabbit" },
   { label: "Facebook", value: "facebook" },
   { label: "TikTok", value: "tiktok" },
   { label: "Instagram", value: "ig" }
-], pe = [
+], Se = [
   { label: "微信", value: "wechat" },
   { label: "微博", value: "weibo" },
   { label: "X", value: "x" },
@@ -393,7 +577,7 @@ const ge = [
   { label: "YouTube", value: "youtube" },
   { label: "Reddit", value: "reddit" },
   { label: "网页", value: "web" }
-], he = {
+], Ce = {
   wechat: { color: "#1AAD19", preview: "信" },
   weibo: { color: "#E6162D", preview: "微" },
   x: { color: "#000000", preview: "X" },
@@ -408,11 +592,11 @@ const ge = [
   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;"), be = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-function V(e) {
-  return he[e] ?? { color: "#6b7280", preview: "·" };
+}, p = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;"), Be = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+function U(e) {
+  return Ce[e] ?? { color: "#6b7280", preview: "·" };
 }
-const me = "https://www.mailjet.com/images/theme/v1/icons/ico-social/", ue = {
+const ze = "https://www.mailjet.com/images/theme/v1/icons/ico-social/", Le = {
   facebook: "facebook.png",
   twitter: "twitter.png",
   x: "twitter-x.png",
@@ -431,80 +615,80 @@ const me = "https://www.mailjet.com/images/theme/v1/icons/ico-social/", ue = {
   soundcloud: "soundcloud.png",
   dribbble: "dribbble.png"
 };
-function fe(e) {
-  const t = ue[K(e)];
-  return t ? `${me}${t}` : null;
+function Re(e) {
+  const t = Le[V(e)];
+  return t ? `${ze}${t}` : null;
 }
-function U(e) {
-  const { network: t, iconSize: o, iconBorderRadius: l, iconSrc: n, backgroundColor: i } = e, r = xe(o, l), c = V(t), a = (i == null ? void 0 : i.trim()) || c.color, d = (n == null ? void 0 : n.trim()) || fe(t);
+function D(e) {
+  const { network: t, iconSize: o, iconBorderRadius: l, iconSrc: n, backgroundColor: i } = e, r = Me(o, l), c = U(t), a = (i == null ? void 0 : i.trim()) || c.color, d = (n == null ? void 0 : n.trim()) || Re(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;">${c.preview}</span>`;
 }
-function S(e) {
+function C(e) {
   return `${e.paddingTop}px ${e.paddingRight}px ${e.paddingBottom}px ${e.paddingLeft}px`;
 }
-function D(e, t) {
+function G(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 xe(e, t) {
+function Me(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;
   return l >= 999 || l >= n ? "50%" : `${Math.min(l, o)}px`;
 }
-function C(e, t = 10) {
+function B(e, t = 10) {
   const o = Number(e);
   return !Number.isFinite(o) || o < 0 ? t : Math.min(64, Math.round(o));
 }
-function G(e) {
+function J(e) {
   return e === "right" ? "flex-end" : e === "left" ? "flex-start" : "center";
 }
-function J(e, t) {
+function q(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 = V(a.network), s = ((T = a.backgroundColor) == null ? void 0 : T.trim()) || d.color, u = [
-      `name="${p(K(a.network))}"`,
+    const d = U(a.network), s = ((T = a.backgroundColor) == null ? void 0 : T.trim()) || d.color, u = [
+      `name="${p(we(a.network))}"`,
       `href="${p(a.href)}"`,
       `background-color="${p(s)}"`,
       `color="${p(i)}"`,
       `font-size="${l}px"`,
       `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}>
-    ${be(R)}
+    ].join(" "), y = (P = a.iconSrc) == null ? void 0 : P.trim(), f = y ? `${u} src="${p(y)}"` : u, M = ((F = a.label) == null ? void 0 : F.trim()) ?? "";
+    return M ? `  <mj-social-element ${f}>
+    ${Be(M)}
   </mj-social-element>` : `  <mj-social-element ${f} />`;
   }).join(`
 `);
 }
-const q = [
+const Y = [
   { 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 I(e) {
+function _(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((l) => ({
     network: String(l.network ?? "web"),
     href: String(l.href ?? "")
-  })) : q;
+  })) : Y;
 }
-const ke = h({
+const Te = h({
   type: "custom:social",
   name: "社交链接",
   category: "custom",
   icon: b.social,
   defaultProps: {
-    elements: q,
+    elements: Y,
     align: "center",
     iconSize: 28,
     iconBorderRadius: 999,
@@ -522,7 +706,7 @@ const ke = h({
       key: "elements",
       label: "社交链接",
       type: "socialLinkList",
-      options: ge,
+      options: ve,
       help: "平台：X、Rabbit、Facebook、TikTok、Instagram (ig)。可填标签、自定义图标 URL。MJML 侧 Rabbit/TikTok 使用 web 占位图标，需要品牌图时请填「图标 URL」。"
     },
     {
@@ -574,26 +758,26 @@ const ke = h({
     { key: "paddingTop", label: "外边距", type: "spacing" }
   ],
   toMjml: (e) => {
-    const t = S(e), o = D(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 = I(e).filter((a) => {
+    const t = C(e), o = G(e.iconSize, e.iconBorderRadius ?? 999), l = B(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).filter((a) => {
       var d;
       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")
-    }, c = J(i, r);
+    }, c = q(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), r = G(e.align), c = I(e).filter((s) => {
+    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 = B(e.iconSpacing, 10), r = J(e.align), c = _(e).filter((s) => {
       var g;
       return (g = s.href) == null ? void 0 : g.trim();
     }).map((s) => {
       var f;
-      const g = ((f = s.label) == null ? void 0 : f.trim()) ?? "", u = U({
+      const g = ((f = s.label) == null ? void 0 : f.trim()) ?? "", u = D({
         network: s.network,
         iconSize: e.iconSize,
         iconBorderRadius: e.iconBorderRadius ?? 999,
@@ -605,10 +789,10 @@ ${c}
       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;">${u}</a>${y}</span>`;
-    }).join(""), a = S(e);
+    }).join(""), a = C(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>`;
   }
-}), ye = h({
+}), Pe = h({
   type: "social-group",
   name: "社交组",
   category: "content",
@@ -635,7 +819,7 @@ ${c}
       key: "elements",
       label: "社交链接",
       type: "socialLinkList",
-      options: pe,
+      options: Se,
       help: "每行：平台、链接、可选标签文字、自定义图标 URL、图标背景色。标签的字号/字重/颜色在下方统一设置。"
     },
     {
@@ -687,26 +871,26 @@ ${c}
     { key: "paddingTop", label: "外边距", type: "spacing" }
   ],
   toMjml: (e) => {
-    const t = S(e), o = D(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) => {
+    const t = C(e), o = G(e.iconSize, e.iconBorderRadius ?? 999), l = B(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 = a.href) == null ? void 0 : d.trim();
     }), r = {
       labelFontSize: Number(e.labelFontSize ?? 13),
       labelFontWeight: k(String(e.labelFontWeight ?? "400")),
       labelColor: String(e.labelColor ?? "#333333")
-    }, c = J(i, r);
+    }, c = q(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), r = G(e.align), c = e.elements.filter((s) => {
+    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 = B(e.iconSpacing, 10), r = J(e.align), c = e.elements.filter((s) => {
       var g;
       return (g = s.href) == null ? void 0 : g.trim();
     }).map((s) => {
       var f;
-      const g = ((f = s.label) == null ? void 0 : f.trim()) ?? "", u = U({
+      const g = ((f = s.label) == null ? void 0 : f.trim()) ?? "", u = D({
         network: s.network,
         iconSize: e.iconSize,
         iconBorderRadius: e.iconBorderRadius ?? 999,
@@ -718,10 +902,10 @@ ${c}
       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;">${u}</a>${y}</span>`;
-    }).join(""), a = S(e);
+    }).join(""), a = C(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>`;
   }
-}), $e = h({
+}), Fe = h({
   type: "spacer",
   name: "间距",
   category: "content",
@@ -730,13 +914,13 @@ ${c}
   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;"), N = "输入文本…", we = h({
+}), v = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;"), O = "输入文本…", je = h({
   type: "text",
   name: "文本",
   category: "content",
   icon: b.text,
   defaultProps: {
-    content: '<p style="margin:0;">在此处输入文本。<strong>双击</strong>进入编辑模式，<em>选中文字</em>会出现工具条；支持变量 {{user.name}}</p>',
+    content: "<p>双击进入编辑...</p>",
     align: "left",
     color: "",
     fontSize: "",
@@ -804,247 +988,75 @@ ${c}
     mode: "rich",
     multiline: !0,
     propKey: "content",
-    placeholder: N
+    placeholder: O
   },
   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(), 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;", r = String(e.color ?? "").trim(), c = r ? `color:${r};` : "", a = String(e.fontSize ?? "").trim(), d = a ? `font-size:${a};` : "", s = oe(e.content), g = s ? " is-empty" : "", u = s ? ` data-placeholder="${N}"` : "";
+    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};` : "", r = String(e.color ?? "").trim(), c = r ? `color:${r};` : "", a = String(e.fontSize ?? "").trim(), d = a ? `font-size:${a};` : "", s = oe(e.content), g = s ? " is-empty" : "", u = s ? ` data-placeholder="${O}"` : "";
     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>`;
   }
-}), ve = {
-  align: "blocks.field.align",
-  textAlign: "blocks.field.textAlign",
-  verticalAlign: "blocks.field.verticalAlign",
-  color: "blocks.field.color",
-  textColor: "blocks.field.textColor",
-  backgroundColor: "blocks.field.backgroundColor",
-  backgroundUrl: "blocks.field.backgroundUrl",
-  height: "blocks.field.heightPx",
-  width: "blocks.field.width",
-  thickness: "blocks.field.thicknessPx",
-  paddingTop: "blocks.field.padding",
-  text: "blocks.field.text",
-  href: "blocks.field.link",
-  src: "blocks.field.imageUrl",
-  alt: "blocks.field.alt",
-  fontSize: "blocks.field.fontSize",
-  fontFamily: "blocks.field.fontFamily",
-  fontWeight: "blocks.field.fontWeight",
-  lineHeight: "blocks.field.lineHeight",
-  html: "blocks.field.html",
-  borderRadius: "blocks.field.borderRadius",
-  innerPaddingV: "blocks.field.buttonInnerPaddingV",
-  innerPaddingH: "blocks.field.buttonInnerPaddingH",
-  elements: "blocks.field.socialLinks",
-  labelFontSize: "blocks.field.labelFontSize",
-  labelFontWeight: "blocks.field.labelFontWeight",
-  labelColor: "blocks.field.labelColor",
-  iconSize: "blocks.field.iconSize",
-  iconBorderRadius: "blocks.field.iconRadius",
-  iconSpacing: "blocks.field.iconSpacing",
-  companyName: "blocks.field.companyName",
-  address: "blocks.field.address",
-  unsubscribeText: "blocks.field.unsubscribeText",
-  unsubscribeHref: "blocks.field.unsubscribeLink"
-}, Se = {
-  button: {
-    backgroundColor: "blocks.field.backgroundColor",
-    color: "blocks.field.textColor",
-    width: "blocks.field.width"
-  },
-  divider: {
-    width: "blocks.field.widthPercentOrPx",
-    paddingTop: "blocks.field.topMargin",
-    paddingBottom: "blocks.field.bottomMargin"
-  },
-  hero: {
-    backgroundColor: "blocks.field.backgroundPlaceholderColor",
-    height: "blocks.field.areaHeightPx",
-    content: "blocks.field.bodyHtml"
-  },
-  html: {
-    paddingTop: "blocks.field.padding"
-  },
-  image: {
-    href: "blocks.field.href",
-    width: "blocks.field.widthPx"
-  },
-  logo: {
-    src: "blocks.field.logoImage",
-    href: "blocks.field.websiteLink",
-    width: "blocks.field.widthPx"
-  },
-  text: {
-    content: "blocks.field.contentHtml"
-  }
-}, W = {
-  button: { width: "blocks.help.buttonWidth" },
-  hero: {
-    backgroundColor: "blocks.help.imageFallbackColor",
-    content: "blocks.help.canvasEditRecommendedShort"
-  },
-  html: { html: "blocks.help.htmlOnly" },
-  image: { height: "blocks.help.imageAutoHeight" },
-  "social-group": {
-    elements: "blocks.help.socialLinks",
-    iconBorderRadius: "blocks.help.iconRadius",
-    iconSpacing: "blocks.help.iconSpacing"
-  },
-  social: {
-    elements: "blocks.help.bizSocialLinks",
-    iconBorderRadius: "blocks.help.iconRadius",
-    iconSpacing: "blocks.help.bizIconSpacing"
-  },
-  text: {
-    content: "blocks.help.canvasEditRecommended",
-    lineHeight: "blocks.help.globalLineHeight"
-  }
-}, _ = {
-  button: { width: "blocks.placeholder.buttonWidth" },
-  image: { alt: "blocks.field.imageDescription" },
-  text: {
-    color: "blocks.field.inheritGlobalPlaceholder",
-    fontFamily: "blocks.field.inheritGlobalPlaceholder"
-  }
-}, Ce = {
-  button: "blocks.field.buttonTextPlaceholder",
-  hero: "blocks.field.heroPlaceholder",
-  html: "blocks.field.htmlPlaceholder",
-  text: "blocks.field.textPlaceholder"
-}, Be = {
-  button: { text: "blocks.button.defaultText" },
-  hero: { content: "blocks.hero.defaultContent" },
-  html: { html: "blocks.html.defaultHtml" },
-  text: { content: "blocks.text.defaultContent" },
-  footer: {
-    companyName: "blocks.footer.defaultCompanyName",
-    address: "blocks.footer.defaultAddress",
-    unsubscribeText: "blocks.footer.defaultUnsubscribeText"
-  }
-};
-function B(e, t) {
-  return e.map((o) => ze(o, t));
-}
-function ze(e, t) {
-  const o = Y(e.type), l = `blocks.${o}.name`, n = t(l), i = Te(o, e, t);
-  return {
-    ...e,
-    name: n === l ? e.name : n,
-    defaultProps: Le(e, t),
-    schema: e.schema.map((r) => Me(o, r, t)),
-    renderPreview: Pe(e, i),
-    inlineEditable: e.inlineEditable ? {
-      ...e.inlineEditable,
-      placeholder: i
-    } : void 0
-  };
-}
-function Le(e, t) {
-  const o = { ...e.defaultProps }, l = Be[Y(e.type)] ?? {};
-  for (const [n, i] of Object.entries(l))
-    o[n] = t(i);
-  return o;
-}
-function Me(e, t, o) {
-  var n, i, r, c;
-  const l = ((n = Se[e]) == null ? void 0 : n[t.key]) ?? ve[t.key];
-  return {
-    ...t,
-    label: l ? o(l) : t.label,
-    placeholder: (i = _[e]) != null && i[t.key] ? o(_[e][t.key]) : t.placeholder,
-    help: (r = W[e]) != null && r[t.key] ? o(W[e][t.key]) : t.help,
-    options: (c = t.options) == null ? void 0 : c.map((a) => ({
-      ...a,
-      label: Re(a, o)
-    }))
-  };
-}
-function Re(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 Te(e, t, o) {
-  var n;
-  const l = Ce[e];
-  return l ? o(l) : (n = t.inlineEditable) == null ? void 0 : n.placeholder;
-}
-function Pe(e, t) {
-  var n;
-  if (!e.renderPreview || !((n = e.inlineEditable) != null && n.placeholder) || !t)
-    return e.renderPreview;
-  const o = O(e.inlineEditable.placeholder), l = O(t);
-  return (i, r) => e.renderPreview(i, r).replaceAll(
-    `data-placeholder="${o}"`,
-    `data-placeholder="${l}"`
-  );
-}
-function O(e) {
-  return e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
-}
-function Y(e) {
-  return e.startsWith("custom:") ? e.slice(7) : e;
-}
-const X = [
-  we,
+}), X = [
+  je,
   ce,
-  se,
-  ye,
+  ke,
+  Pe,
   ae,
   ne,
   ie,
-  $e
-], Z = [de, ke, re];
-function M(e = {}) {
+  Fe
+], Z = [ye, Te, re];
+function R(e = {}) {
   return e.t ?? le(e).t;
 }
-function Fe(e = {}) {
-  return B(X, M(e));
+function Ee(e = {}) {
+  return S(X, R(e));
 }
-function je(e = {}) {
-  return B(Z, M(e));
+function Ae(e = {}) {
+  return S(Z, R(e));
 }
-function Ee(e = {}) {
-  const t = M(e);
+function He(e = {}) {
+  const t = R(e);
   return [
-    ...B(X, t),
-    ...B(Z, t)
+    ...S(X, t),
+    ...S(Z, t)
   ];
 }
-const He = Fe(), Ie = je(), Ne = Ee();
+const Ie = Ee(), We = Ae(), _e = He();
 export {
-  pe as SOCIAL_NETWORK_OPTIONS,
-  Ne as allBlocks,
-  He as builtinBlocks,
+  Se as SOCIAL_NETWORK_OPTIONS,
+  _e as allBlocks,
+  Ie as builtinBlocks,
   ne as buttonBlock,
-  Ee as createAllBlocks,
-  Fe as createBuiltinBlocks,
-  je as createExampleCustomBlocks,
+  He as createAllBlocks,
+  Ee as createBuiltinBlocks,
+  Ae as createExampleCustomBlocks,
   ie as dividerBlock,
   p as escAttr,
-  be as escMjmlText,
-  Ie as exampleCustomBlocks,
-  G as flexJustifyFromAlign,
+  Be as escMjmlText,
+  We as exampleCustomBlocks,
+  J as flexJustifyFromAlign,
   re as footerBlock,
   ae as heroBlock,
   ce as htmlBlock,
-  se as imageBlock,
-  ze as localizeBlockDefinition,
-  B as localizeBlockDefinitions,
-  de as logoBlock,
-  fe as mjSocialDefaultIconSrc,
-  K as mjSocialElementName,
-  J as mjSocialElementsLines,
-  S as paddingQuad,
-  U as renderSocialIconPreviewHtml,
-  ke as socialBlock,
-  ye as socialGroupBlock,
-  xe as socialIconBorderRadiusCss,
-  D as socialIconBorderRadiusMjml,
-  C as socialIconSpacingPx,
-  V as socialMeta,
-  $e as spacerBlock,
-  we as textBlock
+  ke as imageBlock,
+  he as localizeBlockDefinition,
+  S as localizeBlockDefinitions,
+  ye as logoBlock,
+  Re as mjSocialDefaultIconSrc,
+  V as mjSocialElementName,
+  q as mjSocialElementsLines,
+  C as paddingQuad,
+  D as renderSocialIconPreviewHtml,
+  Te as socialBlock,
+  Pe as socialGroupBlock,
+  Me as socialIconBorderRadiusCss,
+  G as socialIconBorderRadiusMjml,
+  B as socialIconSpacingPx,
+  U as socialMeta,
+  Fe as spacerBlock,
+  je as textBlock
 };
 //# sourceMappingURL=index.js.map