mail-editor-pancake 0.2.7 → 0.3.0

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

@@ -1,16 +1,33 @@
-import type { EmailDoc, Section } from '../types';
+import type { Block, EmailDoc, Section, Variable } from '../types';
 import { uid } from './id';
 
 /** 剪贴板 / 文件 interchange 信封标识 */
 export const DOC_CLIPBOARD_KIND = 'simple-mail/doc' as const;
 export const DOC_CLIPBOARD_FORMAT_VERSION = 1 as const;
 
+/** 局部设计稿（Section / Block 子集）剪贴板信封标识 */
+export const SELECTION_CLIPBOARD_KIND = 'simple-mail/selection' as const;
+export const SELECTION_CLIPBOARD_FORMAT_VERSION = 1 as const;
+
 export interface DocClipboardEnvelope {
   kind: typeof DOC_CLIPBOARD_KIND;
   formatVersion: typeof DOC_CLIPBOARD_FORMAT_VERSION;
   doc: EmailDoc;
 }
 
+/**
+ * 局部设计稿信封：携带若干 Section 与若干独立 Block。
+ * 粘贴时按「追加」语义落到目标画布，不覆盖现有内容。
+ */
+export interface SelectionClipboardEnvelope {
+  kind: typeof SELECTION_CLIPBOARD_KIND;
+  formatVersion: typeof SELECTION_CLIPBOARD_FORMAT_VERSION;
+  /** 源文档变量列表；粘贴时仅合并被内容引用到的 key */
+  variables: Variable[];
+  sections: Section[];
+  blocks: Block[];
+}
+
 export function serializeDocClipboard(doc: EmailDoc): string {
   const envelope: DocClipboardEnvelope = {
     kind: DOC_CLIPBOARD_KIND,
@@ -20,6 +37,22 @@ export function serializeDocClipboard(doc: EmailDoc): string {
   return JSON.stringify(envelope);
 }
 
+/** 序列化局部设计稿（选中的 Section / Block）为剪贴板 JSON。 */
+export function serializeSelectionClipboard(input: {
+  sections?: Section[];
+  blocks?: Block[];
+  variables?: Variable[];
+}): string {
+  const envelope: SelectionClipboardEnvelope = {
+    kind: SELECTION_CLIPBOARD_KIND,
+    formatVersion: SELECTION_CLIPBOARD_FORMAT_VERSION,
+    variables: input.variables ?? [],
+    sections: input.sections ?? [],
+    blocks: input.blocks ?? [],
+  };
+  return JSON.stringify(envelope);
+}
+
 function isRecord(v: unknown): v is Record<string, unknown> {
   return typeof v === 'object' && v !== null && !Array.isArray(v);
 }
@@ -66,6 +99,54 @@ export function parseDocClipboard(raw: string): EmailDoc | null {
   return null;
 }
 
+function isVariableShape(v: unknown): v is Variable {
+  if (!isRecord(v)) return false;
+  return typeof v.key === 'string' && typeof v.label === 'string';
+}
+
+/**
+ * 解析局部设计稿信封（`simple-mail/selection`）。
+ * 仅做形状校验，不做未注册类型过滤（由编辑器粘贴时按 registry 处理）。
+ */
+export function parseSelectionClipboard(raw: string): SelectionClipboardEnvelope | null {
+  const trimmed = (raw || '').trim();
+  if (!trimmed) return null;
+  let parsed: unknown;
+  try {
+    parsed = JSON.parse(trimmed);
+  } catch {
+    return null;
+  }
+  if (!isRecord(parsed)) return null;
+  if (parsed.kind !== SELECTION_CLIPBOARD_KIND) return null;
+  if (parsed.formatVersion !== SELECTION_CLIPBOARD_FORMAT_VERSION) return null;
+
+  const sections = Array.isArray(parsed.sections) ? parsed.sections : [];
+  const blocks = Array.isArray(parsed.blocks) ? parsed.blocks : [];
+  const variables = Array.isArray(parsed.variables) ? parsed.variables : [];
+
+  for (const sec of sections) {
+    if (!isRecord(sec) || !Array.isArray(sec.columns)) return null;
+    for (const col of sec.columns) {
+      if (!isRecord(col) || !Array.isArray(col.blocks)) return null;
+      for (const blk of col.blocks) {
+        if (!isRecord(blk) || typeof blk.type !== 'string') return null;
+      }
+    }
+  }
+  for (const blk of blocks) {
+    if (!isRecord(blk) || typeof blk.type !== 'string') return null;
+  }
+
+  return structuredClone({
+    kind: SELECTION_CLIPBOARD_KIND,
+    formatVersion: SELECTION_CLIPBOARD_FORMAT_VERSION,
+    variables: variables.filter(isVariableShape),
+    sections,
+    blocks,
+  } satisfies SelectionClipboardEnvelope);
+}
+
 /** 导入前重生成 section / column / block id，避免与当前文档冲突。 */
 export function regenerateDocIds(doc: EmailDoc): EmailDoc {
   const next = structuredClone(doc);
@@ -73,7 +154,8 @@ export function regenerateDocIds(doc: EmailDoc): EmailDoc {
   return next;
 }
 
-function remapSectionIds(sec: Section): Section {
+/** 重生成单个 Section（含列与块）的全部 id，用于局部粘贴。 */
+export function remapSectionIds(sec: Section): Section {
   return {
     ...sec,
     id: uid('sec'),
@@ -87,3 +169,26 @@ function remapSectionIds(sec: Section): Section {
     })),
   };
 }
+
+/** 重生成单个 Block 的 id，用于局部粘贴。 */
+export function regenerateBlockId(block: Block): Block {
+  return { ...block, id: uid('blk') };
+}
+
+/** 扫描局部设计稿内容中引用的 `{{key}}` 变量名集合（粘贴时用于变量并集）。 */
+export function collectSelectionVariableKeys(envelope: SelectionClipboardEnvelope): Set<string> {
+  const keys = new Set<string>();
+  const scan = (value: unknown) => {
+    const text = JSON.stringify(value) ?? '';
+    const re = /\{\{\s*([^}]+?)\s*\}\}/g;
+    let m: RegExpExecArray | null = re.exec(text);
+    while (m) {
+      const key = m[1]?.trim();
+      if (key) keys.add(key);
+      m = re.exec(text);
+    }
+  };
+  scan(envelope.sections);
+  scan(envelope.blocks);
+  return keys;
+}

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

@@ -1,11 +1,11 @@
 import type { EmailDoc } from '../types';
-import { serializeParsedHtmlDocument } from './html';
 import {
   DYNAMIC_VARIANT_HTML_ATTR,
   getSectionDynamicVariantKey,
   isDynamicVariantSection,
   sectionMjClassName,
 } from './dynamicVariantKey';
+import { serializeParsedHtmlDocument } from './html';
 
 /**
  * 编译后为带 `dynamicVariantKey` 的 Section 根节点写入 `data-dv="{key}"`，供宿主 DOM 抽取。

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

@@ -106,7 +106,7 @@ export function getListIndent(list: HTMLUListElement | HTMLOListElement): ListIn
   if (list.hasAttribute(LIST_INDENT_ATTR)) {
     const raw = list.getAttribute(LIST_INDENT_ATTR);
     if (raw == null || raw === 'default') return null;
-    const n = parseInt(raw, 10);
+    const n = Number.parseInt(raw, 10);
     return Number.isFinite(n) ? clampListIndent(n) : null;
   }
   const fromStyle =

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

@@ -2,22 +2,23 @@
 export const FONT_WEIGHT_STEP_VALUES = ['300', '400', '500', '600', '700'] as const;
 export type FontWeightStep = (typeof FONT_WEIGHT_STEP_VALUES)[number];
 
-export const FONT_WEIGHT_STEP_OPTIONS: { label: string; value: string }[] = FONT_WEIGHT_STEP_VALUES.map(
-  (v) => ({ label: v, value: v }),
-);
+export const FONT_WEIGHT_STEP_OPTIONS: { label: string; value: string }[] =
+  FONT_WEIGHT_STEP_VALUES.map((v) => ({ label: v, value: v }));
 
 /** 将任意历史写法映射到最近一档（normal→400，bold→700 等） */
 export function normalizeFontWeightStep(raw: string | undefined | null): FontWeightStep {
-  const s = String(raw ?? '400').trim().toLowerCase();
+  const s = String(raw ?? '400')
+    .trim()
+    .toLowerCase();
   if (s === '' || s === 'normal' || s === 'regular') return '400';
   if (s === 'bold' || s === 'bolder') return '700';
   if (s === 'lighter') return '300';
   const match = /^(\d+)(\.\d+)?$/.exec(s);
   if (match) {
-    const n = parseInt(match[1], 10);
+    const n = Number.parseInt(match[1], 10);
     const steps = [300, 400, 500, 600, 700];
     let best: FontWeightStep = '400';
-    let bestD = Infinity;
+    let bestD = Number.POSITIVE_INFINITY;
     for (const st of steps) {
       const d = Math.abs(n - st);
       if (d < bestD) {

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

@@ -58,9 +58,10 @@ export function prettyHtml(html: string, indent = '  '): string {
   ]);
   const PRESERVE = new Set(['pre', 'textarea', 'script', 'style']);
 
-  const tokens = html.match(/<!--[\s\S]*?-->|<!\[CDATA\[[\s\S]*?\]\]>|<![^>]*>|<\/?[^<>]+>|[^<]+/g) ?? [];
+  const tokens =
+    html.match(/<!--[\s\S]*?-->|<!\[CDATA\[[\s\S]*?\]\]>|<![^>]*>|<\/?[^<>]+>|[^<]+/g) ?? [];
   let depth = 0;
-  let preserveStack: string[] = [];
+  const preserveStack: string[] = [];
   const out: string[] = [];
   const pad = (n: number) => indent.repeat(Math.max(0, n));
 

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

@@ -3,7 +3,8 @@
 /** 空列表项 Enter 退出后插入的正文段，勿当作可合并的分隔块 */
 export const LIST_GAP_ATTR = 'data-sm-list-gap';
 
-export function findListItem(node: Node | null, root: HTMLElement): HTMLLIElement | null {
+export function findListItem(start: Node | null, root: HTMLElement): HTMLLIElement | null {
+  let node = start;
   while (node && node !== root) {
     if (node.nodeType === Node.ELEMENT_NODE && (node as HTMLElement).tagName === 'LI') {
       return node as HTMLLIElement;
@@ -13,9 +14,7 @@ export function findListItem(node: Node | null, root: HTMLElement): HTMLLIElemen
   return null;
 }
 
-export function findListRoot(
-  li: HTMLLIElement,
-): HTMLUListElement | HTMLOListElement | null {
+export function findListRoot(li: HTMLLIElement): HTMLUListElement | HTMLOListElement | null {
   const parent = li.parentElement;
   if (!parent) return null;
   if (parent.tagName === 'UL' || parent.tagName === 'OL') {
@@ -146,9 +145,9 @@ export function setCaretByTextOffset(container: HTMLElement, offset: number): vo
   const target = Math.max(0, offset);
   const walker = document.createTreeWalker(container, NodeFilter.SHOW_TEXT);
   let remaining = target;
-  let textNode: Text | null = null;
+  let textNode = walker.nextNode() as Text | null;
 
-  while ((textNode = walker.nextNode() as Text | null)) {
+  while (textNode) {
     const data = textNode.data ?? '';
     const len = visibleTextLength(data);
     if (remaining <= len) {
@@ -171,6 +170,7 @@ export function setCaretByTextOffset(container: HTMLElement, offset: number): vo
       return;
     }
     remaining -= len;
+    textNode = walker.nextNode() as Text | null;
   }
 
   placeCaretAtEndOfElement(container);
@@ -226,17 +226,12 @@ export function insertCaretMarkerAtRangeEnd(range: Range): HTMLSpanElement | nul
 
 export function removeSelectionBoundaryMarkers(root: HTMLElement): void {
   root
-    .querySelectorAll(
-      `span[${RANGE_START_MARKER_ATTR}="1"], span[${CARET_MARKER_ATTR}="1"]`,
-    )
+    .querySelectorAll(`span[${RANGE_START_MARKER_ATTR}="1"], span[${CARET_MARKER_ATTR}="1"]`)
     .forEach((m) => m.remove());
 }
 
 /** 选区末尾在容器内的可见文本偏移 */
-export function getCaretTextOffsetAtRangeEnd(
-  container: HTMLElement,
-  range: Range,
-): number {
+export function getCaretTextOffsetAtRangeEnd(container: HTMLElement, range: Range): number {
   const atEnd = range.cloneRange();
   atEnd.collapse(false);
   return getCaretTextOffset(container, atEnd);
@@ -272,18 +267,14 @@ function listInSelectionSpan(list: Element, start: Node, end: Node): boolean {
   const { anchor, far } = normalizeSelectionSpan(start, end);
   const afterAnchor =
     (list.compareDocumentPosition(anchor) & Node.DOCUMENT_POSITION_FOLLOWING) !== 0;
-  const beforeFar =
-    (list.compareDocumentPosition(far) & Node.DOCUMENT_POSITION_PRECEDING) !== 0;
+  const beforeFar = (list.compareDocumentPosition(far) & Node.DOCUMENT_POSITION_PRECEDING) !== 0;
   return afterAnchor && beforeFar;
 }
 
 function lastListInDocumentOrder(lists: ListElement[]): ListElement | null {
   let best: ListElement | null = null;
   for (const list of lists) {
-    if (
-      !best ||
-      (best.compareDocumentPosition(list) & Node.DOCUMENT_POSITION_FOLLOWING) !== 0
-    ) {
+    if (!best || (best.compareDocumentPosition(list) & Node.DOCUMENT_POSITION_FOLLOWING) !== 0) {
       best = list;
     }
   }
@@ -291,9 +282,7 @@ function lastListInDocumentOrder(lists: ListElement[]): ListElement | null {
 }
 
 function placeCaretAtEndOfList(list: ListElement): boolean {
-  const items = Array.from(list.children).filter(
-    (c): c is HTMLLIElement => c.tagName === 'LI',
-  );
+  const items = Array.from(list.children).filter((c): c is HTMLLIElement => c.tagName === 'LI');
   const lastLi = items[items.length - 1];
   if (!lastLi) return false;
   placeCaretAtEndOfElement(lastLi);
@@ -353,9 +342,7 @@ export function exitListFromEmptyItem(li: HTMLLIElement): void {
   const list = findListRoot(li);
   if (!list) return;
 
-  const items = Array.from(list.children).filter(
-    (c): c is HTMLLIElement => c.tagName === 'LI',
-  );
+  const items = Array.from(list.children).filter((c): c is HTMLLIElement => c.tagName === 'LI');
   const index = items.indexOf(li);
   if (index === -1) return;
 
@@ -571,10 +558,7 @@ function sortByDocumentOrder<T extends Node>(nodes: T[]): T[] {
 }
 
 /** 选区触及的列表项（块级，按文档顺序） */
-export function getListItemsInRange(
-  range: Range,
-  root: HTMLElement,
-): HTMLLIElement[] {
+export function getListItemsInRange(range: Range, root: HTMLElement): HTMLLIElement[] {
   const items: HTMLLIElement[] = [];
   for (const node of root.querySelectorAll('li')) {
     if (!(node instanceof HTMLLIElement)) continue;
@@ -614,9 +598,7 @@ function appendUnwrappedItems(frag: DocumentFragment, items: HTMLLIElement[]): v
   }
 }
 
-type ListSegmentMiddle =
-  | 'unwrap'
-  | { tag: 'ul' | 'ol' };
+type ListSegmentMiddle = 'unwrap' | { tag: 'ul' | 'ol' };
 
 /** 将列表拆成前/中/后三段：中段改类型或取消列表 */
 function replaceListWithSegments(
@@ -695,8 +677,7 @@ export function applyListCommandForSelection(
     );
     const selectedSet = new Set(selected);
     const allSelected =
-      selected.length === allItems.length &&
-      allItems.every((li) => selectedSet.has(li));
+      selected.length === allItems.length && allItems.every((li) => selectedSet.has(li));
 
     if (allSelected) {
       applyListTypeToWholeList(list, wantUl);
@@ -761,7 +742,10 @@ export function convertListTag(
   return next;
 }
 
-export function detectListFormats(node: Node | null, root: HTMLElement): {
+export function detectListFormats(
+  node: Node | null,
+  root: HTMLElement,
+): {
   unorderedList: boolean;
   orderedList: boolean;
 } {

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

@@ -11,9 +11,9 @@
  */
 
 /** 变量占位（发送时替换），如 {{couponLink}} */
-const VARIABLE_PATTERN = /\{\{[^{}]*\}\}/
+const VARIABLE_PATTERN = /\{\{[^{}]*\}\}/;
 /** 放行协议；其余一律不放行，兼顾安全（屏蔽 javascript: / data: 等） */
-const ALLOWED_SCHEMES = ['http:', 'https:', 'mailto:', 'tel:', 'sms:']
+const ALLOWED_SCHEMES = ['http:', 'https:', 'mailto:', 'tel:', 'sms:'];
 
 export function isRenderableHref(raw: unknown): boolean {
   const href = String(raw ?? '').trim();
@@ -41,10 +41,7 @@ export function resolveHref(raw: unknown): string {
 }
 
 /** 右栏链接字段默认校验：空值放行（允许暂不填），填了但不可跳转则给提示 */
-export function invalidHrefMessage(
-  raw: unknown,
-  t: (key: string) => string,
-): string | null {
+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/lockedMjml.ts

@@ -17,7 +17,7 @@ export interface MjRawCellTypography {
 export function mjRawCellTypographyFromStyles(s: GlobalStyles): MjRawCellTypography {
   return {
     fontSize: (s.fontSize || '16px').trim(),
-    lineHeight: (s.lineHeight || '1.25').trim(),
+    lineHeight: (s.lineHeight || '1.5').trim(),
     color: (s.color || '#433f3f').trim(),
     fontFamily: (s.fontFamily || 'sans-serif').trim(),
     fontWeight: normalizeFontWeightStep(s.fontWeight),
@@ -172,7 +172,7 @@ export function extractPreviewHtmlFromLockedMjml(lockedMjml: string): string | n
 
   const mjRaw = raw.match(/^<mj-raw\b[^>]*>([\s\S]*)<\/mj-raw\s*>$/i);
   if (mjRaw) {
-    let body = mjRaw[1].trim();
+    const body = mjRaw[1].trim();
     if (/^\s*<table\b/i.test(body)) {
       const tdInner = innerFromPresentationTable(body);
       if (tdInner != null) return tdInner;

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

@@ -15,9 +15,10 @@ export function getCodeEditorModalDefaultSize(): CodeEditorModalSize {
 }
 
 /** 代码编辑弹框最大化时的视口占比 */
-export function getCodeEditorModalMaximizedSize(
-  opts?: { maxWidthRatio?: number; maxHeightRatio?: number },
-): CodeEditorModalSize {
+export function getCodeEditorModalMaximizedSize(opts?: {
+  maxWidthRatio?: number;
+  maxHeightRatio?: number;
+}): CodeEditorModalSize {
   const maxWidthRatio = opts?.maxWidthRatio ?? DEFAULT_MAX_WIDTH_RATIO;
   const maxHeightRatio = opts?.maxHeightRatio ?? DEFAULT_MAX_HEIGHT_RATIO;
   return {

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

@@ -1,6 +1,8 @@
 /** 是否仅为进入编辑时注入的占位 <br>（用户未改动） */
 export function isRichHtmlEditorSeedOnly(html: string): boolean {
-  const s = String(html ?? '').trim().toLowerCase();
+  const s = String(html ?? '')
+    .trim()
+    .toLowerCase();
   return s === '<br>' || s === '<br/>' || s === '<br />';
 }
 

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

@@ -14,7 +14,9 @@ export function variablePlaceholder(key: string): string {
 }
 
 /** 无显式 sample 时保留 Mustache 占位符；仅当宿主传入 sample 才用于可选的示例替换。 */
-export function defaultVariableSample(v: Pick<Variable, 'key' | 'label' | 'kind' | 'sample'>): string {
+export function defaultVariableSample(
+  v: Pick<Variable, 'key' | 'label' | 'kind' | 'sample'>,
+): string {
   if (v.sample != null && String(v.sample).trim() !== '') return String(v.sample);
   const key = v.key?.trim() || tokenToVariableKey(String(v.key));
   return variablePlaceholder(key);
@@ -34,10 +36,7 @@ export function normalizeVariable(v: Variable): Variable {
 
 export function buildLinkVariableHtml(token: string, linkColor: string): string {
   const safeHref = token.replace(/"/g, '&quot;');
-  const safeText = token
-    .replace(/&/g, '&amp;')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;');
+  const safeText = token.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
   return `<a href="${safeHref}" style="color:${linkColor} !important;text-decoration:underline;">${safeText}</a>`;
 }
 

package/packages/core/vite.config.ts

@@ -1,5 +1,5 @@
-import { defineConfig } from 'vite';
 import { resolve } from 'node:path';
+import { defineConfig } from 'vite';
 import dts from 'vite-plugin-dts';
 
 export default defineConfig({

package/playground/vanilla/index.html

@@ -7,10 +7,27 @@
     <style>
       html, body, #app { height: 100%; margin: 0; padding: 0; }
       body { font: 14px -apple-system, BlinkMacSystemFont, 'PingFang SC', sans-serif; }
+      #locale-switch {
+        position: fixed;
+        right: 16px;
+        bottom: 16px;
+        z-index: 9999;
+        height: 32px;
+        padding: 0 14px;
+        border: 1px solid rgba(0, 0, 0, 0.12);
+        border-radius: 16px;
+        background: #fff;
+        color: #333;
+        font: 600 12px/30px -apple-system, BlinkMacSystemFont, 'PingFang SC', sans-serif;
+        cursor: pointer;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+      }
+      #locale-switch:hover { background: #f5f5f5; }
     </style>
   </head>
   <body>
     <div id="app"></div>
+    <button id="locale-switch" type="button"></button>
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>