mail-editor-pancake 0.0.7 → 0.0.8

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

@@ -0,0 +1,291 @@
+import { normalizeAccentHex } from '../utils/accentColor';
+import { h } from '../utils/dom';
+
+/** 邮件常用预设色 */
+export const COLOR_PICKER_PALETTE = [
+  '#FFFFFF',
+  '#F5F6F8',
+  '#E6E8EC',
+  '#9AA0A6',
+  '#6B7280',
+  '#433F3F',
+  '#1F2328',
+  '#000000',
+  '#DC2626',
+  '#EA580C',
+  '#FF5A00',
+  '#CA8A04',
+  '#16A34A',
+  '#059669',
+  '#2563EB',
+  '#4F46E5',
+  '#7C3AED',
+  '#DB2777',
+  '#FEE2E2',
+  '#FFEDD5',
+  '#FEF3C7',
+  '#D1FAE5',
+  '#EEF2FF',
+  '#F3E8FF',
+] as const;
+
+export interface ColorPickerPopoverOptions {
+  anchor: HTMLElement;
+  layerRoot: HTMLElement;
+  value: string;
+  placeholder?: string;
+  /** 显示「清除」并允许提交空值 */
+  allowClear?: boolean;
+  /** 每次改色立即 onCommit（富文本/顶栏） */
+  liveCommit?: boolean;
+  onPreview?: (hex: string) => void;
+  onCommit: (hex: string) => void;
+  onClear?: () => void;
+  /** 打开前调用（富文本：在失焦前保存选区） */
+  onBeforeOpen?: () => void;
+  /** 为 false 时不自动 focus 十六进制输入，避免抢编辑区选区 */
+  autoFocusHex?: boolean;
+  onClosed?: () => void;
+}
+
+let activeTeardown: (() => void) | null = null;
+
+export function isColorPickerOpen(): boolean {
+  return activeTeardown !== null;
+}
+
+export function closeActiveColorPicker(): void {
+  activeTeardown?.();
+  activeTeardown = null;
+}
+
+function positionLayer(layer: HTMLElement, anchor: HTMLElement, layerRoot: HTMLElement) {
+  const rect = anchor.getBoundingClientRect();
+  const rootRect = layerRoot.getBoundingClientRect();
+  layer.style.top = `${rect.bottom - rootRect.top + 4}px`;
+  layer.style.left = `${Math.max(4, rect.left - rootRect.left)}px`;
+
+  requestAnimationFrame(() => {
+    const popRect = layer.getBoundingClientRect();
+    if (popRect.right > rootRect.right - 8) {
+      layer.style.left = `${Math.max(4, parseFloat(layer.style.left) - (popRect.right - rootRect.right + 8))}px`;
+    }
+    if (popRect.bottom > window.innerHeight - 8) {
+      layer.style.top = `${rect.top - rootRect.top - popRect.height - 4}px`;
+    }
+  });
+}
+
+/** 点击色块网格缝隙等无焦点区域时，避免编辑区 blur 导致误提交 */
+function guardInlineEditFocus(layer: HTMLElement) {
+  layer.addEventListener(
+    'mousedown',
+    (e) => {
+      const t = e.target as Element;
+      if (t.closest('input, button, select, textarea, a, [contenteditable]')) return;
+      e.preventDefault();
+    },
+    true,
+  );
+}
+
+function syncNativeInput(native: HTMLInputElement, hex: string) {
+  const n = normalizeAccentHex(hex);
+  if (n) native.value = n;
+}
+
+/** 打开自定义色板（含关闭按钮）；点击色卡触发，不再使用系统色板。 */
+export function openColorPickerPopover(opts: ColorPickerPopoverOptions): void {
+  closeActiveColorPicker();
+  opts.onBeforeOpen?.();
+
+  const initialHex = normalizeAccentHex(opts.value);
+  let draft = initialHex ?? '#4F46E5';
+  let closed = false;
+
+  const layer = h('div', {
+    class: 'sm-color-picker-layer',
+    'data-sm-color-picker-layer': '',
+  });
+  const panel = h('div', {
+    class: 'sm-color-picker',
+    role: 'dialog',
+    'aria-label': '选择颜色',
+  });
+
+  const closeBtn = h(
+    'button',
+    {
+      class: 'sm-color-picker__close',
+      type: 'button',
+      title: '关闭',
+      'aria-label': '关闭',
+    },
+    ['×'],
+  );
+
+  const head = h('div', { class: 'sm-color-picker__head' }, [
+    h('span', { class: 'sm-color-picker__title' }, ['选择颜色']),
+    closeBtn,
+  ]);
+
+  const native = h('input', {
+    class: 'sm-color-picker__native',
+    type: 'color',
+    'aria-label': '自定义颜色',
+  }) as HTMLInputElement;
+
+  const hexInput = h('input', {
+    class: 'sm-input sm-color-picker__hex',
+    type: 'text',
+    placeholder: opts.placeholder ?? '#RRGGBB',
+  }) as HTMLInputElement;
+
+  const applyDraft = (hex: string, commit: boolean) => {
+    const n = normalizeAccentHex(hex);
+    if (!n) return;
+    draft = n;
+    syncNativeInput(native, n);
+    hexInput.value = n;
+    opts.onPreview?.(n);
+    if (commit || opts.liveCommit) opts.onCommit(n);
+  };
+
+  syncNativeInput(native, draft);
+  hexInput.value = initialHex ?? '';
+
+  const teardown = (commit: boolean) => {
+    if (closed) return;
+    closed = true;
+    activeTeardown = null;
+    document.removeEventListener('keydown', onKey, true);
+    document.removeEventListener('mousedown', onDoc, true);
+    layer.remove();
+    if (commit && !opts.liveCommit) {
+      const n = normalizeAccentHex(draft);
+      if (n) opts.onCommit(n);
+    }
+    opts.onClosed?.();
+  };
+
+  const swatchGrid = h('div', { class: 'sm-color-picker__swatches' });
+  for (const hex of COLOR_PICKER_PALETTE) {
+    const btn = h('button', {
+      class: 'sm-color-picker__swatch',
+      type: 'button',
+      title: `${hex}（双击确认）`,
+      style: `background:${hex}`,
+      'aria-label': hex,
+    });
+    btn.addEventListener('click', () => applyDraft(hex, false));
+    btn.addEventListener('dblclick', (e) => {
+      e.preventDefault();
+      applyDraft(hex, true);
+      teardown(true);
+    });
+    swatchGrid.append(btn);
+  }
+
+  native.addEventListener('input', () => applyDraft(native.value, false));
+
+  hexInput.addEventListener('input', () => {
+    const n = normalizeAccentHex(hexInput.value);
+    if (n) applyDraft(n, false);
+  });
+  hexInput.addEventListener('keydown', (e) => {
+    const ke = e as KeyboardEvent;
+    if (ke.key === 'Enter') {
+      ke.preventDefault();
+      const n = normalizeAccentHex(hexInput.value);
+      if (n) {
+        applyDraft(n, true);
+        teardown(true);
+      }
+    }
+  });
+
+  const footKids: HTMLElement[] = [];
+  if (opts.allowClear) {
+    footKids.push(
+      h(
+        'button',
+        {
+          class: 'sm-btn sm-btn--ghost sm-color-picker__clear',
+          type: 'button',
+          onclick: () => {
+            opts.onClear?.();
+            teardown(false);
+          },
+        },
+        ['清除'],
+      ),
+    );
+  }
+
+  panel.append(head, swatchGrid, native, hexInput);
+  if (footKids.length) panel.append(h('div', { class: 'sm-color-picker__foot' }, footKids));
+
+  layer.append(panel);
+  guardInlineEditFocus(layer);
+  opts.layerRoot.append(layer);
+  positionLayer(layer, opts.anchor, opts.layerRoot);
+
+  closeBtn.addEventListener('click', (e) => {
+    e.preventDefault();
+    teardown(true);
+  });
+
+  const onKey = (e: KeyboardEvent) => {
+    if (e.key === 'Escape') {
+      e.preventDefault();
+      e.stopPropagation();
+      if (initialHex) opts.onPreview?.(initialHex);
+      teardown(false);
+    }
+  };
+
+  const onDoc = (ev: MouseEvent) => {
+    const t = ev.target as Node;
+    if (layer.contains(t) || opts.anchor.contains(t)) return;
+    teardown(true);
+  };
+
+  document.addEventListener('keydown', onKey, true);
+  setTimeout(() => document.addEventListener('mousedown', onDoc, true), 0);
+
+  activeTeardown = () => teardown(true);
+  if (opts.autoFocusHex !== false) hexInput.focus();
+}
+
+export interface BindColorPickerInputOptions
+  extends Omit<ColorPickerPopoverOptions, 'anchor' | 'layerRoot' | 'value'> {
+  layerRoot?: HTMLElement;
+  getValue?: () => string;
+}
+
+/** 拦截色卡点击，改为打开自定义色板。 */
+export function bindColorPickerInput(
+  pick: HTMLInputElement,
+  opts: BindColorPickerInputOptions,
+): void {
+  if (!pick.title) pick.title = '点击打开色板；预设色块可双击快速确认';
+
+  pick.addEventListener('mousedown', (e) => {
+    e.preventDefault();
+    opts.onBeforeOpen?.();
+  });
+
+  pick.addEventListener('click', (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const layerRoot =
+      opts.layerRoot ?? (pick.closest('.sm-root') as HTMLElement | null) ?? document.body;
+    const value = opts.getValue?.() ?? pick.value;
+    openColorPickerPopover({
+      ...opts,
+      anchor: pick,
+      layerRoot,
+      value,
+    });
+  });
+}

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

@@ -1,6 +1,6 @@
 import { Registry, defineBlock } from '../registry/registry';
 import { renderDoc } from '../renderer';
-import { Store, pruneEmptySections } from '../store/store';
+import { Store, pruneSectionIfEmpty } from '../store/store';
 import type {
   BlockDefinition,
   EditorUiOptions,
@@ -65,6 +65,11 @@ export interface EditorOptions {
   imageAssets?: ImageAssetsHandlers;
   /** 右栏控件形态等可选 UI 偏好。 */
   ui?: EditorUiOptions;
+  /**
+   * 顶栏「重置内容」恢复的目标文档（与 `initialDoc` 独立；编辑已保存邮件时仍应指向业务预置模板）。
+   * 未传时与构造时的 `initialDoc` 合并结果一致。
+   */
+  presetDoc?: Partial<EmailDoc>;
 }
 
 /**
@@ -96,6 +101,10 @@ export class MailEditor {
   private changeTimer: number | null = null;
   /** 显式品牌色时覆盖 CSS 变量；未设置则由 styles 按 light/dark 使用默认紫/靛 */
   private accentColorOverride: string | undefined;
+  /** 顶栏开关：是否在画布上始终显示 Section / Block 轻量虚线边框 */
+  private showLayoutBorders = false;
+  /** 「重置内容」时恢复的文档快照（与当前画布内容无关） */
+  private presetContentDoc: EmailDoc;
   private systemThemeMq: MediaQueryList | null = null;
   private readonly _onSystemThemeMqChange = () => {
     if (this.accentColorOverride) this._applyAccentVars();
@@ -157,6 +166,9 @@ export class MailEditor {
     }
 
     const initialDoc = createDefaultDoc(opts.initialDoc);
+    this.presetContentDoc = structuredClone(
+      createDefaultDoc(opts.presetDoc ?? opts.initialDoc),
+    );
     this.store = new Store(initialDoc);
 
     const initialAccent = normalizeAccentHex(this.opts.accentColor ?? '');
@@ -197,6 +209,31 @@ export class MailEditor {
     return this.store.doc;
   }
 
+  /**
+   * 清空画布：移除所有 Section/Block，保留 meta、styles、variables。
+   * 会提交内联编辑并清空选中。
+   */
+  clearCanvas(): void {
+    this.canvas.commitInlineEdit();
+    this._blurRightPanelIfFocused();
+    this.store.update((d) => {
+      d.sections = [];
+    });
+    this.store.setSelection(null);
+  }
+
+  /** 将画布恢复为构造时 `presetDoc`（或 `initialDoc`）对应的预置内容。 */
+  resetToPreset(): void {
+    this._blurRightPanelIfFocused();
+    this.store.replace(structuredClone(this.presetContentDoc));
+    this.store.setSelection(null);
+  }
+
+  /** 更新「重置内容」的目标（例如宿主异步加载默认模板后）。 */
+  setPresetDoc(partial: Partial<EmailDoc>): void {
+    this.presetContentDoc = structuredClone(createDefaultDoc(partial));
+  }
+
   setVariables(vars: Variable[]) {
     this.store.update((d) => {
       d.variables = vars;
@@ -345,6 +382,11 @@ export class MailEditor {
       onExport: () => this._showExport(),
       showFullscreenButton: this.opts.ui?.hideTopbarFullscreen !== true,
       onFullscreenToggle: () => void this._toggleFullscreen(),
+      onLayoutBordersToggle: () => this._toggleLayoutBorders(),
+      showClearCanvasButton: this.opts.ui?.hideTopbarClearCanvas !== true,
+      onClearCanvas: () => this._confirmClearCanvas(),
+      showResetContentButton: this.opts.ui?.hideTopbarResetContent !== true,
+      onResetContent: () => this._confirmResetContent(),
     });
 
     this.toolbar = new RichTextToolbar({ positionRoot: this.root });
@@ -362,6 +404,12 @@ export class MailEditor {
     this.rightPanel = new RightPanel({
       store: this.store,
       registry: this.registry,
+      docRootLabel: this.opts.ui?.hideMailMeta ? '版式' : '邮件',
+      onFocusSection: (sectionId) => {
+        this.canvas.commitInlineEdit();
+        this.store.setSelection({ kind: 'section', sectionId });
+      },
+      onFocusDocument: () => this._focusMailSettings(),
       imageAssets: this.opts.imageAssets,
       ui: this.opts.ui,
     });
@@ -383,6 +431,22 @@ export class MailEditor {
     this.store.setSelection(null);
   }
 
+  private _confirmClearCanvas(): void {
+    const ok = window.confirm(
+      '将移除画布上所有 Section 与组件，邮件全局样式与变量列表会保留。此操作可用撤销（⌘Z）恢复。',
+    );
+    if (!ok) return;
+    this.clearCanvas();
+  }
+
+  private _confirmResetContent(): void {
+    const ok = window.confirm(
+      '将把邮件正文恢复为预置内容，当前画布上的所有模块将被替换。确定继续？',
+    );
+    if (!ok) return;
+    this.resetToPreset();
+  }
+
   private _setMode(m: EditorMode) {
     if (this.mode === m) return;
     if (m !== 'design') this.canvas.commitInlineEdit();
@@ -424,7 +488,7 @@ export class MailEditor {
             const col = sec.columns[sel.columnIndex];
             if (!col) return;
             col.blocks = col.blocks.filter((b) => b.id !== sel.blockId);
-            pruneEmptySections(d);
+            pruneSectionIfEmpty(d, sel.sectionId);
           });
           this.store.setSelection(null);
         }
@@ -582,6 +646,12 @@ export class MailEditor {
       console.warn('[simple-mail] 全屏不可用:', err);
     }
   }
+
+  private _toggleLayoutBorders() {
+    this.showLayoutBorders = !this.showLayoutBorders;
+    this.root.classList.toggle('sm-show-layout-borders', this.showLayoutBorders);
+    this.topbar.setLayoutBordersActive(this.showLayoutBorders);
+  }
 }
 
 function smGetFullscreenElement(): Element | null {

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

@@ -6,6 +6,7 @@ import { renderDoc } from '../renderer';
 import type { Store } from '../store/store';
 import { prettyHtml } from '../utils/html';
 import { h } from '../utils/dom';
+import { richTextExecCommand } from '../utils/richTextCommand';
 import { Modal } from './Modal';
 
 export interface ExportModalOptions {
@@ -99,7 +100,7 @@ export class ExportModal {
       ta.value = this.current;
       document.body.appendChild(ta);
       ta.select();
-      document.execCommand('copy');
+      richTextExecCommand('copy');
       document.body.removeChild(ta);
       this._toast('已复制');
     }

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

@@ -0,0 +1,120 @@
+import type { Registry } from '../registry/registry';
+import type { Store } from '../store/store';
+import { findBlockLocation, findSection } from '../store/store';
+import { clear, h } from '../utils/dom';
+import { layoutHumanLabel } from '../utils/sectionLayout';
+
+export interface FocusBreadcrumbOptions {
+  store: Store;
+  registry: Registry;
+  /** 文档级根节点文案（如「邮件」/「版式」） */
+  docRootLabel: string;
+  onFocusDocument: () => void;
+  onFocusSection: (sectionId: string) => void;
+}
+
+interface CrumbItem {
+  label: string;
+  current: boolean;
+  onClick?: () => void;
+}
+
+/**
+ * 右栏聚焦路径：邮件 > 一列 > 文本。
+ * 点击父级等同 Esc 上浮（块 → Section → 文档级面板）。
+ */
+export class FocusBreadcrumb {
+  el: HTMLElement;
+  private opts: FocusBreadcrumbOptions;
+
+  constructor(opts: FocusBreadcrumbOptions) {
+    this.opts = opts;
+    this.el = h('nav', {
+      class: 'sm-focus-crumb',
+      'aria-label': '当前选中',
+    });
+    opts.store.subscribeSelection(() => this.sync());
+    opts.store.subscribe(() => this.sync());
+    this.sync();
+  }
+
+  setVisible(on: boolean) {
+    this.el.hidden = !on;
+  }
+
+  sync() {
+    clear(this.el);
+    const items = this._buildItems();
+    if (!items.length) {
+      this.el.hidden = true;
+      return;
+    }
+    this.el.hidden = false;
+
+    items.forEach((item, i) => {
+      if (i > 0) {
+        this.el.append(h('span', { class: 'sm-focus-crumb__sep', 'aria-hidden': 'true' }, ['›']));
+      }
+      if (item.current || !item.onClick) {
+        this.el.append(
+          h(
+            'span',
+            {
+              class: `sm-focus-crumb__item sm-focus-crumb__item--current`,
+              title: item.label,
+            },
+            [item.label],
+          ),
+        );
+      } else {
+        this.el.append(
+          h(
+            'button',
+            {
+              type: 'button',
+              class: 'sm-focus-crumb__item',
+              title: `选中：${item.label}`,
+              onclick: () => item.onClick!(),
+            },
+            [item.label],
+          ),
+        );
+      }
+    });
+  }
+
+  private _buildItems(): CrumbItem[] {
+    const { store, registry, docRootLabel, onFocusDocument, onFocusSection } = this.opts;
+    const sel = store.selection;
+    const doc = store.doc;
+
+    if (!sel) {
+      return [{ label: docRootLabel, current: true }];
+    }
+
+    if (sel.kind === 'section') {
+      const sec = findSection(doc, sel.sectionId);
+      if (!sec) return [{ label: docRootLabel, current: true }];
+      return [
+        { label: docRootLabel, current: false, onClick: onFocusDocument },
+        { label: layoutHumanLabel(sec.layout), current: true },
+      ];
+    }
+
+    const sec = findSection(doc, sel.sectionId);
+    const loc = findBlockLocation(doc, sel.blockId);
+    if (!sec || !loc) {
+      return [{ label: docRootLabel, current: true }];
+    }
+
+    const blockName = registry.get(loc.block.type)?.name ?? loc.block.type;
+    return [
+      {
+        label: layoutHumanLabel(sec.layout),
+        current: false,
+        onClick: () => onFocusSection(sel.sectionId),
+      },
+      { label: blockName, current: true },
+    ];
+  }
+}