mail-editor-pancake 0.0.7 → 0.0.8

package/README.md

@@ -23,6 +23,7 @@ Doc → Section → Column → Block       // 仅四层，不允许 Block 再含
 - **界面主题**：顶栏 **太阳 / 月亮 / 显示器** 图标切换浅色、深色、跟随系统（`prefers-color-scheme`）；中间邮件画布仍为白纸以贴近成品
 - **品牌色**：可选 `accentColor` / `setAccentColor`，覆盖强调色与选区色；可选顶栏拾色器
 - **仅搭正文**：`ui.hideMailMeta` 隐藏主题 / Preheader 与顶栏「邮件设置」，保留版式宽度与全局样式
+- **画布清空 / 重置**：顶栏「清空画布」「重置内容」；`presetDoc` 与 `initialDoc` 分离，编辑已保存邮件时重置仍回到业务预置模板
 - 包体可控：核心 + MJML + CodeMirror + 富文本，gzip ≈ 586KB
 
 ## 仓库结构
@@ -67,6 +68,12 @@ const editor = new MailEditor({
     variables: [{ key: 'user.name', label: '用户名', sample: '张三' }],
     sections: [],
   },
+  /**
+   * 顶栏「重置内容」恢复的目标（与 initialDoc 独立）。
+   * 编辑页打开已保存邮件时：initialDoc = 当前稿，presetDoc = 业务默认模板。
+   * 未传时与 initialDoc 合并结果一致。
+   */
+  // presetDoc: defaultTemplatePartial,
   /** 右栏控件形态等，见下文「UI 选项 ui」 */
   // ui: { preferSliderControls: true, hideMailMeta: true },
   // autoWrapSection: true（默认）— 把 Block 拖到 Section 之间空白处时
@@ -85,6 +92,36 @@ const { mjml, html } = editor.export({ withSampleVariables: true });
 
 // 整份替换文档（例如切换模板）；会先失焦右栏避免旧值残留
 // editor.setValue(nextDoc);
+
+// 清空画布（仅 sections 置空，保留 meta / styles / variables；可 ⌘Z 撤销）
+// editor.clearCanvas();
+
+// 恢复为 presetDoc（或构造时 initialDoc）快照
+// editor.resetToPreset();
+
+// 异步加载默认模板后更新重置目标
+// editor.setPresetDoc(defaultTemplatePartial);
+```
+
+### 画布清空与重置
+
+顶栏位于 **撤销 / 重做** 右侧（可用 `ui` 隐藏，见下表）：
+
+| 按钮 | 行为 |
+|------|------|
+| **清空画布** | 移除所有 Section / Block；`meta`、`styles`、`variables` 不变。操作前浏览器 `confirm` 确认；记入撤销栈（⌘Z 可恢复）。 |
+| **重置内容** | 整份替换为 **`presetDoc`** 快照（未传 `presetDoc` 时等同构造时的 `initialDoc` 合并结果）。操作前 `confirm` 确认；**不**走撤销栈（与 `setValue` 相同，会清空 history）。 |
+
+**宿主常见写法**：新建页 `initialDoc` 与 `presetDoc` 同为默认模板；编辑页 `initialDoc` 为接口返回的 `jsonContent`，`presetDoc` 仍为业务预置结构，避免「重置」把用户带回打开时的草稿。
+
+```ts
+const editor = new MailEditor({
+  container: el,
+  blocks: allBlocks,
+  initialDoc: loadedFromApi,      // 当前画布
+  presetDoc: businessDefaultTemplate, // 顶栏「重置内容」
+  onChange: (doc) => save(doc),
+});
 ```
 
 ### 界面主题
@@ -120,6 +157,11 @@ editor.getTheme();
 |------|------|
 | `preferSliderControls?: boolean` | 为 `true` 时右栏数值、内边距、全局/组件字号等使用滑块等增强控件。默认 `false`。 |
 | `hideMailMeta?: boolean` | 为 `true` 时：**不展示**右栏「主题」「Preheader」以及顶栏「邮件设置」按钮；右栏文档级面板改为 **「版式」（内容宽度）+「全局样式」**。`doc.meta.subject` / `preheader` 仍在数据模型中，导出 MJML 仍会生成 `<mj-title>`（可为空）、有值时才生成 `<mj-preview>`，适合发件主题由宿主系统单独维护的场景。 |
+| `hideTopbarTitle?: boolean` | 隐藏顶栏左侧产品标题（嵌入宿主页时常用）。 |
+| `hideTopbarMailSettings?: boolean` | 隐藏顶栏「邮件设置」按钮（与 `hideMailMeta` 叠加使用）。 |
+| `hideTopbarFullscreen?: boolean` | 隐藏顶栏全屏按钮。 |
+| `hideTopbarClearCanvas?: boolean` | 隐藏顶栏「清空画布」。 |
+| `hideTopbarResetContent?: boolean` | 隐藏顶栏「重置内容」。 |
 
 ### 图片资源 `imageAssets`
 
@@ -317,6 +359,8 @@ expandPaletteDrop?: (createBlock: (type: string) => Block) => Block[];
 | 删除 | 选中后按 Delete/Backspace；或工具条 🗑 |
 | 复制 | 工具条 ⎘ 图标 |
 | 撤销 / 重做 | ⌘Z / ⌘⇧Z（顶栏按钮也行） |
+| 清空画布 | 顶栏「清空画布」；移除全部 Section/Block，保留全局样式与变量（可撤销） |
+| 重置内容 | 顶栏「重置内容」；恢复为 `presetDoc`（或构造时的 `initialDoc`） |
 | 插入变量 | 顶栏 `{{ }}`：编辑中插到光标处；否则插到聚焦输入框 |
 | 切换源码 / 设计 | 顶栏切换 |
 | 导出 HTML | 顶栏右上 |
@@ -332,7 +376,12 @@ expandPaletteDrop?: (createBlock: (type: string) => Block) => Block[];
 
 ## 数据模型 速览
 
-`EmailDoc` 为单一事实来源；设计 / 导出 / 宿主保存均围绕该 JSON。构造器中的 `initialDoc` 为 `Partial<EmailDoc>`，会与默认空邮件合并。**预置模板**可传入完整或部分 `sections`、`styles`、`variables` 等。运行时用 **`editor.setValue(doc)`** 可整份替换（例如切换模板），调用前会尽量失焦右栏输入，避免面板显示旧值。
+`EmailDoc` 为单一事实来源；设计 / 导出 / 宿主保存均围绕该 JSON。
+
+- **`initialDoc`**：`Partial<EmailDoc>`，与默认空邮件合并，作为**首次进入画布**的内容。
+- **`presetDoc`**：可选，与默认空邮件合并，作为顶栏 **「重置内容」** 的目标；未传时与 `initialDoc` 相同。编辑已保存邮件时应单独传入业务默认模板，勿与 `initialDoc` 混用。
+- **`editor.setValue(doc)`**：运行期整份替换（如切换模板）；会清空撤销栈；调用前会尽量失焦右栏输入。
+- **`editor.clearCanvas()`** / **`editor.resetToPreset()`** / **`editor.setPresetDoc(partial)`**：与顶栏按钮等价，供宿主程序化调用。
 
 ```ts
 interface EmailDoc {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mail-editor-pancake",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "private": false,
   "description": "面向运营的轻量邮件可视化编辑器（monorepo 根）",
   "devDependencies": {

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 A, docContentWidthCss as H, mjRawEmailTableWrap as _, mjRawCellTypographyFromStyles as G, normalizeFontWeightStep as k, FONT_WEIGHT_STEP_OPTIONS as L } 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({
+}, $ = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;"), q = h({
   type: "button",
   name: "按钮",
   category: "content",
@@ -69,19 +69,19 @@ 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 = A(e.width), i = n ? ` width="${$(n)}"` : "";
+    return `<mj-button href="${$(e.href)}" background-color="${$(
       e.backgroundColor
-    )}" color="${y(e.color)}" border-radius="${e.borderRadius}px" font-size="${y(
+    )}" color="${$(e.color)}" border-radius="${e.borderRadius}px" font-size="${$(
       e.fontSize
-    )}" align="${e.align}" padding="${t}" inner-padding="${o}"${i}>${y(
+    )}" align="${e.align}" padding="${t}" inner-padding="${o}"${i}>${$(
       e.text
     )}</mj-button>`;
   },
   renderPreview: (e) => {
     const t = A(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="${$(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>
     </div>`;
   }
 }), E = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;"), K = h({
@@ -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({
+}), C = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;"), X = h({
   type: "hero",
   name: "Hero 大图",
   category: "content",
@@ -203,20 +203,20 @@ const m = {
       height="${i}"
       background-width="${o}"
       background-height="${i}"
-      background-url="${z(e.backgroundUrl)}"
-      background-color="${z(e.backgroundColor)}"
+      background-url="${C(e.backgroundUrl)}"
+      background-color="${C(e.backgroundColor)}"
       padding="${n}"
       vertical-align="${e.verticalAlign}"
     >
       <mj-text
         align="${e.textAlign}"
-        color="${z(e.textColor)}"
+        color="${C(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 = 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);
     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(${r});
         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:${C(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:${C(e.textColor)};
           text-shadow:0 1px 2px rgba(0,0,0,0.45);
         "
       >${e.content}</div>
@@ -278,7 +278,7 @@ 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 _(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({
@@ -405,14 +405,14 @@ 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;");
+}, 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: "·" };
 }
 function T(e) {
   return `${e.paddingTop}px ${e.paddingRight}px ${e.paddingBottom}px ${e.paddingLeft}px`;
 }
-function W(e, t) {
+function N(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;
@@ -432,21 +432,21 @@ 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 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);
+  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))}"`,
+      `href="${p(l.href)}"`,
+      `background-color="${p(u)}"`,
+      `color="${p(r)}"`,
       `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)}
-  </mj-social-element>` : `  <mj-social-element ${u} />`;
+      `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)}
+  </mj-social-element>` : `  <mj-social-element ${x} />`;
   }).join(`
 `);
 }
@@ -457,7 +457,7 @@ const U = [
   { network: "tiktok", href: "https://www.tiktok.com/" },
   { network: "ig", href: "https://instagram.com/" }
 ];
-function N(e) {
+function W(e) {
   var o;
   if ((o = e.elements) != null && o.length) return e.elements;
   const t = e.links;
@@ -542,35 +542,35 @@ 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 = 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();
+    }), d = {
       labelFontSize: Number(e.labelFontSize ?? 13),
       labelFontWeight: k(String(e.labelFontWeight ?? "400")),
       labelColor: String(e.labelColor ?? "#333333")
-    }, d = O(l, g);
-    return d.trim() ? `<mj-social ${i}>
-${d}
+    }, a = O(r, d);
+    return a.trim() ? `<mj-social ${i}>
+${a}
 </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(
+    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 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;">${c.preview}</span>`, S = u ? `<span style="font-size:${o}px !important;font-weight:${n};color:${s(
+      )}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(
         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
+      )} !important;line-height:1.2;">${p(x)}</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(""), 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>`;
+    }).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>`;
   }
 }), le = h({
   type: "social-group",
@@ -651,35 +651,35 @@ ${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 = 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();
+    }), d = {
       labelFontSize: Number(e.labelFontSize ?? 13),
       labelFontWeight: k(String(e.labelFontWeight ?? "400")),
       labelColor: String(e.labelColor ?? "#333333")
-    }, d = O(l, g);
-    return d.trim() ? `<mj-social ${i}>
-${d}
+    }, a = O(r, d);
+    return a.trim() ? `<mj-social ${i}>
+${a}
 </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(
+    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 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;">${c.preview}</span>`, S = u ? `<span style="font-size:${o}px !important;font-weight:${n};color:${s(
+      )}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(
         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
+      )} !important;line-height:1.2;">${p(x)}</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(""), 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>`;
+    }).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>`;
   }
 }), re = h({
   type: "spacer",
@@ -698,10 +698,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 +711,7 @@ ${d}
   schema: [
     {
       key: "align",
-      label: "默认对齐",
+      label: "对齐",
       type: "select",
       selectVariant: "segmented",
       options: [
@@ -720,14 +720,15 @@ ${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",
+      inheritGlobal: !0,
       options: [...L]
     },
     {
@@ -766,14 +767,12 @@ ${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="${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>`;
   },
   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:${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>`;
   }
 }), ce = [
   ae,
@@ -781,7 +780,7 @@ ${d}
   Y,
   le,
   X,
-  G,
+  q,
   K,
   re
 ], se = [Z, ie, J], ge = [...ce, ...se];
@@ -789,9 +788,9 @@ export {
   te as SOCIAL_NETWORK_OPTIONS,
   ge as allBlocks,
   ce as builtinBlocks,
-  G as buttonBlock,
+  q as buttonBlock,
   K as dividerBlock,
-  s as escAttr,
+  p as escAttr,
   ne as escMjmlText,
   se as exampleCustomBlocks,
   I as flexJustifyFromAlign,
@@ -806,7 +805,7 @@ export {
   ie as socialBlock,
   le as socialGroupBlock,
   V as socialIconBorderRadiusCss,
-  W as socialIconBorderRadiusMjml,
+  N as socialIconBorderRadiusMjml,
   F as socialIconSpacingPx,
   P as socialMeta,
   re as spacerBlock,