mail-editor-pancake 0.2.7 → 0.3.0

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

@@ -1,25 +1,36 @@
+import type { SimpleMailT } from '../i18n';
 import type { EmailDoc } from '../types';
-import { h, clear } from '../utils/dom';
-import { parseDocClipboard } from '../utils/docClipboard';
+import {
+  type SelectionClipboardEnvelope,
+  parseDocClipboard,
+  parseSelectionClipboard,
+} from '../utils/docClipboard';
+import { clear, h } from '../utils/dom';
 import { richTextExecCommand } from '../utils/richTextCommand';
 import { Modal } from './Modal';
-import type { SimpleMailT } from '../i18n';
 
 export interface ImportDocModalOptions {
   /** 读取剪贴板初始内容（失败时返回空字符串） */
   readClipboard?: () => Promise<string>;
   onApply: (doc: EmailDoc) => void;
+  /** 局部设计稿（simple-mail/selection）回调：追加到画布而非覆盖 */
+  onApplySelection?: (envelope: SelectionClipboardEnvelope) => void;
   t: SimpleMailT;
 }
 
 /**
- * 导入设计稿：展示 JSON 文本区，支持从剪贴板填入后覆盖当前画布。
+ * 导入设计稿：展示 JSON 文本区，支持从剪贴板填入。
+ * - 整稿（simple-mail/doc 或裸 EmailDoc）：覆盖当前画布
+ * - 局部（simple-mail/selection）：追加到当前画布（按钮与提示自动切换）
  */
 export class ImportDocModal {
   private modal: Modal;
   private textarea: HTMLTextAreaElement;
   private hintEl: HTMLElement;
+  private applyBtn: HTMLButtonElement;
   private opts: ImportDocModalOptions;
+  /** 当前输入识别为局部设计稿时为 true */
+  private selectionMode = false;
 
   constructor(opts: ImportDocModalOptions) {
     this.opts = opts;
@@ -44,6 +55,7 @@ export class ImportDocModal {
       placeholder: t('importDoc.placeholder'),
       rows: '14',
     }) as HTMLTextAreaElement;
+    this.textarea.addEventListener('input', () => this._syncMode());
 
     this.modal.body.append(this.hintEl, this.textarea);
 
@@ -57,7 +69,7 @@ export class ImportDocModal {
       { class: 'sm-btn', type: 'button', onclick: () => void this._fillFromClipboard() },
       [t('importDoc.pasteFromClipboard')],
     );
-    const applyBtn = h(
+    this.applyBtn = h(
       'button',
       {
         class: 'sm-btn sm-btn--primary',
@@ -65,8 +77,8 @@ export class ImportDocModal {
         onclick: () => this._apply(),
       },
       [t('importDoc.apply')],
-    );
-    this.modal.footer.append(cancelBtn, pasteBtn, applyBtn);
+    ) as HTMLButtonElement;
+    this.modal.footer.append(cancelBtn, pasteBtn, this.applyBtn);
   }
 
   async open(parent?: HTMLElement) {
@@ -75,6 +87,7 @@ export class ImportDocModal {
     this.modal.open(parent);
     const initial = (await this.opts.readClipboard?.()) ?? '';
     if (initial.trim()) this.textarea.value = initial;
+    this._syncMode();
   }
 
   private async _fillFromClipboard() {
@@ -85,6 +98,28 @@ export class ImportDocModal {
     }
     this.textarea.value = text;
     this._setHint(this.opts.t('importDoc.clipboardFilled'), false);
+    this._syncMode();
+  }
+
+  /** 根据输入内容切换「覆盖整稿 / 追加局部」两种模式（按钮文案与提示）。 */
+  private _syncMode() {
+    const selection = parseSelectionClipboard(this.textarea.value);
+    const next = selection != null && typeof this.opts.onApplySelection === 'function';
+    if (next === this.selectionMode) return;
+    this.selectionMode = next;
+    clear(this.applyBtn);
+    this.applyBtn.append(this.opts.t(next ? 'importDoc.applyAppend' : 'importDoc.apply'));
+    this.hintEl.classList.remove('sm-import-doc__hint--error');
+    clear(this.hintEl);
+    if (next) {
+      this.hintEl.append(this.opts.t('importDoc.hintSelection'));
+    } else {
+      this.hintEl.append(
+        this.opts.t('importDoc.hint1'),
+        this.opts.t('importDoc.hint2'),
+        this.opts.t('importDoc.hint3'),
+      );
+    }
   }
 
   private _apply() {
@@ -93,6 +128,14 @@ export class ImportDocModal {
       this._setHint(this.opts.t('importDoc.empty'), true);
       return;
     }
+    if (this.selectionMode) {
+      const selection = parseSelectionClipboard(raw);
+      if (selection) {
+        this.opts.onApplySelection?.(selection);
+        this.modal.close();
+        return;
+      }
+    }
     const doc = parseDocClipboard(raw);
     if (!doc) {
       this._setHint(this.opts.t('importDoc.invalid'), true);

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

@@ -1,3 +1,12 @@
+import type { GlobalStyles } from '../types';
+import {
+  LIST_INDENT_DEFAULT_PX,
+  type ListIndentValue,
+  setListIndent as applyListIndentToElement,
+  findListAtSelection,
+  getListIndent,
+  resolveGlobalListIndentPx,
+} from '../utils/emailListStyles';
 /**
  * 把任意 DOM 元素临时变成 contenteditable，并暴露提交/取消/选区事件。
  *
@@ -10,41 +19,32 @@
  *  - 选区变化通过 `onSelectionChange` 实时回调，便于浮动工具条同步按钮状态/位置。
  */
 import { normalizeFontWeightStep } from '../utils/fontWeightSteps';
-import {
-  findListAtSelection,
-  getListIndent,
-  LIST_INDENT_DEFAULT_PX,
-  resolveGlobalListIndentPx,
-  setListIndent as applyListIndentToElement,
-  type ListIndentValue,
-} from '../utils/emailListStyles';
-import type { GlobalStyles } from '../types';
 import {
   applyListCommandForSelection,
   detectListFormats,
   findListItem,
-  getListItemsInRange,
   getCaretTextOffsetAtRangeEnd,
+  getListItemsInRange,
   insertSelectionBoundaryMarkers,
-  mergeListItemOnBackspace,
   mergeAdjacentSameTypeLists,
+  mergeListItemOnBackspace,
   mergeNextListItemOnDelete,
   removeSelectionBoundaryMarkers,
   restoreCaretAfterListMutation,
   restoreCaretToEndOfListInSelectionBounds,
   splitListItemOnEnter,
 } from '../utils/inlineListEditing';
+import {
+  getRichHtmlPlainText,
+  hasRichHtmlLineBreak,
+  isRichHtmlEditorSeedOnly,
+  isRichHtmlEffectivelyEmpty,
+} from '../utils/richHtmlEmpty';
 import {
   richTextExecCommand,
   richTextQueryCommandState,
   richTextQueryCommandValue,
 } from '../utils/richTextCommand';
-import {
-  isRichHtmlEffectivelyEmpty,
-  isRichHtmlEditorSeedOnly,
-  hasRichHtmlLineBreak,
-  getRichHtmlPlainText,
-} from '../utils/richHtmlEmpty';
 import {
   convertFontTags,
   firstTextNode,
@@ -145,11 +145,7 @@ export class InlineEditor {
       const text = (this.el.textContent ?? '').replace(/\u200b/g, '');
       if (text.length > 0) {
         value = sanitized;
-      } else if (
-        this.initiallyEmpty &&
-        !this.edited &&
-        isRichHtmlEditorSeedOnly(sanitized)
-      ) {
+      } else if (this.initiallyEmpty && !this.edited && isRichHtmlEditorSeedOnly(sanitized)) {
         value = '';
       } else if (hasRichHtmlLineBreak(sanitized) && !this.hadTextInSession) {
         // 从未有过文本，仅换行（含单个 <br>）视为有效
@@ -209,9 +205,7 @@ export class InlineEditor {
     const isListCmd = command === 'insertOrderedList' || command === 'insertUnorderedList';
     if (isListCmd && sel?.rangeCount) {
       const range = sel.getRangeAt(0);
-      const itemsInRange = range.collapsed
-        ? []
-        : getListItemsInRange(range, this.el);
+      const itemsInRange = range.collapsed ? [] : getListItemsInRange(range, this.el);
       const savedOffset = getCaretTextOffsetAtRangeEnd(this.el, range);
       const boundaryMarkers = insertSelectionBoundaryMarkers(range);
       this.suppressListMerge = true;
@@ -514,8 +508,7 @@ export class InlineEditor {
     el.classList.remove('is-empty');
 
     const initial = this.opts.initialValue ?? '';
-    const initiallyEmpty =
-      mode === 'plain' ? !initial.trim() : isRichHtmlEffectivelyEmpty(initial);
+    const initiallyEmpty = mode === 'plain' ? !initial.trim() : isRichHtmlEffectivelyEmpty(initial);
     this.initiallyEmpty = initiallyEmpty;
     this.edited = false;
     this.hadTextInSession =
@@ -625,7 +618,8 @@ export class InlineEditor {
         const active = document.activeElement as HTMLElement | null;
         if (active && (active === el || el.contains(active))) return;
         if (isColorPickerOpen()) return;
-        if (active?.closest?.('.sm-floating-toolbar, .sm-color-picker, .sm-color-picker-layer')) return;
+        if (active?.closest?.('.sm-floating-toolbar, .sm-color-picker, .sm-color-picker-layer'))
+          return;
         if (active?.closest?.('.sm-topbar, .sm-popover, .sm-panel--variable-picker')) return;
         // 从左栏拖入 / 画布内 Sortable 排序：mousedown 会先 blur，若在此时提交会触发画布重渲染并拆掉 drop 目标
         if (active?.closest?.('.sm-panel--left')) return;
@@ -787,7 +781,7 @@ export class InlineEditor {
 
     const inline = resolveInlineFormatsAtSelection(this.el, sel);
 
-    let foreColor = inline.foreColor ?? safeQueryValue('foreColor');
+    const foreColor = inline.foreColor ?? safeQueryValue('foreColor');
     let backColor = inline.backColor;
     if (
       !backColor &&
@@ -805,8 +799,7 @@ export class InlineEditor {
     const listIndentGlobalPx = this.opts.globalStyles
       ? resolveGlobalListIndentPx(this.opts.globalStyles)
       : LIST_INDENT_DEFAULT_PX;
-    const listIndentEffectivePx =
-      listIndentPx != null ? listIndentPx : listIndentGlobalPx;
+    const listIndentEffectivePx = listIndentPx != null ? listIndentPx : listIndentGlobalPx;
 
     const state: SelectionState = {
       hasSelection: true,
@@ -839,9 +832,7 @@ export class InlineEditor {
   /** 焦点在浮动工具条上时沿用上一帧选区，避免点开链接框 / 颜色等控件后工具条消失。 */
   private _emitSelectionOrKeepToolbar(fallback: null) {
     if (
-      fallback === null &&
-      this.lastSelectionState &&
-      isColorPickerOpen() ||
+      (fallback === null && this.lastSelectionState && isColorPickerOpen()) ||
       document.activeElement?.closest?.(
         '.sm-floating-toolbar, .sm-color-picker, .sm-color-picker-layer',
       )
@@ -870,7 +861,8 @@ export class InlineEditor {
 
 /* ----------------------------- helpers ----------------------------- */
 
-function findAncestorAnchor(node: Node | null, root: HTMLElement): HTMLAnchorElement | null {
+function findAncestorAnchor(start: Node | null, root: HTMLElement): HTMLAnchorElement | null {
+  let node = start;
   while (node && node !== root) {
     if (node.nodeType === 1 && (node as HTMLElement).tagName === 'A') {
       return node as HTMLAnchorElement;
@@ -913,7 +905,11 @@ function resolveInlineFormatsAtSelection(
   if (!host) return { fontSize: null, fontWeight: null, foreColor: null, backColor: null };
 
   let fontWeight: string | null = null;
-  for (let el: HTMLElement | null = host; el && root.contains(el) && el !== root; el = el.parentElement) {
+  for (
+    let el: HTMLElement | null = host;
+    el && root.contains(el) && el !== root;
+    el = el.parentElement
+  ) {
     if (el.style.fontWeight) fontWeight = el.style.fontWeight;
   }
 
@@ -1033,7 +1029,11 @@ function resolveUnderlineAtSelection(root: HTMLElement, sel: Selection): boolean
 
 /** 光标处文字色（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) {
+  for (
+    let el: HTMLElement | null = host;
+    el && root.contains(el) && el !== root;
+    el = el.parentElement
+  ) {
     const inline = el.style.color?.trim();
     if (inline) return inline;
 
@@ -1055,7 +1055,11 @@ function readColorFromStyleAttr(styleAttr: string | null): string | null {
 
 /** 光标处文字背景/高亮色（hiliteColor 的 queryCommandValue 在 Chrome 常为空，需读 DOM） */
 function resolveBackColorAtSelection(root: HTMLElement, host: HTMLElement): string | null {
-  for (let el: HTMLElement | null = host; el && root.contains(el) && el !== root; el = el.parentElement) {
+  for (
+    let el: HTMLElement | null = host;
+    el && root.contains(el) && el !== root;
+    el = el.parentElement
+  ) {
     const inline = el.style.backgroundColor?.trim();
     if (inline && !isTransparentColor(inline)) return inline;
 
@@ -1103,7 +1107,7 @@ function isTransparentColor(c: string): boolean {
   if (s === 'rgba(0, 0, 0, 0)' || s === 'rgba(0,0,0,0)') return true;
   const rgba = s.match(/^rgba?\(\s*(\d+)[,\s]+(\d+)[,\s]+(\d+)(?:[,\s/]+([\d.]+))?\s*\)$/);
   if (rgba) {
-    const a = rgba[4] !== undefined ? parseFloat(rgba[4]) : 1;
+    const a = rgba[4] !== undefined ? Number.parseFloat(rgba[4]) : 1;
     return a === 0;
   }
   return false;

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

@@ -1,9 +1,9 @@
 import Sortable from 'sortablejs';
+import type { SimpleMailT } from '../i18n';
 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 {
   registry: Registry;
@@ -173,9 +173,7 @@ export class LeftPanel {
           'div',
           {
             class:
-              sourceGroup === 'sections'
-                ? 'sm-block-card sm-block-card--section'
-                : 'sm-block-card',
+              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),

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

@@ -1,5 +1,5 @@
-import { h } from '../utils/dom';
 import type { SimpleMailT } from '../i18n';
+import { h } from '../utils/dom';
 
 /**
  * 极简 Modal：遮罩 + 居中卡片 + header/body/footer 三段。

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

@@ -1,9 +1,9 @@
+import type { SimpleMailT } from '../i18n';
 import type { Registry } from '../registry/registry';
 import { renderDoc } from '../renderer';
 import type { Store } from '../store/store';
 import { h } from '../utils/dom';
 import { Modal } from './Modal';
-import type { SimpleMailT } from '../i18n';
 
 export type PreviewDevice = 'pc' | 'pad' | 'phone';
 
@@ -98,9 +98,7 @@ export class PreviewModal {
     for (const k of Object.keys(this.deviceBtns) as PreviewDevice[]) {
       this.deviceBtns[k].classList.toggle('sm-segmented__item--active', k === d);
     }
-    requestAnimationFrame(() =>
-      requestAnimationFrame(() => this._scheduleFitPreviewHeight()),
-    );
+    requestAnimationFrame(() => requestAnimationFrame(() => this._scheduleFitPreviewHeight()));
   }
 
   private _render() {
@@ -130,10 +128,7 @@ export class PreviewModal {
       const body = doc?.body;
       if (!root || !body) return;
       const raw = Math.max(root.scrollHeight, body.scrollHeight);
-      const maxPx = Math.max(
-        240,
-        window.innerHeight - PreviewModal.VIEWPORT_RESERVED_Y,
-      );
+      const maxPx = Math.max(240, window.innerHeight - PreviewModal.VIEWPORT_RESERVED_Y);
       const minPx = 200;
       const next = Math.min(Math.max(Math.ceil(raw), minPx), maxPx);
       this.viewport.style.height = `${next}px`;

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

@@ -1,9 +1,9 @@
-import { bindColorPickerInput } from './ColorPickerPopover';
+import type { SimpleMailT } from '../i18n';
 import { h } from '../utils/dom';
-import { FONT_WEIGHT_STEP_OPTIONS, normalizeFontWeightStep } from '../utils/fontWeightSteps';
 import { LIST_INDENT_PRESETS_PX, type ListIndentValue } from '../utils/emailListStyles';
+import { FONT_WEIGHT_STEP_OPTIONS, normalizeFontWeightStep } from '../utils/fontWeightSteps';
+import { bindColorPickerInput } from './ColorPickerPopover';
 import type { InlineEditor, SelectionState } from './InlineEditor';
-import type { SimpleMailT } from '../i18n';
 
 /**
  * 富文本浮动工具条。
@@ -31,8 +31,16 @@ export interface RichTextToolbarOptions {
 const FONT_FAMILIES = [
   { labelKey: 'toolbar.fontDefault', label: 'Default', value: '' },
   { label: 'Inter', value: 'Inter, -apple-system, BlinkMacSystemFont, sans-serif' },
-  { labelKey: 'toolbar.fontPingFang', label: 'PingFang SC', value: '"PingFang SC", "Helvetica Neue", Arial, sans-serif' },
-  { labelKey: 'toolbar.fontMicrosoftYaHei', label: 'Microsoft YaHei', value: '"Microsoft YaHei", "Segoe UI", sans-serif' },
+  {
+    labelKey: 'toolbar.fontPingFang',
+    label: 'PingFang SC',
+    value: '"PingFang SC", "Helvetica Neue", Arial, sans-serif',
+  },
+  {
+    labelKey: 'toolbar.fontMicrosoftYaHei',
+    label: 'Microsoft YaHei',
+    value: '"Microsoft YaHei", "Segoe UI", sans-serif',
+  },
   { labelKey: 'toolbar.fontSimSun', label: 'SimSun', value: 'SimSun, "Songti SC", serif' },
   { label: 'Helvetica', value: '"Helvetica Neue", Arial, sans-serif' },
   { label: 'Arial', value: 'Arial, sans-serif' },
@@ -144,9 +152,7 @@ export class RichTextToolbar {
       const hex = colorToHexInput(f.foreColor);
       if (hex) this.inputColor.value = hex;
     }
-    this.inputBgColor.value = f.backColor
-      ? (colorToHexInput(f.backColor) ?? '#ffffff')
-      : '#ffffff';
+    this.inputBgColor.value = f.backColor ? (colorToHexInput(f.backColor) ?? '#ffffff') : '#ffffff';
     if (f.fontName) this.selectFontFamily.value = matchFamily(f.fontName);
     this.selectFontSize.value = matchFontSize(f.fontSize);
     this.selectFontWeight.value = matchFontWeight(f.fontWeight);
@@ -173,9 +179,14 @@ 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' });
     // 链接内的下划线归 <a> 管，走专用实现；非链接文本回落到 execCommand
-    this.btns.underline = this._btn('U', t('toolbar.underline'), () => this.editor?.toggleUnderline(), {
-      textDecoration: 'underline',
-    });
+    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'), {
       textDecoration: 'line-through',
     });
@@ -585,13 +596,13 @@ function matchFontSize(raw: string | null): string {
   if (!raw) return '';
   const m = raw.trim().match(/^(\d+(?:\.\d+)?)px$/i);
   if (!m) return '';
-  const px = `${Math.round(parseFloat(m[1]))}px`;
+  const px = `${Math.round(Number.parseFloat(m[1]))}px`;
   if (FONT_SIZES.includes(px)) return px;
-  const num = parseFloat(px);
+  const num = Number.parseFloat(px);
   let best = FONT_SIZES[0];
-  let bestD = Infinity;
+  let bestD = Number.POSITIVE_INFINITY;
   for (const s of FONT_SIZES) {
-    const d = Math.abs(parseFloat(s) - num);
+    const d = Math.abs(Number.parseFloat(s) - num);
     if (d < bestD) {
       bestD = d;
       best = s;