mail-editor-pancake 0.0.7 → 0.0.9

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, createSection, pruneSectionIfEmpty } from '../store/store';
 import type {
   BlockDefinition,
   EditorUiOptions,
@@ -9,7 +9,13 @@ import type {
   Selection,
   Variable,
 } from '../types';
+import {
+  buildLinkVariableHtml,
+  normalizeVariable,
+  variablePlaceholder,
+} from '../variables';
 import { clear, h } from '../utils/dom';
+import { appendInlineToRichHtml } from '../utils/richHtmlInsert';
 import { Canvas } from './Canvas';
 import { ExportModal } from './ExportModal';
 import { LeftPanel } from './LeftPanel';
@@ -65,6 +71,11 @@ export interface EditorOptions {
   imageAssets?: ImageAssetsHandlers;
   /** 右栏控件形态等可选 UI 偏好。 */
   ui?: EditorUiOptions;
+  /**
+   * 顶栏「重置内容」恢复的目标文档（与 `initialDoc` 独立；编辑已保存邮件时仍应指向业务预置模板）。
+   * 未传时与构造时的 `initialDoc` 合并结果一致。
+   */
+  presetDoc?: Partial<EmailDoc>;
 }
 
 /**
@@ -96,6 +107,12 @@ export class MailEditor {
   private changeTimer: number | null = null;
   /** 显式品牌色时覆盖 CSS 变量；未设置则由 styles 按 light/dark 使用默认紫/靛 */
   private accentColorOverride: string | undefined;
+  /** 顶栏开关：是否在画布上始终显示 Section / Block 轻量虚线边框 */
+  private showLayoutBorders = false;
+  /** 「重置内容」时恢复的文档快照（与当前画布内容无关） */
+  private presetContentDoc: EmailDoc;
+  /** 宿主通过 setVariables 注入的列表；setValue 恢复文档后仍会写回，避免被 doc JSON 里的空数组覆盖 */
+  private configuredVariables: Variable[] = [];
   private systemThemeMq: MediaQueryList | null = null;
   private readonly _onSystemThemeMqChange = () => {
     if (this.accentColorOverride) this._applyAccentVars();
@@ -157,6 +174,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 ?? '');
@@ -191,22 +211,91 @@ export class MailEditor {
   setValue(doc: EmailDoc) {
     this._blurRightPanelIfFocused();
     this.store.replace(doc);
+    this._applyConfiguredVariables();
   }
 
   getValue(): EmailDoc {
     return this.store.doc;
   }
 
-  setVariables(vars: Variable[]) {
+  /**
+   * 清空画布：移除所有 Section/Block，保留 meta、styles、variables。
+   * 会提交内联编辑并清空选中。
+   */
+  clearCanvas(): void {
+    this.canvas.commitInlineEdit();
+    this._blurRightPanelIfFocused();
     this.store.update((d) => {
-      d.variables = vars;
+      d.sections = [];
     });
+    this.store.setSelection(null);
+  }
+
+  /** 将画布恢复为构造时 `presetDoc`（或 `initialDoc`）对应的预置内容。 */
+  resetToPreset(): void {
+    this._blurRightPanelIfFocused();
+    this.store.replace(structuredClone(this.presetContentDoc));
+    this._applyConfiguredVariables();
+    this.store.setSelection(null);
+  }
+
+  /** 更新「重置内容」的目标（例如宿主异步加载默认模板后）。 */
+  setPresetDoc(partial: Partial<EmailDoc>): void {
+    this.presetContentDoc = structuredClone(createDefaultDoc(partial));
+  }
+
+  setVariables(vars: Variable[]) {
+    this.configuredVariables = vars.map(normalizeVariable);
+    this._applyConfiguredVariables();
   }
 
   getVariables(): Variable[] {
+    if (this.configuredVariables.length) return this.configuredVariables;
     return this.store.doc.variables;
   }
 
+  private _applyConfiguredVariables() {
+    if (!this.configuredVariables.length) return;
+    const snapshot = this.configuredVariables.map((v) => ({ ...v }));
+    this.store.update((d) => {
+      d.variables = snapshot;
+    });
+  }
+
+  /**
+   * 插入变量 key（`{{key}}`）。
+   * @returns 是否成功插入
+   */
+  insertVariableKey(v: Variable): boolean {
+    const normalized = normalizeVariable(v);
+    return this._insertAtFocus(variablePlaceholder(normalized.key), false);
+  }
+
+  /**
+   * 插入链接 / 图片变量对应元素（`<a>` / image 块等）。
+   * 非 link/image 时退化为 insertVariableKey。
+   */
+  insertVariableElement(v: Variable): boolean {
+    const normalized = normalizeVariable(v);
+    if (normalized.kind === 'image') {
+      return this._insertImageVariable(normalized);
+    }
+    if (normalized.kind === 'link') {
+      const token = variablePlaceholder(normalized.key);
+      const html = buildLinkVariableHtml(
+        token,
+        this.store.doc.styles.linkColor || '#ff5a00',
+      );
+      return this._insertAtFocus(html, true);
+    }
+    return this.insertVariableKey(normalized);
+  }
+
+  /** 同 {@link insertVariableKey} */
+  insertVariable(v: Variable): boolean {
+    return this.insertVariableKey(v);
+  }
+
   /** 当前界面主题（`system` 不解析为 light/dark）。 */
   getTheme(): EditorTheme {
     return this.theme;
@@ -345,6 +434,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.clearCanvas(),
+      showResetContentButton: this.opts.ui?.hideTopbarResetContent !== true,
+      onResetContent: () => this.resetToPreset(),
     });
 
     this.toolbar = new RichTextToolbar({ positionRoot: this.root });
@@ -362,6 +456,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,
     });
@@ -424,7 +524,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);
         }
@@ -445,9 +545,11 @@ export class MailEditor {
   }
 
   private _showVariablePopover(anchor: HTMLElement) {
-    const vars = this.store.doc.variables;
+    this.canvas.currentInlineEditor?.saveSelection();
+
+    const vars = this.getVariables();
     if (!vars.length) {
-      alert('当前未配置变量。请先调用 editor.setVariables([...])');
+      this._showToast('暂无可用变量');
       return;
     }
     const existing = this.root.querySelector('.sm-popover');
@@ -456,25 +558,72 @@ export class MailEditor {
       return;
     }
 
-    const pop = h('div', { class: 'sm-popover' });
+    const pop = h('div', { class: 'sm-popover sm-popover--variables' });
+    let onDocClick: ((ev: MouseEvent) => void) | null = null;
+    const dismissPopover = () => {
+      pop.remove();
+      if (onDocClick) document.removeEventListener('click', onDocClick, true);
+    };
+
     for (const v of vars) {
-      pop.append(
+      const token = variablePlaceholder(v.key);
+      const row = h('div', { class: 'sm-popover__row' });
+      const actions = h('div', { class: 'sm-popover__actions' });
+      if (v.kind === 'link' || v.kind === 'image') {
+        actions.append(
+          h(
+            'button',
+            {
+              class: 'sm-popover__action',
+              type: 'button',
+              onclick: (e: Event) => {
+                e.stopPropagation();
+                this.insertVariableElement(v);
+                dismissPopover();
+              },
+            },
+            ['插入元素'],
+          ),
+        );
+      }
+      actions.append(
+        h(
+          'button',
+          {
+            class: 'sm-popover__action sm-popover__action--copy',
+            type: 'button',
+            title: `复制 ${token}`,
+            onclick: (e: Event) => {
+              e.stopPropagation();
+              void copyVariableToken(token).then((ok) => {
+                if (!ok) return;
+                dismissPopover();
+                this._showToast('已复制变量');
+              });
+            },
+          },
+          ['复制'],
+        ),
+      );
+      row.append(
         h(
           'button',
           {
             class: 'sm-popover__item',
             type: 'button',
             onclick: () => {
-              this._insertVariable(v);
-              pop.remove();
+              this.insertVariableKey(v);
+              dismissPopover();
             },
           },
           [
-            h('span', { class: 'sm-popover__key' }, [`{{${v.key}}}`]),
             h('span', { class: 'sm-popover__label' }, [v.label]),
+            h('span', { class: 'sm-popover__key' }, [token]),
           ],
         ),
+        actions,
       );
+      pop.append(row);
     }
 
     const rect = anchor.getBoundingClientRect();
@@ -483,27 +632,62 @@ export class MailEditor {
     pop.style.left = `${rect.left - rootRect.left}px`;
     this.root.append(pop);
 
-    const onDocClick = (ev: MouseEvent) => {
+    onDocClick = (ev: MouseEvent) => {
       if (!pop.contains(ev.target as Node) && ev.target !== anchor) {
-        pop.remove();
-        document.removeEventListener('click', onDocClick, true);
+        dismissPopover();
       }
     };
-    setTimeout(() => document.addEventListener('click', onDocClick, true), 0);
-  }
-
-  private _insertVariable(v: Variable) {
+    setTimeout(() => {
+      if (onDocClick) document.addEventListener('click', onDocClick, true);
+    }, 0);
+  }
+
+  private _showToast(text: string) {
+    const t = h('div', { class: 'sm-toast' }, [text]);
+    this.root.append(t);
+    requestAnimationFrame(() => t.classList.add('is-visible'));
+    setTimeout(() => {
+      t.classList.remove('is-visible');
+      setTimeout(() => t.remove(), 200);
+    }, 1400);
+  }
+
+  private _insertImageVariable(v: Variable): boolean {
+    const token = variablePlaceholder(v.key);
+    const block = this.registry.createBlock('image');
+    const props = block.props as { src: string; alt: string };
+    props.src = token;
+    props.alt = v.label?.trim() || v.key;
     const sel = this.store.selection;
-    const placeholder = `{{${v.key}}}`;
+    this.store.update((d) => {
+      if (sel?.kind === 'block') {
+        const sec = d.sections.find((s) => s.id === sel.sectionId);
+        const col = sec?.columns[sel.columnIndex];
+        if (col) {
+          const idx = col.blocks.findIndex((b) => b.id === sel.blockId);
+          col.blocks.splice(idx >= 0 ? idx + 1 : col.blocks.length, 0, block);
+          return;
+        }
+      }
+      let section = d.sections[d.sections.length - 1];
+      if (!section) {
+        section = createSection('1');
+        d.sections.push(section);
+      }
+      section.columns[0]?.blocks.push(block);
+    });
+    return true;
+  }
 
-    // 最高优：正在画布内联编辑的富文本光标处
+  /** 在焦点处插入文本或 HTML；失败时返回 false */
+  private _insertAtFocus(content: string, asHtml: boolean): boolean {
     const inline = this.canvas.currentInlineEditor;
     if (inline) {
-      inline.insertText(placeholder);
-      return;
+      if (asHtml) inline.insertHtml(content);
+      else inline.insertText(content);
+      return true;
     }
 
-    // 次之：当前聚焦的 input/textarea（属性面板）
     const active = document.activeElement as HTMLInputElement | HTMLTextAreaElement | null;
     if (
       active &&
@@ -512,14 +696,14 @@ export class MailEditor {
     ) {
       const start = active.selectionStart ?? active.value.length;
       const end = active.selectionEnd ?? active.value.length;
-      active.value = active.value.slice(0, start) + placeholder + active.value.slice(end);
-      const ev = new Event('input', { bubbles: true });
-      active.dispatchEvent(ev);
-      return;
+      active.value = active.value.slice(0, start) + content + active.value.slice(end);
+      active.dispatchEvent(new Event('input', { bubbles: true }));
+      return true;
     }
 
-    // 最次：选中 Block 时追加到该 block 的 inlineEditable 字段或第一个文本字段
+    const sel = this.store.selection;
     if (sel?.kind === 'block') {
+      let updated = false;
       this.store.update((d) => {
         for (const s of d.sections) {
           for (const c of s.columns) {
@@ -530,16 +714,40 @@ export class MailEditor {
               def?.inlineEditable?.propKey ??
               def?.schema.find((f) => f.type === 'text' || f.type === 'textarea')?.key;
             if (key) {
-              const cur = String((b.props as any)[key] ?? '');
-              (b.props as any)[key] = cur + placeholder;
+              const cur = String((b.props as Record<string, unknown>)[key] ?? '');
+              const richInline = def?.inlineEditable && def.inlineEditable.mode !== 'plain';
+              (b.props as Record<string, unknown>)[key] = richInline
+                ? appendInlineToRichHtml(cur, content)
+                : cur + content;
+              updated = true;
             }
           }
         }
       });
-      return;
+      if (updated) return true;
     }
 
-    alert('请先双击进入文本编辑、或聚焦一个输入框后再插入变量');
+    const block = this.registry.createBlock('text');
+    const wrapped = appendInlineToRichHtml('', content);
+    (block.props as { content: string }).content = wrapped;
+    this.store.update((d) => {
+      let section = d.sections[d.sections.length - 1];
+      if (!section) {
+        section = createSection('1');
+        d.sections.push(section);
+      }
+      if (sel?.kind === 'block') {
+        const sec = d.sections.find((s) => s.id === sel.sectionId);
+        const col = sec?.columns[sel.columnIndex];
+        if (col) {
+          const idx = col.blocks.findIndex((b) => b.id === sel.blockId);
+          col.blocks.splice(idx >= 0 ? idx + 1 : col.blocks.length, 0, block);
+          return;
+        }
+      }
+      section.columns[0]?.blocks.push(block);
+    });
+    return true;
   }
 
   private _showExport() {
@@ -582,6 +790,35 @@ 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);
+  }
+}
+
+async function copyVariableToken(token: string): Promise<boolean> {
+  try {
+    await navigator.clipboard.writeText(token);
+    return true;
+  } catch {
+    // fallback
+  }
+  try {
+    const ta = document.createElement('textarea');
+    ta.value = token;
+    ta.setAttribute('readonly', 'true');
+    ta.style.position = 'fixed';
+    ta.style.left = '-9999px';
+    document.body.appendChild(ta);
+    ta.select();
+    const ok = document.execCommand('copy');
+    document.body.removeChild(ta);
+    return ok;
+  } catch {
+    return false;
+  }
 }
 
 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 },
+    ];
+  }
+}