mail-editor-pancake 0.2.4 → 0.2.7

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/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,
@@ -723,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;
@@ -841,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',
           {
@@ -860,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);
@@ -934,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', {
@@ -943,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': '主题',
@@ -383,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',
@@ -408,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',

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);

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

@@ -2,6 +2,7 @@ import type { Registry } from '../registry/registry';
 import type { Column, EmailDoc, RenderContext, Section, SectionLayout } from '../types';
 import { getSectionDynamicVariantKey, sectionMjClassName } from '../utils/dynamicVariantKey';
 import { blockButtonWidthCss, docContentWidthCss } from '../utils/contentWidth';
+import { COLUMN_NO_STACK_CLASS } from '../utils/columnWidths';
 import { escapeAttr } from '../utils/dom';
 import { normalizeFontWeightStep } from '../utils/fontWeightSteps';
 import {
@@ -69,7 +70,7 @@ function sectionWidthConstraintCss(doc: EmailDoc): string {
  * 断点取 MJML 默认堆叠断点 480px；!important 用于覆盖行内样式。
  * 仅对会小屏堆叠的列生效；mj-group（preserveColumnsOnMobile）不堆叠，不注入。
  */
-const COLUMN_GAP_MOBILE_BREAKPOINT = 480;
+const COLUMN_GAP_MOBILE_BREAKPOINT = 479;
 
 function columnGapClassName(sectionId: string): string {
   return `${sectionMjClassName(sectionId)}-cg`;
@@ -136,6 +137,10 @@ function sectionToMjml(section: Section, registry: Registry, ctx: RenderContext)
       : '';
   const lastIndex = section.columns.length - 1;
 
+  const multiCol = section.columns.length > 1;
+  /** 多列 + 显式开启「移动端保留列」时包 mj-group，其列任何宽度下都不堆叠 */
+  const preserveColumns = multiCol && section.attrs.preserveColumnsOnMobile === true;
+
   const columns = section.columns
     .map((col, i) =>
       columnToMjml(
@@ -144,7 +149,13 @@ function sectionToMjml(section: Section, registry: Registry, ctx: RenderContext)
         i,
         section.columns.length,
         gapPx,
-        [hCls, vCls && i < lastIndex ? vCls : ''].filter(Boolean).join(' '),
+        [
+          hCls,
+          vCls && i < lastIndex ? vCls : '',
+          preserveColumns ? COLUMN_NO_STACK_CLASS : '',
+        ]
+          .filter(Boolean)
+          .join(' '),
         registry,
         ctx,
       ),
@@ -152,11 +163,9 @@ function sectionToMjml(section: Section, registry: Registry, ctx: RenderContext)
     .join('\n');
 
   /** 多列 + 显式开启时包 mj-group，阻止小屏列堆叠（MJML 官方语义） */
-  const multiCol = section.columns.length > 1;
-  const grouped =
-    multiCol && section.attrs.preserveColumnsOnMobile === true
-      ? `      <mj-group>\n${indent(columns, 2)}\n      </mj-group>`
-      : columns;
+  const grouped = preserveColumns
+    ? `      <mj-group>\n${indent(columns, 2)}\n      </mj-group>`
+    : columns;
 
   return `    <mj-section padding="${padding}"${bg}${secCls}>
 ${grouped}

package/packages/core/src/types.ts

@@ -163,6 +163,13 @@ export interface BlockSchemaField {
   step?: number;
   placeholder?: string;
   help?: string;
+  /**
+   * 输入即时校验：返回文案则在字段下方红字提示，返回 null 表示通过。
+   * 只提示、不阻塞保存（运营可能故意留占位链接或使用短链）。
+   * `type: 'url'` 未设置时使用内核默认规则（见 `isRenderableHref`），
+   * 拦截 `#`、`1234`、缺协议的域名等会被 Outlook 网页端清除的链接。
+   */
+  validate?: (value: string) => string | null;
   /** 为 true 时右栏显示「继承全局」开关：开=留空跟随邮件全局，关=写入当前全局值为块级固定值 */
   inheritGlobal?: boolean;
 }
@@ -196,6 +203,13 @@ export interface BlockDefinition<P extends object = Record<string, unknown>> {
    * 在用户提交时按 `mode` 写回 props（rich：清理后的 innerHTML；html：原始 innerHTML；plain：textContent）。
    */
   inlineEditable?: InlineEditableConfig<P>;
+  /**
+   * 左栏拖入层级：
+   *  - `section`：自带布局（如双列卡组），与布局卡片同组，只能落在 Section 之间，不能落进 Column；
+   *  - `block`：落在 Column 内（默认）。
+   * 缺省时按 `expandPaletteDrop` 结果自动判定（多列布局 / 多列分发即视为 `section`）。
+   */
+  paletteDropLevel?: 'block' | 'section';
   /**
    * 从左栏拖入时在目标列（或自动包裹的单列 Section）中一次性插入多个块，
    * 用于「组合模板」：画布内仅为通用 image/text 等，便于逐项修改。

package/packages/core/src/utils/columnWidths.ts

@@ -0,0 +1,157 @@
+/**
+ * 列宽内联化（编译后处理）。
+ *
+ * MJML 的多列布局是「行内移动端宽度 + 媒体查询桌面宽度」两段式：
+ * 列 div 的行内样式写死 `width:100%`，桌面宽度由
+ * `@media only screen and (min-width:480px) { .mj-column-per-50 { width:50% !important; } }` 提供。
+ *
+ * 但部分邮件客户端与网页邮箱（临时邮箱预览、部分 sanitize 过度的转发页面等）会剥离
+ * `<style>` 与 `class`，媒体查询随之失效，行内的 `width:100%` 就会让多列退化成纵向堆叠。
+ *
+ * 这里把媒体查询里的列宽写成行内样式：
+ *  - 支持 `<style>` 的客户端：媒体查询带 `!important`，优先级高于行内样式，行为与之前完全一致；
+ *  - 剥离 `<style>` 的客户端：行内宽度兜底，至少保住多列布局。
+ *
+ * 同时补一条小屏重置规则（仅作用于本次内联过、且不在 mj-group 内的列），
+ * 让支持 `<style>` 的客户端在 480px 以下仍然按 MJML 原语义堆叠。
+ */
+import { serializeParsedHtmlDocument } from './html';
+
+/** 与 MJML 默认堆叠断点（min-width:480px）互补的小屏断点 */
+const MOBILE_STACK_BREAKPOINT = 479;
+
+/** 打在「已内联宽度、且需要小屏堆叠」的列上 */
+const STACKABLE_COLUMN_CLASS = 'sm-stack-col';
+
+/**
+ * 打在 mj-group（移动端保留列）内的 mj-column 上。
+ * 这类列任何宽度下都不堆叠，因此不参与小屏重置。
+ */
+export const COLUMN_NO_STACK_CLASS = 'sm-nostack';
+
+interface ColumnWidthRule {
+  width: string;
+  maxWidth?: string;
+}
+
+/** 行内 style 中是否已有 width / max-width 声明 */
+const WIDTH_DECL_RE = /(?:^|;)\s*width\s*:/i;
+const MAX_WIDTH_DECL_RE = /(?:^|;)\s*max-width\s*:/i;
+
+function firstDeclaration(block: string, prop: string): string | undefined {
+  const m = new RegExp(`(?:^|;)\\s*${prop}\\s*:\\s*([^;]+)`, 'i').exec(block);
+  if (!m) return undefined;
+  return m[1].replace(/!\s*important/gi, '').trim();
+}
+
+/** 从编译产物 head 的 CSS 里抽取 `.mj-column-per-XX { width/ max-width }` 规则 */
+function parseColumnWidthRules(css: string): Map<string, ColumnWidthRule> {
+  const rules = new Map<string, ColumnWidthRule>();
+  if (!css) return rules;
+
+  const ruleRe = /\.mj-column-per-([^\s,{]+)\s*\{([^}]*)\}/g;
+  let match = ruleRe.exec(css);
+  while (match) {
+    const width = firstDeclaration(match[2], 'width');
+    if (!width) {
+      match = ruleRe.exec(css);
+      continue;
+    }
+    const className = `mj-column-per-${match[1]}`;
+    if (!rules.has(className)) {
+      rules.set(className, { width, maxWidth: firstDeclaration(match[2], 'max-width') });
+    }
+    match = ruleRe.exec(css);
+  }
+  return rules;
+}
+
+function collectStyleText(parsed: Document): string {
+  return Array.from(parsed.querySelectorAll('style'))
+    .map((s) => s.textContent || '')
+    .join('\n');
+}
+
+/** 行内样式里已写明宽度且不是 100% 时（如 mj-group 内的列）保持原样 */
+function applyColumnWidth(el: Element, rule: ColumnWidthRule): boolean {
+  const style = el.getAttribute('style') || '';
+  const currentWidth = firstDeclaration(style, 'width')?.toLowerCase();
+  if (currentWidth && currentWidth !== '100%') return false;
+
+  let next = style;
+  if (WIDTH_DECL_RE.test(next)) {
+    // 保留前导的 `;`，否则会吞掉上一条声明的分隔符
+    next = next.replace(/((?:^|;)\s*)width\s*:\s*[^;]*/i, `$1width:${rule.width}`);
+  } else {
+    const base = next.trim().replace(/;+$/, '');
+    next = base ? `${base};width:${rule.width}` : `width:${rule.width}`;
+  }
+
+  if (rule.maxWidth) {
+    if (MAX_WIDTH_DECL_RE.test(next)) {
+      next = next.replace(/((?:^|;)\s*)max-width\s*:\s*[^;]*/i, `$1max-width:${rule.maxWidth}`);
+    } else {
+      next = `${next};max-width:${rule.maxWidth}`;
+    }
+  }
+
+  next = next.replace(/;{2,}/g, ';').replace(/^\s*;/, '');
+
+  if (next === style) return false;
+  el.setAttribute('style', next);
+  return true;
+}
+
+function appendStackResetRule(parsed: Document): void {
+  const style = parsed.createElement('style');
+  style.setAttribute('type', 'text/css');
+  style.textContent = `\n      @media only screen and (max-width:${MOBILE_STACK_BREAKPOINT}px) {\n        .${STACKABLE_COLUMN_CLASS} { width:100% !important; max-width:100% !important; }\n      }\n    `;
+  parsed.head.appendChild(style);
+}
+
+/**
+ * 把 MJML 媒体查询中的列宽内联到列元素上，避免 `<style>` / `class` 被剥离后多列纵向堆叠。
+ * 无法解析 HTML 或未找到列宽规则时原样返回。
+ */
+export function inlineColumnWidthsInHtml(html: string): string {
+  let parsed: Document;
+  try {
+    parsed = new DOMParser().parseFromString(html, 'text/html');
+  } catch {
+    return html;
+  }
+
+  const rules = parseColumnWidthRules(collectStyleText(parsed));
+  if (!rules.size) return html;
+
+  let changed = false;
+  let stackable = false;
+
+  for (const el of Array.from(parsed.querySelectorAll('[class]'))) {
+    const classes = (el.getAttribute('class') || '').split(/\s+/).filter(Boolean);
+    if (!classes.length) continue;
+
+    let matched: ColumnWidthRule | undefined;
+    for (const c of classes) {
+      const rule = rules.get(c);
+      if (rule) {
+        matched = rule;
+        break;
+      }
+    }
+    if (!matched) continue;
+
+    if (!applyColumnWidth(el, matched)) continue;
+    changed = true;
+
+    if (!classes.includes(COLUMN_NO_STACK_CLASS)) {
+      el.classList.add(STACKABLE_COLUMN_CLASS);
+      stackable = true;
+    }
+  }
+
+  if (!changed) return html;
+  if (stackable) appendStackResetRule(parsed);
+
+  return serializeParsedHtmlDocument(parsed, html);
+}

package/packages/core/src/utils/dynamicVariantHtml.ts

@@ -1,4 +1,5 @@
 import type { EmailDoc } from '../types';
+import { serializeParsedHtmlDocument } from './html';
 import {
   DYNAMIC_VARIANT_HTML_ATTR,
   getSectionDynamicVariantKey,
@@ -6,12 +7,6 @@ import {
   sectionMjClassName,
 } from './dynamicVariantKey';
 
-function serializeParsedHtml(doc: Document): string {
-  const head = doc.head?.innerHTML || '';
-  const body = doc.body?.innerHTML || '';
-  return `${head}${body}`;
-}
-
 /**
  * 编译后为带 `dynamicVariantKey` 的 Section 根节点写入 `data-dv="{key}"`，供宿主 DOM 抽取。
  */
@@ -38,7 +33,7 @@ export function annotateDynamicVariantHtmlAttributes(html: string, doc: EmailDoc
       if (!target && candidates.length) target = candidates[0];
       if (target) target.setAttribute(DYNAMIC_VARIANT_HTML_ATTR, key);
     }
-    return serializeParsedHtml(parsed);
+    return serializeParsedHtmlDocument(parsed, html);
   } catch {
     return html;
   }

package/packages/core/src/utils/html.ts

@@ -1,3 +1,34 @@
+import { escapeAttr } from './dom';
+
+function openTagOf(el: Element | null): string {
+  if (!el) return '';
+  const tag = el.tagName.toLowerCase();
+  const attrs = Array.from(el.attributes)
+    .map((a) => ` ${a.name}="${escapeAttr(a.value)}"`)
+    .join('');
+  return `<${tag}${attrs}>`;
+}
+
+/**
+ * 把解析后的文档还原成字符串，尽量保留原文档的 DOCTYPE、`<html>` 与 `<body>` 开标签属性
+ * （`head.innerHTML + body.innerHTML` 会丢掉这三者）。
+ * 原文档是片段（没有 html / body 标签）时退化为片段拼接。
+ */
+export function serializeParsedHtmlDocument(doc: Document, original: string): string {
+  const head = doc.head?.innerHTML || '';
+  const bodyInner = doc.body?.innerHTML || '';
+
+  const hasHtml = /<html[\s>]/i.test(original);
+  const hasBody = /<body[\s>]/i.test(original);
+
+  if (!hasHtml) {
+    return hasBody ? `${openTagOf(doc.body)}${bodyInner}</body>` : `${head}${bodyInner}`;
+  }
+
+  const doctype = /^[\s\S]*?<!DOCTYPE[^>]*>/i.exec(original)?.[0] ?? '';
+  return `${doctype}${openTagOf(doc.documentElement)}${head}${openTagOf(doc.body)}${bodyInner}</body></html>`;
+}
+
 /**
  * 极轻量 HTML 格式化器（约 50 行）。
  *

package/packages/core/src/utils/link.ts

@@ -0,0 +1,51 @@
+/**
+ * 邮件链接可用性判定。
+ *
+ * Outlook 网页端（outlook.com / OWA）会清洗「不可跳转」的 href：空值、`#`、
+ * 纯数字 / 相对路径（如 `1234`）、以及非标准协议（javascript:、data: 等）。
+ * 被清洗后 `<a>` 会连同内容一起消失，表现为按钮 / 图标「元素在但看不见」。
+ *
+ * 两个用途：
+ * 1. 右栏 `type: 'url'` 字段的默认校验，输入即时提示；
+ * 2. 渲染层兜底：不可跳转时不输出 href（如 MJML 会退化为 `<p>`，样式保留、仅不可点）。
+ */
+
+/** 变量占位（发送时替换），如 {{couponLink}} */
+const VARIABLE_PATTERN = /\{\{[^{}]*\}\}/
+/** 放行协议；其余一律不放行，兼顾安全（屏蔽 javascript: / data: 等） */
+const ALLOWED_SCHEMES = ['http:', 'https:', 'mailto:', 'tel:', 'sms:']
+
+export function isRenderableHref(raw: unknown): boolean {
+  const href = String(raw ?? '').trim();
+  if (!href || href === '#') return false;
+  if (VARIABLE_PATTERN.test(href)) return true;
+
+  /** 协议相对写法 //example.com */
+  const normalized = href.startsWith('//') ? `https:${href}` : href;
+  const scheme = /^([a-z][a-z0-9+.-]*):/i.exec(normalized)?.[1]?.toLowerCase();
+  /** 无协议即相对路径 / 纯数字，邮件客户端不会保留 */
+  if (!scheme || !ALLOWED_SCHEMES.includes(`${scheme}:`)) return false;
+
+  try {
+    const url = new URL(normalized);
+    return scheme === 'mailto' || scheme === 'tel' || scheme === 'sms' ? true : !!url.hostname;
+  } catch {
+    return false;
+  }
+}
+
+/** 可跳转则原样返回，否则返回空串，由调用方降级为不可点元素 */
+export function resolveHref(raw: unknown): string {
+  const href = String(raw ?? '').trim();
+  return isRenderableHref(href) ? href : '';
+}
+
+/** 右栏链接字段默认校验：空值放行（允许暂不填），填了但不可跳转则给提示 */
+export function invalidHrefMessage(
+  raw: unknown,
+  t: (key: string) => string,
+): string | null {
+  const href = String(raw ?? '').trim();
+  if (!href || isRenderableHref(href)) return null;
+  return t('rightPanel.block.invalidLink');
+}

package/packages/core/src/utils/paletteDrop.ts

@@ -0,0 +1,46 @@
+import type { Registry } from '../registry/registry';
+import type { BlockDefinition, PaletteDropResult } from '../types';
+
+/**
+ * palette 拖入语义的判定。
+ *
+ * 画布是四层模型（Section → Column → Block），左栏也分两组：
+ *  - `sections`：布局卡片，落在 Section 之间；
+ *  - `blocks`：组件卡片，落在 Column 内。
+ *
+ * 自带布局的组件（如一次生成双列 Section 的卡组）实际会新建 Section，
+ * 若仍归到 `blocks`，拖拽时会显示「可放进列内」的占位，松手却落到该 Section 之后，
+ * 与预期不符。这里统一判定，让它与布局卡片同组，拖拽表现与布局一致。
+ */
+
+/** 拖入结果是否自带 Section 布局（多列布局 / 多列分发） */
+export function paletteDropHasSectionLayout(drop: PaletteDropResult): boolean {
+  if (drop.sectionLayout && drop.sectionLayout !== '1') return true;
+  return (drop.columnBlocks?.length ?? 0) > 1;
+}
+
+/** 解析 palette 拖入结果：未声明 `expandPaletteDrop` 时按单块处理 */
+export function resolvePaletteDropResult(
+  def: BlockDefinition,
+  registry: Registry,
+): PaletteDropResult {
+  if (def.expandPaletteDrop) {
+    const out = def.expandPaletteDrop((t) => registry.createBlock(t));
+    return Array.isArray(out) ? { blocks: out } : out;
+  }
+  return { blocks: [registry.createBlock(def.type)] };
+}
+
+/** 该 palette 卡片是否按「布局」处理：只能落在 Section 之间，不能落进 Column */
+export function paletteDropIsSectionLevel(
+  def: BlockDefinition,
+  registry: Registry,
+  opts?: { enableDynamicVariantKey?: boolean },
+): boolean {
+  if (def.paletteDropLevel) return def.paletteDropLevel === 'section';
+  if (!def.expandPaletteDrop) return false;
+  const drop = resolvePaletteDropResult(def, registry);
+  if (paletteDropHasSectionLayout(drop)) return true;
+  /** 开启动态变量节时，带 dynamicVariantKey 的组合块同样会新建独立 Section */
+  return opts?.enableDynamicVariantKey === true && !!drop.sectionAttrs?.dynamicVariantKey;
+}