mail-editor-pancake 0.2.4 → 0.2.6

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

@@ -0,0 +1,151 @@
+/**
+ * 列宽内联化（编译后处理）。
+ *
+ * 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;
+}
+
+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 re = /\.mj-column-per-([^\s,{]+)\s*\{([^}]*)\}/g;
+  let m: RegExpExecArray | null;
+  while ((m = re.exec(css))) {
+    const width = firstDeclaration(m[2], 'width');
+    if (!width) continue;
+    const className = `mj-column-per-${m[1]}`;
+    if (rules.has(className)) continue;
+    rules.set(className, { width, maxWidth: firstDeclaration(m[2], 'max-width') });
+  }
+  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 (new RegExp('(?:^|;)\\s*width\\s*:', 'i').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 (new RegExp('(?:^|;)\\s*max-width\\s*:', 'i').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;
+}