mail-editor-pancake 0.0.8 → 0.1.0

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

@@ -7,11 +7,26 @@ import {
   pruneSectionIfEmpty,
   type Store,
 } from '../store/store';
-import type { Block, Column, EmailDoc, RenderContext, Section, SectionLayout } from '../types';
+import type {
+  Block,
+  Column,
+  EditorUiOptions,
+  EmailDoc,
+  PaletteDropResult,
+  RenderContext,
+  Section,
+  SectionAttrs,
+  SectionLayout,
+} from '../types';
+import { getSectionDynamicVariantKey } from '../utils/dynamicVariantSection';
 import { blockButtonWidthCss, docContentWidthCss } from '../utils/contentWidth';
+import { globalListIndentCssVarValue } from '../utils/emailListStyles';
 import { normalizeFontWeightStep } from '../utils/fontWeightSteps';
 import { clear, escapeHtml, h } from '../utils/dom';
-import { htmlFragmentForLockedHtmlBlockCanvas } from '../utils/lockedMjml';
+import {
+  defaultPaddingForLockedBlock,
+  resolveLockedMjmlCanvasContent,
+} from '../utils/lockedMjml';
 import { layoutHumanLabel } from '../utils/sectionLayout';
 import { BlockCodeModal } from './BlockCodeModal';
 import { InlineEditor, type SelectionState } from './InlineEditor';
@@ -34,6 +49,8 @@ export interface CanvasOptions {
    * 应传入 MailEditor 根节点；若挂到 `document.body`，`var(--sm-code-bg)` 等会失效，弹框背景会变透明。
    */
   layerRoot: HTMLElement;
+  /** 与 MailEditor.opts.ui 对齐 */
+  ui?: EditorUiOptions;
 }
 
 /**
@@ -62,6 +79,9 @@ export class Canvas {
   private pendingRender = false;
   /** 设计模式下禁用画布内超链接导航（预览弹框 iframe 不在此 DOM 内，不受影响） */
   private linkNavSuppression = new AbortController();
+  /** clearSelectionOnCanvasMargin：记录本次指针是否从编辑区内按下（区分拖选松手 vs 点空白退出） */
+  private clearSelectionGestureTracking = new AbortController();
+  private pointerGestureStartedInInlineEdit = false;
   private blockCodeModal: BlockCodeModal;
 
   constructor(opts: CanvasOptions) {
@@ -78,6 +98,7 @@ export class Canvas {
 
     this._bindDesignModeLinkSuppression();
     if (opts.clearSelectionOnCanvasMargin) {
+      this._bindClearSelectionGestureTracking();
       this._bindClearSelectionOnCanvasWhitespace();
       this._bindClearSelectionOnCanvasMargin();
     }
@@ -88,7 +109,13 @@ export class Canvas {
 
     this._render();
 
-    opts.store.subscribe(() => {
+    opts.store.subscribe((detail) => {
+      // 编辑态下若走了文档级 undo/redo，必须丢弃未提交 DOM，否则失焦提交会与 store 脱节（整节消失等）
+      if (this.editingBlockId && detail?.source === 'history') {
+        this.abortInlineEdit();
+        this._render();
+        return;
+      }
       if (this.editingBlockId) {
         this.pendingRender = true;
         return;
@@ -112,13 +139,81 @@ export class Canvas {
     this.inlineEditor?.commit();
   }
 
+  get isInlineEditing(): boolean {
+    return this.editingBlockId != null;
+  }
+
+  /**
+   * 放弃未提交的内联编辑（不写入 store）。
+   * 用于文档级撤销/重做：编辑期间画布不重绘，若直接 undo 会导致 DOM 与 doc 不一致。
+   */
+  abortInlineEdit() {
+    if (!this.editingBlockId) return;
+    const id = this.editingBlockId;
+    this.editingBlockId = null;
+    this.pendingRender = false;
+    if (this.inlineEditor) {
+      this.inlineEditor.destroy(false);
+      this.inlineEditor = null;
+    }
+    this.opts.toolbar.detach();
+    const blockEl = this.inner.querySelector(
+      `.sm-block[data-id="${cssEscape(id)}"]`,
+    ) as HTMLElement | null;
+    blockEl?.classList.remove('is-editing');
+  }
+
+  /** 强制重绘（内联编辑中会延迟到 commit 后） */
+  refresh() {
+    if (this.editingBlockId) {
+      this.pendingRender = true;
+      return;
+    }
+    this._render();
+  }
+
   destroy() {
     this.linkNavSuppression.abort();
+    this.clearSelectionGestureTracking.abort();
     this._exitEditing(false);
     this._destroySortables();
     this.blockCodeModal.destroy();
   }
 
+  /**
+   * clearSelectionOnCanvasMargin：mousedown 在编辑区内、mouseup 落在灰底/留白时，
+   * 浏览器仍可能对 mouseup 目标派发 click；需与 Section padding 的拖选抑制同理。
+   */
+  private _bindClearSelectionGestureTracking() {
+    const opts = { capture: true, signal: this.clearSelectionGestureTracking.signal } as const;
+    document.addEventListener(
+      'mousedown',
+      (e: MouseEvent) => {
+        if (e.button !== 0) {
+          this.pointerGestureStartedInInlineEdit = false;
+          return;
+        }
+        if (!this.editingBlockId) {
+          this.pointerGestureStartedInInlineEdit = false;
+          return;
+        }
+        const editingEl = this.inner.querySelector('.sm-inline-editing');
+        if (!editingEl) {
+          this.pointerGestureStartedInInlineEdit = false;
+          return;
+        }
+        const t = e.target;
+        if (!(t instanceof Node)) {
+          this.pointerGestureStartedInInlineEdit = false;
+          return;
+        }
+        const node = t.nodeType === Node.TEXT_NODE ? t.parentNode : t;
+        this.pointerGestureStartedInInlineEdit = !!(node && editingEl.contains(node));
+      },
+      opts,
+    );
+  }
+
   /**
    * 点击画布白底上未落到 Section 内的区域（如 min-height 下方留白、空文档提示）时清空选中，
    * Section/Block 上的点击会在冒泡到此前被 stopPropagation，不会误清。
@@ -130,6 +225,7 @@ export class Canvas {
       const el = t instanceof Element ? t : t.parentElement;
       if (!el) return;
       if (el === this.inner || el.closest('.sm-empty-doc')) {
+        if (this._shouldSuppressClearSelectionFromTextDrag()) return;
         this.commitInlineEdit();
         this.opts.store.setSelection(null);
       }
@@ -144,6 +240,7 @@ export class Canvas {
       if (!this.el.contains(t)) return;
       if (this.inner.contains(t)) return;
       if (this.addBar.contains(t)) return;
+      if (this._shouldSuppressClearSelectionFromTextDrag()) return;
       this.commitInlineEdit();
       this.opts.store.setSelection(null);
     });
@@ -193,6 +290,10 @@ export class Canvas {
     this.inner.style.color = doc.styles.color;
     this.inner.style.lineHeight = doc.styles.lineHeight ?? '1.25';
     this.inner.style.setProperty('--sm-editor-link-color', doc.styles.linkColor);
+    this.inner.style.setProperty(
+      '--sm-list-indent-default',
+      globalListIndentCssVarValue(doc.styles),
+    );
 
     if (!doc.sections.length) {
       this.inner.append(
@@ -235,7 +336,13 @@ export class Canvas {
     }px ${a.paddingLeft ?? 0}px`;
 
     const layoutShort = layoutHumanLabel(section.layout);
-    const sectionChip = `区块 ${sectionIndex + 1} · ${layoutShort}`;
+    const dvKey =
+      this.opts.ui?.enableDynamicVariantKey === true
+        ? getSectionDynamicVariantKey(section)
+        : undefined;
+    const sectionChip = dvKey
+      ? `动态变量 ${sectionIndex + 1} · {{${dvKey}}}`
+      : `区块 ${sectionIndex + 1} · ${layoutShort}`;
 
     const sw = blockButtonWidthCss(a.width);
     const box =
@@ -247,7 +354,7 @@ export class Canvas {
     });
 
     const wrap = h('div', {
-      class: 'sm-section',
+      class: `sm-section${dvKey ? ' sm-section--dynamic-variant' : ''}`,
       title: `${sectionChip}。子组件铺满列内时：按 Esc 或 Alt+点击块可选中本节。`,
       style: `padding:${padding};${a.backgroundColor ? `background:${a.backgroundColor};` : ''}${box}`,
     });
@@ -380,23 +487,24 @@ export class Canvas {
     const def = this.opts.registry.get(block.type);
     let inner = '';
     if (block.lockedMjml) {
-      if (block.type === 'html') {
-        const p = block.props as {
+      const isHtmlLike = block.type === 'html' || def?.inlineEditable?.mode === 'html';
+      const padding = defaultPaddingForLockedBlock(
+        block.type,
+        block.lockedMjml,
+        block.props as {
           paddingTop?: number;
           paddingRight?: number;
           paddingBottom?: number;
           paddingLeft?: number;
-        };
-        const frag = htmlFragmentForLockedHtmlBlockCanvas(block.lockedMjml, {
-          top: Number(p.paddingTop ?? 8),
-          right: Number(p.paddingRight ?? 0),
-          bottom: Number(p.paddingBottom ?? 8),
-          left: Number(p.paddingLeft ?? 0),
-        });
-        inner = `<div class="sm-html-content">${frag}</div>`;
+        },
+      );
+      const resolved = resolveLockedMjmlCanvasContent(block.lockedMjml, padding);
+      if (resolved.mode === 'preview') {
+        const wrapClass = isHtmlLike ? 'sm-html-content' : 'sm-locked-preview';
+        inner = `<div class="${wrapClass}">${resolved.html}</div>`;
       } else {
         inner = `<div style="padding:8px;color:#92400e;background:#fffbeb;border:1px dashed #f59e0b;font-family:monospace;font-size:11px;white-space:pre-wrap;">${escapeHtml(
-          block.lockedMjml,
+          resolved.source,
         )}</div>`;
       }
     } else if (def?.renderPreview) {
@@ -511,7 +619,13 @@ export class Canvas {
       });
     });
 
-    if (def?.inlineEditable && !block.lockedMjml) {
+    if (block.lockedMjml) {
+      el.addEventListener('dblclick', (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        this.blockCodeModal.open(block.id, displayName);
+      });
+    } else if (def?.inlineEditable) {
       el.addEventListener('dblclick', (e) => {
         e.stopPropagation();
         this._enterEditing(block);
@@ -524,8 +638,7 @@ export class Canvas {
   private _renderAddBar(): HTMLElement {
     const layouts: { layout: SectionLayout; label: string }[] = [
       { layout: '1', label: '一列' },
-      { layout: '1-1', label: '两列' },
-      { layout: '1-1-1', label: '三列' },
+      { layout: '1-1', label: '多列' },
     ];
     const bar = h('div', { class: 'sm-add-section-bar' }, [h('span', {}, ['+ 添加 Section：'])]);
     for (const l of layouts) {
@@ -637,6 +750,7 @@ export class Canvas {
       mode: def.inlineEditable.mode,
       multiline: !!def.inlineEditable.multiline,
       placeholder: def.inlineEditable.placeholder,
+      globalStyles: this.opts.store.doc.styles,
       onCommit: (value) => {
         const propKey = def.inlineEditable!.propKey;
         const editingId = block.id;
@@ -693,12 +807,33 @@ export class Canvas {
     if (this.editingBlockId) this.commitInlineEdit();
   }
 
-  private _blocksFromPaletteDrop(blockType: string): Block[] {
+  private _resolvePaletteDrop(blockType: string): PaletteDropResult {
     const def = this.opts.registry.get(blockType);
     if (def?.expandPaletteDrop) {
-      return def.expandPaletteDrop((t) => this.opts.registry.createBlock(t));
+      const out = def.expandPaletteDrop((t) => this.opts.registry.createBlock(t));
+      if (Array.isArray(out)) return { blocks: out };
+      return out;
+    }
+    return { blocks: [this.opts.registry.createBlock(blockType)] };
+  }
+
+  private _applySectionAttrs(target: Section, partial?: Partial<SectionAttrs>) {
+    if (!partial) return;
+    const { meta, ...rest } = partial;
+    Object.assign(target.attrs, rest);
+    if (meta && typeof meta === 'object') {
+      target.attrs.meta = { ...(target.attrs.meta ?? {}), ...meta };
     }
-    return [this.opts.registry.createBlock(blockType)];
+  }
+
+  /** 未开启 `enableDynamicVariantKey` 时剥离 palette 上的动态变量节属性 */
+  private _paletteSectionAttrsForDrop(
+    sectionAttrs?: Partial<SectionAttrs>,
+  ): Partial<SectionAttrs> | undefined {
+    if (!sectionAttrs) return undefined;
+    if (this.opts.ui?.enableDynamicVariantKey === true) return sectionAttrs;
+    const { dynamicVariantKey: _dv, ...rest } = sectionAttrs;
+    return Object.keys(rest).length ? rest : undefined;
   }
 
   private _handleSectionAdd(e: Sortable.SortableEvent) {
@@ -722,8 +857,9 @@ export class Canvas {
     // 路径 B：左栏内容/自定义卡片拖到 sections 之间 → 自动裹一列 Section
     if (sourceGroup === 'blocks' && blockType) {
       item.parentElement?.removeChild(item);
-      const blocks = this._blocksFromPaletteDrop(blockType);
+      const { blocks, sectionAttrs } = this._resolvePaletteDrop(blockType);
       const newSection = createSection('1');
+      this._applySectionAttrs(newSection, this._paletteSectionAttrsForDrop(sectionAttrs));
       newSection.columns[0].blocks.splice(newIndex, 0, ...blocks);
       this.opts.store.update((d) => {
         d.sections.splice(newIndex, 0, newSection);
@@ -788,7 +924,29 @@ export class Canvas {
 
     if (sourceGroup === 'blocks' && blockType) {
       item.parentElement?.removeChild(item);
-      const blocks = this._blocksFromPaletteDrop(blockType);
+      const drop = this._resolvePaletteDrop(blockType);
+      const paletteSectionAttrs = this._paletteSectionAttrsForDrop(drop.sectionAttrs);
+      if (paletteSectionAttrs?.dynamicVariantKey) {
+        const newSection = createSection('1');
+        this._applySectionAttrs(newSection, paletteSectionAttrs);
+        newSection.columns[0].blocks.push(...drop.blocks);
+        this.opts.store.update((d) => {
+          const secIdx = d.sections.findIndex((s) => s.id === sectionId);
+          const insertAt = secIdx >= 0 ? secIdx + 1 : d.sections.length;
+          d.sections.splice(insertAt, 0, newSection);
+        });
+        const head = drop.blocks[0];
+        if (head) {
+          this.opts.store.setSelection({
+            kind: 'block',
+            sectionId: newSection.id,
+            columnIndex: 0,
+            blockId: head.id,
+          });
+        }
+        return;
+      }
+      const blocks = drop.blocks;
       this.opts.store.update((d) => {
         const sec = d.sections.find((s) => s.id === sectionId);
         if (!sec) return;
@@ -884,9 +1042,16 @@ export class Canvas {
   }
 
   /**
-   * 内联编辑中拖选文字，若 mouseup 落在 Section padding 等非 Block 区域，
-   * 浏览器仍会向 Section 冒泡 click；此时选区仍在编辑区内，不应切换右侧面板到 Section。
+   * 内联编辑中从编辑区拖选文字，若 mouseup 落在 Section padding / 灰底 / 留白，
+   * 浏览器仍可能对 mouseup 目标派发 click；选区仍在编辑区内时不应提交或改选中。
    */
+  private _shouldSuppressClearSelectionFromTextDrag(): boolean {
+    return (
+      this.pointerGestureStartedInInlineEdit &&
+      this._shouldSuppressSectionSelectFromTextInteraction()
+    );
+  }
+
   private _shouldSuppressSectionSelectFromTextInteraction(): boolean {
     if (!this.editingBlockId) return false;
     const editingEl = this.inner.querySelector('.sm-inline-editing');