mail-editor-pancake 0.2.3 → 0.2.6

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/LeftPanel.ts

@@ -2,6 +2,7 @@ import Sortable from 'sortablejs';
 import type { Registry } from '../registry/registry';
 import type { BlockDefinition, SectionLayout } from '../types';
 import { clear, h } from '../utils/dom';
+import { paletteDropIsSectionLevel } from '../utils/paletteDrop';
 import type { SimpleMailT } from '../i18n';
 
 export interface LeftPanelOptions {
@@ -13,6 +14,8 @@ export interface LeftPanelOptions {
   customPaletteTooltipSuffix?: string;
   /** 不显示在左栏的 block type（仍可在 Registry 中 createBlock） */
   hiddenPaletteBlockTypes?: string[];
+  /** 与画布一致：开启后带 `sectionAttrs.dynamicVariantKey` 的组合块会创建独立 Section */
+  enableDynamicVariantKey?: boolean;
 }
 
 interface LayoutCard {
@@ -66,14 +69,33 @@ export class LeftPanel {
       ...filterPalette(this.opts.registry.byCategory('custom')),
     ];
 
+    /** 自带布局的组件与布局卡片同组，拖拽时只能落在 Section 之间（见 paletteDropIsSectionLevel） */
+    const sectionLevel: BlockDefinition[] = [];
+    const blockLevel: BlockDefinition[] = [];
+    const dropOpts = { enableDynamicVariantKey: this.opts.enableDynamicVariantKey };
+    for (const def of paletteBlocks) {
+      if (paletteDropIsSectionLevel(def, this.opts.registry, dropOpts)) sectionLevel.push(def);
+      else blockLevel.push(def);
+    }
+
     const wrap = h('div', { class: 'sm-blocks' });
 
     wrap.append(this._renderLayoutGroup());
-    if (paletteBlocks.length) {
+    if (sectionLevel.length) {
       wrap.append(
-        this._renderBlockGroup(
+        this._renderBlockCardsGroup(
+          this.opts.t('leftPanel.sectionBlocks'),
+          sectionLevel,
+          'sections',
+        ),
+      );
+    }
+    if (blockLevel.length) {
+      wrap.append(
+        this._renderBlockCardsGroup(
           this.opts.blockGroupTitle ?? this.opts.t('leftPanel.components'),
-          paletteBlocks,
+          blockLevel,
+          'blocks',
         ),
       );
     }
@@ -125,7 +147,16 @@ export class LeftPanel {
     return def.name;
   }
 
-  private _renderBlockGroup(title: string, defs: BlockDefinition[]): HTMLElement {
+  /**
+   * 组件卡片网格。`sourceGroup` 决定画布哪一层接收：
+   *  - `blocks`：列内（Column）；
+   *  - `sections`：Section 之间（自带布局的组件，表现与布局卡片一致）。
+   */
+  private _renderBlockCardsGroup(
+    title: string,
+    defs: BlockDefinition[],
+    sourceGroup: 'blocks' | 'sections',
+  ): HTMLElement {
     const grid = h('div', { class: 'sm-blocks__grid' });
     for (const def of defs) {
       const isCustom = def.category === 'custom';
@@ -141,8 +172,11 @@ export class LeftPanel {
         h(
           'div',
           {
-            class: 'sm-block-card',
-            'data-source-group': 'blocks',
+            class:
+              sourceGroup === 'sections'
+                ? 'sm-block-card sm-block-card--section'
+                : 'sm-block-card',
+            'data-source-group': sourceGroup,
             'data-block-type': def.type,
             title: this._blockCardTitle(def),
           },
@@ -151,7 +185,7 @@ export class LeftPanel {
       );
     }
     Sortable.create(grid, {
-      group: { name: 'blocks', pull: 'clone', put: false },
+      group: { name: sourceGroup, pull: 'clone', put: false },
       sort: false,
       animation: 120,
       ghostClass: 'sm-ghost',

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

@@ -3,6 +3,7 @@ import { html as cmHtml } from '@codemirror/lang-html';
 import { EditorState } from '@codemirror/state';
 import type { Registry } from '../registry/registry';
 import { htmlContainsMjmlTags } from '../utils/lockedMjml';
+import { invalidHrefMessage } from '../utils/link';
 import {
   findBlockLocation,
   findSection,
@@ -395,15 +396,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,
@@ -732,6 +724,8 @@ export class RightPanel {
           onChange,
           field.placeholder ?? '',
           fp,
+          field.validate ??
+            (field.type === 'url' ? (v: string) => invalidHrefMessage(v, this.opts.t) : undefined),
         );
         if (field.help) row.append(h('div', { class: 'sm-field__help' }, [field.help]));
         return row;
@@ -850,14 +844,25 @@ export class RightPanel {
         opt.selected = true;
         sel.insertBefore(opt, sel.firstChild);
       }
+      const hrefWarnEl = h('div', { class: 'sm-field__warn', style: 'display:none' });
+      const syncHrefWarn = (v: string) => {
+        const msg = invalidHrefMessage(v, this.opts.t);
+        hrefWarnEl.textContent = msg ?? '';
+        hrefWarnEl.style.display = msg ? '' : 'none';
+      };
       const inp = h('input', {
         class: 'sm-input sm-social-link-list__href',
         type: 'url',
         placeholder: 'https://',
         value: rowData.href,
         ...(focusPrefix ? { 'data-sm-focus': `${focusPrefix}:row:${i}:href` } : {}),
-        oninput: (e: Event) => syncItem(i, { href: (e.target as HTMLInputElement).value }),
+        oninput: (e: Event) => {
+          const v = (e.target as HTMLInputElement).value;
+          syncItem(i, { href: v });
+          syncHrefWarn(v);
+        },
       });
+      syncHrefWarn(rowData.href);
       const rm = h(
         'button',
           {
@@ -869,7 +874,7 @@ export class RightPanel {
         ['×'],
       );
       mainRow.append(sel, inp, rm);
-      rowWrap.append(mainRow);
+      rowWrap.append(mainRow, hrefWarnEl);
 
       const extras = h('div', { class: 'sm-social-link-list__row-extras' });
       const bgResolved = defaultSocialIconBackground(rowData.network);
@@ -943,7 +948,16 @@ export class RightPanel {
     onChange: (v: string) => void,
     placeholder = '',
     focusToken?: string,
+    validate?: (v: string) => string | null,
   ) {
+    const warnEl = h('div', { class: 'sm-field__warn', style: 'display:none' });
+    const syncWarn = (v: string) => {
+      if (!validate) return;
+      const msg = validate(v);
+      warnEl.textContent = msg ?? '';
+      warnEl.style.display = msg ? '' : 'none';
+    };
+    syncWarn(value);
     return h('div', { class: 'sm-field' }, [
       h('label', { class: 'sm-field__label' }, [label]),
       h('input', {
@@ -952,8 +966,13 @@ export class RightPanel {
         value,
         placeholder,
         ...(focusToken ? { 'data-sm-focus': focusToken } : {}),
-        oninput: (e: Event) => onChange((e.target as HTMLInputElement).value),
+        oninput: (e: Event) => {
+          const v = (e.target as HTMLInputElement).value;
+          onChange(v);
+          syncWarn(v);
+        },
       }),
+      warnEl,
     ]);
   }
 

package/packages/core/src/editor/styles.css

@@ -638,6 +638,10 @@
   font-size: 12px;
   color: var(--sm-text);
 }
+/* 自带布局的组件：与布局卡片同组，落点在 Section 之间而非列内 */
+.sm-block-card--section {
+  border-style: dashed;
+}
 
 /* 中栏：画布 ------------------------------------------------------------- */
 .sm-canvas-wrap {

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

@@ -75,6 +75,7 @@ export const zhCNMessages: SimpleMailMessages = {
   'topbar.exitFullscreen': '退出全屏',
   'leftPanel.layout': '布局',
   'leftPanel.components': '组件',
+  'leftPanel.sectionBlocks': '组合布局',
   'leftPanel.customTooltipSuffix': 'Navimow 定制组件，拖入列内使用',
   'leftPanel.oneColumn': '一列',
   'leftPanel.multiColumn': '多列',
@@ -100,6 +101,7 @@ export const zhCNMessages: SimpleMailMessages = {
   'rightPanel.block.restoreProps': '恢复为属性模式',
   'rightPanel.block.unregistered': '未注册的组件: {type}',
   'rightPanel.block.mjmlWarning': '检测到 MJML 标签（如 <mj-text>）。此处应只写 HTML，否则预览会显示源码。简单链接请用「文本」块。',
+  'rightPanel.block.invalidLink': '该链接无法跳转（如 1234、#、缺少 https://）。Outlook 网页端会清除此类链接，导致按钮/图标不可见。',
   'rightPanel.doc.title': '邮件设置',
   'rightPanel.doc.layoutTitle': '版式',
   'rightPanel.doc.subject': '主题',
@@ -108,7 +110,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',
@@ -384,6 +385,7 @@ export const enUSMessages: SimpleMailMessages = {
   'topbar.exitFullscreen': 'Exit fullscreen',
   'leftPanel.layout': 'Layout',
   'leftPanel.components': 'Components',
+  'leftPanel.sectionBlocks': 'Layout Blocks',
   'leftPanel.customTooltipSuffix': 'Custom Navimow block. Drag it into a column.',
   'leftPanel.oneColumn': 'One column',
   'leftPanel.multiColumn': 'Columns',
@@ -409,6 +411,7 @@ export const enUSMessages: SimpleMailMessages = {
   'rightPanel.block.restoreProps': 'Restore property mode',
   'rightPanel.block.unregistered': 'Unregistered block: {type}',
   'rightPanel.block.mjmlWarning': 'MJML tags were detected, such as <mj-text>. Write HTML only here, otherwise the preview will show source code. Use a Text block for simple links.',
+  'rightPanel.block.invalidLink': 'This link is not navigable (e.g. 1234, #, or a URL without https://). Outlook on the web removes such links, which makes the button or icon invisible.',
   'rightPanel.doc.title': 'Email settings',
   'rightPanel.doc.layoutTitle': 'Layout',
   'rightPanel.doc.subject': 'Subject',
@@ -417,7 +420,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/index.ts

@@ -21,6 +21,12 @@ export {
   resolveLockedMjmlCanvasContent,
 } from './utils/lockedMjml';
 export { renderDoc, replaceVariables } from './renderer';
+export { isRenderableHref, resolveHref, invalidHrefMessage } from './utils/link';
+export {
+  paletteDropHasSectionLayout,
+  paletteDropIsSectionLevel,
+  resolvePaletteDropResult,
+} from './utils/paletteDrop';
 export { annotateDynamicVariantHtmlAttributes } from './utils/dynamicVariantHtml';
 export {
   DYNAMIC_VARIANT_HTML_ATTR,

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

@@ -6,6 +6,7 @@ import {
   normalizeEmailListsInHtml,
   resolveGlobalListIndentPx,
 } from '../utils/emailListStyles';
+import { inlineColumnWidthsInHtml } from '../utils/columnWidths';
 import { docToMjml } from './mjml';
 
 export interface RenderResult {
@@ -45,6 +46,7 @@ export function renderDoc(
 
   let html = compiled.html;
   html = annotateDynamicVariantHtmlAttributes(html, doc);
+  html = inlineColumnWidthsInHtml(html);
   html = normalizeEmailListsInHtml(html, resolveGlobalListIndentPx(doc.styles));
   if (opts.withSampleVariables) {
     html = replaceVariables(html, doc.variables);