mail-editor-pancake 0.2.3 → 0.2.4

package/packages/core/src/editor/Canvas.ts

@@ -286,7 +286,7 @@ export class Canvas {
 
     const { doc } = this.opts.store;
     this.inner.style.maxWidth = docContentWidthCss(doc.meta.width);
-    this.inner.style.background = doc.styles.contentBackgroundColor;
+    this.inner.style.background = doc.styles.backgroundColor;
     this.inner.style.fontFamily = doc.styles.fontFamily;
     this.inner.style.fontSize = doc.styles.fontSize;
     this.inner.style.fontWeight = normalizeFontWeightStep(doc.styles.fontWeight);

package/packages/core/src/editor/Editor.ts

@@ -6,6 +6,7 @@ import type {
   BlockDefinition,
   EditorUiOptions,
   EmailDoc,
+  GlobalStyles,
   RenderEngine,
   Selection,
   Variable,
@@ -273,7 +274,11 @@ export class MailEditor {
 
   setValue(doc: EmailDoc) {
     this._blurRightPanelIfFocused();
-    this.store.replace(doc);
+    // 兼容旧文档：剥离/合并已废弃的 styles.contentBackgroundColor
+    this.store.replace({
+      ...doc,
+      styles: { ...doc.styles, ...migrateLegacyStyles(doc.styles) },
+    });
     this._applyConfiguredVariables();
   }
 
@@ -1224,17 +1229,31 @@ function applyLocalizedDefaultMeta(
   if (source?.meta?.subject == null) doc.meta.subject = t('doc.defaultSubject');
 }
 
+/**
+ * 迁移旧字段 `styles.contentBackgroundColor`（内容背景）→ `backgroundColor`。
+ * 导出产物历史上只认 `backgroundColor`（内容背景从未写进 MJML），因此优先保留它，
+ * 保证已导出/已发送邮件的背景不变；仅在其为空时用内容背景兜底，并丢弃废弃字段，
+ * 避免它随文档回写到宿主持久化存储。
+ */
+function migrateLegacyStyles(styles: Partial<GlobalStyles>): Partial<GlobalStyles> {
+  const legacy = styles as Partial<GlobalStyles> & { contentBackgroundColor?: string };
+  const legacyBg = legacy.contentBackgroundColor;
+  if (legacyBg === undefined) return styles;
+  const { contentBackgroundColor, ...rest } = legacy;
+  const bg = rest.backgroundColor || contentBackgroundColor;
+  return bg ? { ...rest, backgroundColor: bg } : rest;
+}
+
 function createDefaultDoc(partial?: Partial<EmailDoc>): EmailDoc {
   const mergedStyles = {
     backgroundColor: '#ffffff',
-    contentBackgroundColor: '#ffffff',
     fontFamily: 'Inter, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif',
     fontSize: '16px',
     fontWeight: '400',
     color: '#433f3f',
     linkColor: '#ff5a00',
     lineHeight: '1.25',
-    ...(partial?.styles ?? {}),
+    ...migrateLegacyStyles(partial?.styles ?? {}),
   };
   return {
     version: '1',

package/packages/core/src/editor/InlineEditor.ts

@@ -229,6 +229,8 @@ export class InlineEditor {
       richTextExecCommand('styleWithCSS', false, isListCmd ? 'false' : 'true');
       richTextExecCommand(command, false, value);
     }
+    // 链接内改文字色时同步到 <a> 自身：下划线由 <a> 绘制，不同步会出现「线与字异色」
+    if (command === 'foreColor' && value) this._syncAnchorColor(value);
     if (command === 'hiliteColor') {
       this.pendingHiliteColor = value ?? null;
       this.pendingHiliteAnchor = hiliteAnchor;
@@ -306,9 +308,15 @@ export class InlineEditor {
     this._restoreSelection();
   }
 
-  /** 字号：走原生 fontSize 命令（styleWithCSS 下浏览器会写 span），与 foreColor 同类 */
+  /**
+   * 字号：直接写精确 px。
+   * 不能用 `execCommand('fontSize')`——它只接受 1–7 的 legacy 档位，
+   * 浏览器按自己的档位表渲染（如 5→24px、6→32px），回读时 20px 会变成 24px、28px 会变成 32px。
+   */
   applyFontSize(px: string) {
-    this.exec('fontSize', pxToLegacyFontSize(px));
+    const css = normalizeFontSizeCss(px);
+    if (!css) return;
+    this._wrapInlineStyle(`font-size:${css};`);
   }
 
   /**
@@ -316,6 +324,14 @@ export class InlineEditor {
    * 有选区包裹内容；折叠光标插入 typing span，后续输入沿用。
    */
   applyFontWeight(weight: string) {
+    this._wrapInlineStyle(`font-weight:${weight};`);
+  }
+
+  /**
+   * 用 `<span style="...">` 包裹选区写入内联样式。
+   * 有选区则包裹内容并重新选中；折叠光标则插入零宽占位 span，后续输入沿用。
+   */
+  private _wrapInlineStyle(style: string) {
     this.edited = true;
     this._ensureFocus();
     this._restoreSelection();
@@ -324,35 +340,84 @@ export class InlineEditor {
     const range = sel.getRangeAt(0);
     if (!this.el.contains(range.startContainer) || !this.el.contains(range.endContainer)) return;
 
-    if (!range.collapsed) {
-      const span = document.createElement('span');
-      span.setAttribute('style', `font-weight:${weight};`);
-      try {
+    const span = document.createElement('span');
+    span.setAttribute('style', style);
+    try {
+      if (!range.collapsed) {
         span.appendChild(range.extractContents());
         range.insertNode(span);
         const newRange = document.createRange();
         newRange.selectNodeContents(span);
         sel.removeAllRanges();
         sel.addRange(newRange);
-      } catch {
-        return;
+      } else {
+        // 标记 typing 占位：只设了样式却没输入内容时，提交前由 sanitizeRichHtml 拆掉空壳
+        span.setAttribute('data-sm-typing', '1');
+        span.appendChild(document.createTextNode('\u200b'));
+        range.insertNode(span);
+        const caret = document.createRange();
+        caret.setStart(span.firstChild!, 1);
+        caret.collapse(true);
+        sel.removeAllRanges();
+        sel.addRange(caret);
       }
-    } else {
-      const span = document.createElement('span');
-      span.setAttribute('style', `font-weight:${weight};`);
-      span.appendChild(document.createTextNode('\u200b'));
-      range.insertNode(span);
-      const caret = document.createRange();
-      caret.setStart(span.firstChild!, 1);
-      caret.collapse(true);
-      sel.removeAllRanges();
-      sel.addRange(caret);
+    } catch {
+      return;
+    }
+
+    this.saveSelection();
+    this._emitSelection();
+  }
+
+  /**
+   * 下划线：链接内的下划线来自 <a> 自身的（UA 默认）样式。
+   * CSS 里 text-decoration 由祖先向后代传播，**后代无法用 `text-decoration:none` 取消**，
+   * 而 execCommand('underline') 只能写后代 → 链接文字的下划线永远点不掉。
+   * 所以选区在链接内时直接改写 <a> 自己的 text-decoration。
+   */
+  toggleUnderline() {
+    this.edited = true;
+    this._ensureFocus();
+    this._restoreSelection();
+    const sel = window.getSelection();
+    if (!sel || sel.rangeCount === 0) return;
+    const range = sel.getRangeAt(0);
+    if (!this.el.contains(range.startContainer) || !this.el.contains(range.endContainer)) return;
+
+    const anchors = collectAnchorsInRange(range, this.el);
+    if (!anchors.length) {
+      this.exec('underline');
+      return;
+    }
+    // 全部已有下划线则整体关闭，否则整体打开
+    const turnOn = !anchors.every(hasComputedUnderline);
+    for (const a of anchors) {
+      setStyleDecl(a, TEXT_DECORATION_RE, `text-decoration:${turnOn ? 'underline' : 'none'}`);
     }
 
     this.saveSelection();
     this._emitSelection();
   }
 
+  /** 选区内（或折叠光标所在）的 <a> 元素 */
+  private _anchorsAtSelection(): HTMLAnchorElement[] {
+    const sel = window.getSelection();
+    if (!sel || sel.rangeCount === 0) return [];
+    const range = sel.getRangeAt(0);
+    if (!this.el.contains(range.startContainer) || !this.el.contains(range.endContainer)) return [];
+    return collectAnchorsInRange(range, this.el);
+  }
+
+  /**
+   * 把文字色同步到选区所在的 <a>：下划线颜色取 <a> 的 color，
+   * 若内嵌 span 另设 color，会出现「字是 A 色、线是 B 色」且 B 无法通过工具条修改。
+   */
+  private _syncAnchorColor(color: string): void {
+    for (const a of this._anchorsAtSelection()) {
+      setStyleDecl(a, COLOR_RE, `color:${color}`);
+    }
+  }
+
   /** 内联编辑根节点（如 `.sm-text-content`）的盒模型矩形，供富文本条贴在正文区域外沿定位 */
   getAnchorRect(): DOMRect {
     return this.el.getBoundingClientRect();
@@ -675,7 +740,7 @@ export class InlineEditor {
       formats: {
         bold: richTextQueryCommandState('bold'),
         italic: richTextQueryCommandState('italic'),
-        underline: richTextQueryCommandState('underline'),
+        underline: resolveUnderlineAtSelection(this.el, sel),
         strikethrough: richTextQueryCommandState('strikeThrough'),
         unorderedList:
           listFormats.unorderedList || richTextQueryCommandState('insertUnorderedList'),
@@ -794,6 +859,53 @@ function resolveInlineFormatsAtSelection(
   return { fontSize, fontWeight, foreColor, backColor };
 }
 
+const TEXT_DECORATION_RE = /^text-decoration(-line)?\s*:/i;
+const COLOR_RE = /^color\s*:/i;
+
+/** 选区内（折叠光标则取其所在）的 <a> 元素 */
+function collectAnchorsInRange(range: Range, root: HTMLElement): HTMLAnchorElement[] {
+  const found = new Set<HTMLAnchorElement>();
+  if (range.collapsed) {
+    const node = range.startContainer;
+    const el = node.nodeType === Node.TEXT_NODE ? node.parentElement : (node as HTMLElement);
+    const a = el?.closest('a') ?? null;
+    if (a && root.contains(a)) found.add(a);
+  } else {
+    for (const a of Array.from(root.querySelectorAll('a'))) {
+      if (range.intersectsNode(a)) found.add(a);
+    }
+  }
+  return [...found];
+}
+
+/** 元素当前是否真的有下划线（含 UA 默认、CSS 规则、inline style） */
+function hasComputedUnderline(el: HTMLElement): boolean {
+  const line = window.getComputedStyle(el).textDecorationLine || '';
+  return /(^|\s)underline(\s|$)/.test(line);
+}
+
+/** 替换（无则追加）style 中匹配 propRe 的那条声明 */
+function setStyleDecl(el: HTMLElement, propRe: RegExp, decl: string): void {
+  const raw = (el.getAttribute('style') ?? '').trim();
+  const kept = raw
+    .split(';')
+    .map((s) => s.trim())
+    .filter((s) => s && !propRe.test(s))
+    .join(';');
+  el.setAttribute('style', kept ? `${kept};${decl}` : decl);
+}
+
+/**
+ * 下划线状态：链接内的下划线由 <a> 决定，execCommand 的状态查询读不到它，
+ * 会出现「看着有线、按钮却是未激活」→ 点了没反应。故链接内以 <a> 的 computed 为准。
+ */
+function resolveUnderlineAtSelection(root: HTMLElement, sel: Selection): boolean {
+  const host = selectionHostElement(sel, root);
+  const a = host?.closest('a') ?? null;
+  if (a && root.contains(a)) return hasComputedUnderline(a);
+  return richTextQueryCommandState('underline');
+}
+
 /** 光标处文字色（foreColor / 链接局部 color；queryCommandValue 在 <a> 内常不准） */
 function resolveForeColorAtSelection(root: HTMLElement, host: HTMLElement): string | null {
   for (let el: HTMLElement | null = host; el && root.contains(el) && el !== root; el = el.parentElement) {
@@ -851,44 +963,13 @@ function selectionAnchorKey(range: Range): string {
   return `${range.startContainer.nodeType}:${range.startOffset}:${range.endContainer.nodeType}:${range.endOffset}`;
 }
 
-/** execCommand fontSize 只认 1–7，与工具条 px 互转 */
-function pxToLegacyFontSize(px: string): string {
-  const map: Record<string, string> = {
-    '10px': '1',
-    '12px': '2',
-    '13px': '3',
-    '14px': '3',
-    '15px': '4',
-    '16px': '4',
-    '18px': '4',
-    '20px': '5',
-    '24px': '6',
-    '28px': '6',
-    '32px': '7',
-  };
-  const key = px.trim().toLowerCase();
-  if (map[key]) return map[key];
-  const num = parseFloat(key);
-  if (Number.isNaN(num)) return '4';
-  const steps: [number, string][] = [
-    [10, '1'],
-    [12, '2'],
-    [14, '3'],
-    [16, '4'],
-    [20, '5'],
-    [24, '6'],
-    [32, '7'],
-  ];
-  let best = '4';
-  let bestD = Infinity;
-  for (const [size, legacy] of steps) {
-    const d = Math.abs(size - num);
-    if (d < bestD) {
-      bestD = d;
-      best = legacy;
-    }
-  }
-  return best;
+/** 工具条传入的 `28px` / `28` 规范成 CSS 值；非法返回 ''（调用方忽略） */
+function normalizeFontSizeCss(px: string): string {
+  const m = /^(\d+(?:\.\d+)?)(px)?$/i.exec((px ?? '').trim());
+  if (!m) return '';
+  const n = Number.parseFloat(m[1]);
+  if (!Number.isFinite(n) || n <= 0) return '';
+  return `${Math.min(96, Math.max(8, n))}px`;
 }
 
 function isTransparentColor(c: string): boolean {
@@ -926,6 +1007,7 @@ export function sanitizeRichHtml(html: string): string {
   const tpl = document.createElement('template');
   tpl.innerHTML = html;
   walk(tpl.content);
+  mergeRedundantSpans(tpl.content);
   return tpl.innerHTML.replace(/\u200b/g, '');
 
   function walk(root: Node) {
@@ -938,6 +1020,15 @@ export function sanitizeRichHtml(html: string): string {
         el.remove();
         return;
       }
+      // 只改了字号/字重却没输入内容的 typing 占位 span：零宽字符剥掉后是空壳，拆掉避免进邮件
+      if (tag === 'span' && el.getAttribute('data-sm-typing') === '1') {
+        const text = (el.textContent ?? '').replace(/\u200b/g, '');
+        if (text.length === 0 && !el.querySelector('br, img')) {
+          while (el.firstChild) el.parentNode?.insertBefore(el.firstChild, el);
+          el.remove();
+          return;
+        }
+      }
       // <font color="..." size="..." face="..."> → 转成 span style
       if (tag === 'font') {
         const span = document.createElement('span');
@@ -1009,6 +1100,35 @@ export function sanitizeRichHtml(html: string): string {
   }
 }
 
+/**
+ * 合并 style/class 完全相同的父子 span：反复改字号/字重会套出多层同义 span，
+ * 渲染结果一样但 HTML 变胖（逼近 Gmail 102KB 截断）。合并后内层子节点上提。
+ */
+function mergeRedundantSpans(root: ParentNode): void {
+  for (let pass = 0; pass < 5; pass++) {
+    let changed = false;
+    for (const el of Array.from(root.querySelectorAll('span'))) {
+      const parent = el.parentElement;
+      if (!parent || parent.tagName.toLowerCase() !== 'span') continue;
+      if (spanIdentity(parent) !== spanIdentity(el)) continue;
+      while (el.firstChild) parent.insertBefore(el.firstChild, el);
+      el.remove();
+      changed = true;
+    }
+    if (!changed) break;
+  }
+}
+
+/** span 的样式身份：class + 规范化后的 style，用于判断是否可合并 */
+function spanIdentity(el: Element): string {
+  const style = (el.getAttribute('style') ?? '')
+    .replace(/\s+/g, ' ')
+    .trim()
+    .toLowerCase()
+    .replace(/;+$/, '');
+  return `${(el.getAttribute('class') ?? '').trim()} ${style}`;
+}
+
 function hasMarginStyle(el: Element): boolean {
   const style = el.getAttribute('style') ?? '';
   return /(?:^|;)\s*margin(?:-(?:top|right|bottom|left))?\s*:/i.test(style);
@@ -1020,15 +1140,17 @@ function appendStyle(el: Element, style: string) {
 }
 
 function fontSizeFromLegacy(size: string): string {
-  // 旧 <font size="1..7"> → px 近似
+  // 旧 <font size="1..7"> → px。必须用浏览器实际渲染 legacy 档位的那张表
+  // （与 HTML 规范建议值一致：1=10, 2=13, 3=16, 4=18, 5=24, 6=32, 7=48），
+  // 否则编辑器里看到的字号与提交进邮件的字号不一致（如 size=5 显示 24px 却存成 20px）。
   const map: Record<string, string> = {
     '1': '10px',
-    '2': '12px',
-    '3': '14px',
-    '4': '16px',
-    '5': '20px',
-    '6': '24px',
-    '7': '32px',
+    '2': '13px',
+    '3': '16px',
+    '4': '18px',
+    '5': '24px',
+    '6': '32px',
+    '7': '48px',
   };
   return map[size] ?? size;
 }

package/packages/core/src/editor/RichTextToolbar.ts

@@ -40,7 +40,20 @@ const FONT_FAMILIES = [
   { label: 'Courier', value: '"Courier New", monospace' },
 ];
 
-const FONT_SIZES = ['12px', '13px', '14px', '15px', '16px', '18px', '20px', '24px', '28px', '32px'];
+/** 末位 48px 对应遗留 `<font size="7">`，见 InlineEditor.fontSizeFromLegacy */
+const FONT_SIZES = [
+  '12px',
+  '13px',
+  '14px',
+  '15px',
+  '16px',
+  '18px',
+  '20px',
+  '24px',
+  '28px',
+  '32px',
+  '48px',
+];
 
 export class RichTextToolbar {
   el: HTMLElement;
@@ -159,7 +172,8 @@ export class RichTextToolbar {
 
     this.btns.bold = this._btn('B', t('toolbar.bold'), exec('bold'), { fontWeight: '700' });
     this.btns.italic = this._btn('I', t('toolbar.italic'), exec('italic'), { fontStyle: 'italic' });
-    this.btns.underline = this._btn('U', t('toolbar.underline'), exec('underline'), {
+    // 链接内的下划线归 <a> 管，走专用实现；非链接文本回落到 execCommand
+    this.btns.underline = this._btn('U', t('toolbar.underline'), () => this.editor?.toggleUnderline(), {
       textDecoration: 'underline',
     });
     this.btns.strikethrough = this._btn('S', t('toolbar.strikethrough'), exec('strikeThrough'), {

package/packages/core/src/editor/RightPanel.ts

@@ -395,15 +395,6 @@ export class RightPanel {
           }),
         'doc:styles.backgroundColor',
       ),
-      this._colorField(
-        this.opts.t('rightPanel.doc.contentBackground'),
-        doc.styles.contentBackgroundColor,
-        (v) =>
-          this.opts.store.update((d) => {
-            d.styles.contentBackgroundColor = v;
-          }),
-        'doc:styles.contentBackgroundColor',
-      ),
       this._textField(
         this.opts.t('rightPanel.doc.fontFamily'),
         doc.styles.fontFamily,

package/packages/core/src/i18n/index.ts

@@ -108,7 +108,6 @@ export const zhCNMessages: SimpleMailMessages = {
   'rightPanel.doc.contentWidthPlaceholder': '如 600、600px、100%',
   'rightPanel.doc.globalStyles': '全局样式',
   'rightPanel.doc.pageBackground': '页面背景',
-  'rightPanel.doc.contentBackground': '内容背景',
   'rightPanel.doc.fontFamily': '字体',
   'rightPanel.doc.lineHeight': '行高',
   'rightPanel.doc.lineHeightPlaceholder': '如 1.25 或 24px',
@@ -417,7 +416,6 @@ export const enUSMessages: SimpleMailMessages = {
   'rightPanel.doc.contentWidthPlaceholder': 'e.g. 600, 600px, or 100%',
   'rightPanel.doc.globalStyles': 'Global styles',
   'rightPanel.doc.pageBackground': 'Page background',
-  'rightPanel.doc.contentBackground': 'Content background',
   'rightPanel.doc.fontFamily': 'Font family',
   'rightPanel.doc.lineHeight': 'Line height',
   'rightPanel.doc.lineHeightPlaceholder': 'e.g. 1.25 or 24px',

package/packages/core/src/types.ts

@@ -24,8 +24,12 @@ export interface EmailMeta {
 }
 
 export interface GlobalStyles {
+  /**
+   * 邮件背景色：导出时写入 `<mj-body background-color>`，画布内容纸取同一值。
+   * 旧字段 `contentBackgroundColor`（内容背景）已废弃并合并到此处，
+   * 由 `createDefaultDoc` 在读入旧文档时迁移。
+   */
   backgroundColor: string;
-  contentBackgroundColor: string;
   fontFamily: string;
   fontSize: string;
   /** 全局字重：数值档 300 | 400 | 500 | 600 | 700（兼容读写 normal / bold 等别名） */