mail-editor-pancake 0.2.7 → 0.3.0

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

@@ -1,6 +1,6 @@
+import { type SimpleMailT, createI18nContext } from '../i18n';
 import { normalizeAccentHex } from '../utils/accentColor';
 import { h } from '../utils/dom';
-import { createI18nContext, type SimpleMailT } from '../i18n';
 
 /** 邮件常用预设色 */
 export const COLOR_PICKER_PALETTE = [
@@ -70,7 +70,7 @@ function positionLayer(layer: HTMLElement, anchor: HTMLElement, layerRoot: HTMLE
   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`;
+      layer.style.left = `${Math.max(4, Number.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`;

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

@@ -1,6 +1,19 @@
+import {
+  type SimpleMailI18nContext,
+  type SimpleMailLocale,
+  type SimpleMailMessagesInput,
+  type SimpleMailT,
+  createI18nContext,
+} from '../i18n';
 import { Registry, defineBlock } from '../registry/registry';
 import { renderDoc } from '../renderer';
-import { Store, createSection, findBlockLocation, pruneSectionIfEmpty } from '../store/store';
+import {
+  Store,
+  createSection,
+  findBlockLocation,
+  findSection,
+  pruneSectionIfEmpty,
+} from '../store/store';
 import type {
   Block,
   BlockDefinition,
@@ -8,40 +21,36 @@ import type {
   EmailDoc,
   GlobalStyles,
   RenderEngine,
+  Section,
   Selection,
   Variable,
 } from '../types';
+import { accentPrimarySoftRgba, normalizeAccentHex } from '../utils/accentColor';
 import {
-  buildLinkVariableHtml,
-  normalizeVariable,
-  variablePlaceholder,
-} from '../variables';
+  type SelectionClipboardEnvelope,
+  collectSelectionVariableKeys,
+  parseDocClipboard,
+  parseSelectionClipboard,
+  regenerateBlockId,
+  regenerateDocIds,
+  remapSectionIds,
+  serializeDocClipboard,
+  serializeSelectionClipboard,
+} from '../utils/docClipboard';
 import { clear, h } from '../utils/dom';
 import { appendInlineToRichHtml } from '../utils/richHtmlInsert';
+import { buildLinkVariableHtml, normalizeVariable, variablePlaceholder } from '../variables';
 import { Canvas } from './Canvas';
 import { ExportModal } from './ExportModal';
+import { ImportDocModal, readTextFromClipboard, writeTextToClipboard } from './ImportDocModal';
 import { LeftPanel } from './LeftPanel';
 import { PreviewModal } from './PreviewModal';
 import { RichTextToolbar } from './RichTextToolbar';
 import { RightPanel } from './RightPanel';
 import { SourceView } from './SourceView';
-import { Topbar, type EditorMode } from './Topbar';
-import type { EditorTheme } from './theme';
+import { type EditorMode, Topbar } from './Topbar';
 import type { ImageAssetsHandlers } from './imageAssets';
-import { accentPrimarySoftRgba, normalizeAccentHex } from '../utils/accentColor';
-import {
-  parseDocClipboard,
-  regenerateDocIds,
-  serializeDocClipboard,
-} from '../utils/docClipboard';
-import { ImportDocModal, readTextFromClipboard, writeTextToClipboard } from './ImportDocModal';
-import {
-  createI18nContext,
-  type SimpleMailI18nContext,
-  type SimpleMailLocale,
-  type SimpleMailMessagesInput,
-  type SimpleMailT,
-} from '../i18n';
+import type { EditorTheme } from './theme';
 
 import './styles.css';
 
@@ -160,6 +169,19 @@ export class MailEditor {
       return;
     }
     if (this.mode !== 'design') return;
+    if (this.canvas.isSectionSelectMode) {
+      // 节选择模式：Esc 优先退出模式（弹窗打开时仍优先关弹窗）
+      if (document.querySelector('.sm-modal__mask.is-open')) return;
+      const t = e.target as HTMLElement | null;
+      if (t?.closest?.('.sm-modal__mask')) return;
+      const ae = document.activeElement as HTMLElement | null;
+      if (ae && (ae.tagName === 'INPUT' || ae.tagName === 'TEXTAREA' || ae.isContentEditable)) {
+        return;
+      }
+      e.preventDefault();
+      this._exitSectionSelectMode();
+      return;
+    }
     if (!this.store.selection) return;
     if (document.querySelector('.sm-modal__mask.is-open')) return;
     const t = e.target as HTMLElement | null;
@@ -202,12 +224,13 @@ export class MailEditor {
 
   /** 内联编辑、右栏表单等应使用控件/浏览器本地撤销，而非文档 history */
   private _shouldDeferToLocalUndoRedo(target: Node): boolean {
-    const el =
-      target instanceof Element ? target : (target.parentElement as Element | null);
+    const el = target instanceof Element ? target : (target.parentElement as Element | null);
     if (!el) return false;
     if (el.closest('.sm-inline-editing')) return true;
     if (el.closest('.cm-editor')) return true;
-    const panelField = el.closest('.sm-panel--right input, .sm-panel--right textarea, .sm-panel--right select');
+    const panelField = el.closest(
+      '.sm-panel--right input, .sm-panel--right textarea, .sm-panel--right select',
+    );
     if (panelField) return true;
     return false;
   }
@@ -363,10 +386,7 @@ export class MailEditor {
     if (normalized.kind === 'link') {
       const token = variablePlaceholder(normalized.key);
       if (this._tryApplyLinkVariableToken(token)) return true;
-      const html = buildLinkVariableHtml(
-        token,
-        this.store.doc.styles.linkColor || '#ff5a00',
-      );
+      const html = buildLinkVariableHtml(token, this.store.doc.styles.linkColor || '#ff5a00');
       return this._insertAtFocus(html, true);
     }
     return this.insertVariableKey(normalized);
@@ -435,6 +455,190 @@ export class MailEditor {
     return ok;
   }
 
+  /**
+   * 复制局部设计稿：选中 Section / Block 的 JSON 写入剪贴板，可在其他画布「追加」粘贴。
+   * @param target 显式指定目标（工具条调用时传入）；缺省用当前选中项
+   */
+  async copySelectionDesign(
+    target?: { sectionId: string } | { blockId: string },
+  ): Promise<boolean> {
+    this.canvas.commitInlineEdit();
+    const doc = this.store.doc;
+    let sections: Section[] = [];
+    let blocks: Block[] = [];
+
+    if (target && 'sectionId' in target) {
+      const sec = findSection(doc, target.sectionId);
+      if (sec) sections = [sec];
+    } else if (target && 'blockId' in target) {
+      const loc = findBlockLocation(doc, target.blockId);
+      if (loc) blocks = [loc.block];
+    } else {
+      const sel = this.store.selection;
+      if (sel?.kind === 'section') {
+        const sec = findSection(doc, sel.sectionId);
+        if (sec) sections = [sec];
+      } else if (sel?.kind === 'block') {
+        const loc = findBlockLocation(doc, sel.blockId);
+        if (loc) blocks = [loc.block];
+      }
+    }
+
+    if (!sections.length && !blocks.length) {
+      this._showToast(this.i18n.t('toast.copySelectionNoTarget'));
+      return false;
+    }
+
+    return this._writeSelectionClipboard(sections, blocks);
+  }
+
+  /**
+   * 批量复制混合勾选（整节 + 散块）的局部设计稿到剪贴板。
+   * 统一走 sections 通道：散块按母节骨架重建（保 attrs / 列结构，各列仅保留选中块），粘贴后所见即所得。
+   * @returns 是否成功写入剪贴板
+   */
+  async copySectionsDesign(sectionIds: string[], blockIds: string[] = []): Promise<boolean> {
+    this.canvas.commitInlineEdit();
+    const sections = this._buildSectionsFromChecked(sectionIds, blockIds);
+    if (!sections.length) {
+      this._showToast(this.i18n.t('toast.copySelectionNoTarget'));
+      return false;
+    }
+    return this._writeSelectionClipboard(sections, []);
+  }
+
+  /**
+   * 批量导出混合勾选（整节 + 散块）的局部设计稿为 JSON 文件（与剪贴板内容同构，可手动粘贴追加）。
+   * @returns 是否成功触发下载
+   */
+  exportSectionsDesign(sectionIds: string[], blockIds: string[] = []): boolean {
+    this.canvas.commitInlineEdit();
+    const sections = this._buildSectionsFromChecked(sectionIds, blockIds);
+    if (!sections.length) {
+      this._showToast(this.i18n.t('toast.copySelectionNoTarget'));
+      return false;
+    }
+    const json = serializeSelectionClipboard({ sections, variables: this.store.doc.variables });
+    const blob = new Blob([json], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = `simple-mail-sections-${new Date().toISOString().slice(0, 10)}.json`;
+    document.body.append(link);
+    link.click();
+    link.remove();
+    window.setTimeout(() => URL.revokeObjectURL(url), 1000);
+    this._showToast(this.i18n.t('toast.exportSelectionOk'));
+    return true;
+  }
+
+  /**
+   * 批量删除 Section（单条撤销记录，Ctrl/Cmd+Z 可整体恢复）。
+   * @returns 实际删除的节数量
+   */
+  removeSections(sectionIds: string[]): number {
+    this.canvas.commitInlineEdit();
+    this._blurRightPanelIfFocused();
+    const idSet = new Set(sectionIds);
+    let removed = 0;
+    this.store.update((d) => {
+      const before = d.sections.length;
+      d.sections = d.sections.filter((s) => !idSet.has(s.id));
+      removed = before - d.sections.length;
+    });
+    this.store.setSelection(null);
+    if (removed > 0) this._showToast(this.i18n.t('toast.removeSectionsOk', { count: removed }));
+    return removed;
+  }
+
+  /**
+   * 批量删除选择模式下的混合勾选（单条撤销记录）。
+   * 只删显式命中的内容：整选节整节删除；散选块仅从列中移除，节壳保留（可再圈选清理）。
+   * @returns 实际删除的节 + 块总数
+   */
+  removeCheckedSelection(sectionIds: string[], blockIds: string[]): number {
+    this.canvas.commitInlineEdit();
+    this._blurRightPanelIfFocused();
+    const secSet = new Set(sectionIds);
+    const blockSet = new Set(blockIds);
+    let removedSections = 0;
+    let removedBlocks = 0;
+    this.store.update((d) => {
+      const before = d.sections.length;
+      d.sections = d.sections.filter((s) => !secSet.has(s.id));
+      removedSections = before - d.sections.length;
+      for (const sec of d.sections) {
+        for (const col of sec.columns) {
+          const n = col.blocks.length;
+          col.blocks = col.blocks.filter((b) => !blockSet.has(b.id));
+          removedBlocks += n - col.blocks.length;
+        }
+      }
+    });
+    this.store.setSelection(null);
+    const total = removedSections + removedBlocks;
+    if (total > 0) {
+      this._showToast(
+        this.i18n.t('toast.removeCheckedOk', {
+          sections: removedSections,
+          blocks: removedBlocks,
+        }),
+      );
+    }
+    return total;
+  }
+
+  /**
+   * 按混合勾选构建局部设计稿节列表（统一走 sections 通道）：
+   * - 整选节：原样携带（id 由粘贴端重生成）
+   * - 含散选块的节：按母节骨架重建——保留 attrs / layout / 列结构，各列仅保留选中块
+   */
+  private _buildSectionsFromChecked(sectionIds: string[], blockIds: string[]): Section[] {
+    const secSet = new Set(sectionIds);
+    const blockSet = new Set(blockIds);
+    const out: Section[] = [];
+    for (const sec of this.store.doc.sections) {
+      if (secSet.has(sec.id)) {
+        out.push(sec);
+        continue;
+      }
+      const hasHit = sec.columns.some((c) => c.blocks.some((b) => blockSet.has(b.id)));
+      if (!hasHit) continue;
+      const rebuilt = structuredClone(sec);
+      for (let i = 0; i < rebuilt.columns.length; i++) {
+        const src = sec.columns[i];
+        rebuilt.columns[i].blocks = src.blocks
+          .filter((b) => blockSet.has(b.id))
+          .map((b) => structuredClone(b));
+      }
+      out.push(rebuilt);
+    }
+    return out;
+  }
+
+  /** 序列化局部设计稿写入剪贴板并 toast 反馈 */
+  private async _writeSelectionClipboard(sections: Section[], blocks: Block[]): Promise<boolean> {
+    const ok = await writeTextToClipboard(
+      serializeSelectionClipboard({ sections, blocks, variables: this.store.doc.variables }),
+    );
+    this._showToast(
+      ok ? this.i18n.t('toast.copySelectionOk') : this.i18n.t('toast.copyDesignFailed'),
+    );
+    return ok;
+  }
+
+  /**
+   * 程序化粘贴局部设计稿：把 `simple-mail/selection` 信封内容**追加**到当前画布（不覆盖）。
+   * 未注册的 block type 会被跳过；内容引用到的变量会按 key 并入当前文档变量列表。
+   * @returns 是否成功解析并追加
+   */
+  importSelectionDesignFromJson(raw: string): boolean {
+    const parsed = parseSelectionClipboard(raw);
+    if (!parsed) return false;
+    this._applyImportedSelection(parsed);
+    return true;
+  }
+
   /** 打开导入设计稿对话框（从剪贴板或手动粘贴 JSON，覆盖当前画布）。 */
   openImportDocDesign(): void {
     this.canvas.commitInlineEdit();
@@ -497,7 +701,10 @@ export class MailEditor {
     }
     const dark = this._chromeIsEffectivelyDark();
     this.root.style.setProperty('--sm-primary', this.accentColorOverride);
-    this.root.style.setProperty('--sm-primary-soft', accentPrimarySoftRgba(this.accentColorOverride, dark));
+    this.root.style.setProperty(
+      '--sm-primary-soft',
+      accentPrimarySoftRgba(this.accentColorOverride, dark),
+    );
   }
 
   private _unbindSystemThemeMqForAccent() {
@@ -548,6 +755,10 @@ export class MailEditor {
       showFullscreenButton: this.opts.ui?.hideTopbarFullscreen !== true,
       onFullscreenToggle: () => void this._toggleFullscreen(),
       onLayoutBordersToggle: () => this._toggleLayoutBorders(),
+      onSectionSelectToggle:
+        this.opts.ui?.hideTopbarSectionSelect === true
+          ? undefined
+          : () => this._toggleSectionSelectMode(),
       showClearCanvasButton: this.opts.ui?.hideTopbarClearCanvas !== true,
       onClearCanvas: () => this.clearCanvas(),
       showResetContentButton: this.opts.ui?.hideTopbarResetContent !== true,
@@ -563,8 +774,7 @@ export class MailEditor {
     this.leftPanel = new LeftPanel({
       registry: this.registry,
       t: this.i18n.t,
-      blockGroupTitle:
-        ui?.paletteBlockGroupTitle ?? ui?.blockCategoryLabels?.content,
+      blockGroupTitle: ui?.paletteBlockGroupTitle ?? ui?.blockCategoryLabels?.content,
       customPaletteTooltipSuffix: ui?.customPaletteTooltipSuffix,
       hiddenPaletteBlockTypes: ui?.hiddenPaletteBlockTypes,
       enableDynamicVariantKey: ui?.enableDynamicVariantKey,
@@ -579,7 +789,13 @@ export class MailEditor {
       clearSelectionOnCanvasMargin: this.opts.clearSelectionOnCanvasMargin === true,
       layerRoot: this.root,
       ui: this.opts.ui,
+      imageAssets: this.opts.imageAssets,
       t: this.i18n.t,
+      onCopySelectionDesign: (target) => void this.copySelectionDesign(target),
+      onSectionSelectCopy: (ids, blockIds) => void this.copySectionsDesign(ids, blockIds),
+      onSectionSelectExport: (ids, blockIds) => this.exportSectionsDesign(ids, blockIds),
+      onSectionSelectRemove: (ids, blockIds) => this.removeCheckedSelection(ids, blockIds),
+      onSectionSelectModeChange: (active) => this.topbar.setSectionSelectActive(active),
     });
     this.rightPanel = new RightPanel({
       store: this.store,
@@ -622,6 +838,7 @@ export class MailEditor {
 
   private _setMode(m: EditorMode) {
     if (this.mode === m) return;
+    if (this.canvas.isSectionSelectMode) this._exitSectionSelectMode();
     this._closeVariablePicker();
     this._dismissVariablePopover();
     if (m !== 'design') this.canvas.commitInlineEdit();
@@ -692,7 +909,8 @@ export class MailEditor {
   private _bindVariablePickerOutsideClick(anchor: HTMLElement) {
     this._unbindVariablePickerOutsideClick();
     const handler = (ev: MouseEvent) => {
-      if (!this.rightPanel.isVariablePickerOpen() || this.rightPanel.isVariablePickerPinned()) return;
+      if (!this.rightPanel.isVariablePickerOpen() || this.rightPanel.isVariablePickerPinned())
+        return;
       const target = ev.target as Node;
       if (this.rightPanel.el.contains(target)) return;
       if (anchor.contains(target) || target === anchor) return;
@@ -876,11 +1094,7 @@ export class MailEditor {
   /**
    * 按当前选中插入块：block → 其后；section → 该 section 首列末尾；无选中 → 文档最后一节首列末尾。
    */
-  private _insertBlockRelativeToSelection(
-    d: EmailDoc,
-    sel: Selection | null,
-    block: Block,
-  ): void {
+  private _insertBlockRelativeToSelection(d: EmailDoc, sel: Selection | null, block: Block): void {
     if (sel?.kind === 'block') {
       const sec = d.sections.find((s) => s.id === sel.sectionId);
       const col = sec?.columns[sel.columnIndex];
@@ -1031,6 +1245,7 @@ export class MailEditor {
     this.importDocModal = new ImportDocModal({
       readClipboard: readTextFromClipboard,
       onApply: (doc) => this._applyImportedDoc(doc),
+      onApplySelection: (envelope) => this._applyImportedSelection(envelope),
       t: this.i18n.t,
     });
   }
@@ -1049,6 +1264,118 @@ export class MailEditor {
     this._showToast(this.i18n.t('toast.importDesignOk'));
   }
 
+  /**
+   * 追加局部设计稿：过滤未注册类型 → 变量并集 → 按当前选中定位落点 → id 重生成后写入。
+   * 全程走 store.update（可撤销），不覆盖任何现有内容。
+   */
+  private _applyImportedSelection(source: SelectionClipboardEnvelope) {
+    this.canvas.commitInlineEdit();
+    this._blurRightPanelIfFocused();
+
+    const skippedTypes = new Set<string>();
+    const filterBlocks = (blocks: Block[]): Block[] => {
+      const kept: Block[] = [];
+      for (const b of blocks) {
+        if (this.registry.get(b.type)) kept.push(b);
+        else skippedTypes.add(b.type);
+      }
+      return kept;
+    };
+
+    const sections = source.sections
+      .map((sec) => ({
+        ...sec,
+        columns: sec.columns.map((c) => ({ ...c, blocks: filterBlocks(c.blocks) })),
+      }))
+      .filter((sec) => sec.columns.some((c) => c.blocks.length > 0));
+    const blocks = filterBlocks(source.blocks);
+
+    if (!sections.length && !blocks.length) {
+      this._showToast(
+        skippedTypes.size
+          ? this.i18n.t('toast.pasteSelectionSkipped', { types: [...skippedTypes].join(', ') })
+          : this.i18n.t('toast.pasteSelectionEmpty'),
+      );
+      return;
+    }
+
+    // 变量并集：只并入「内容引用到 && 当前文档缺失」的 key
+    const usedKeys = collectSelectionVariableKeys(source);
+    const existingKeys = new Set(this.store.doc.variables.map((v) => v.key));
+    const mergedVars = source.variables.filter(
+      (v) => usedKeys.has(v.key) && !existingKeys.has(v.key),
+    );
+
+    const sel = this.store.selection;
+    let nextSelection: Selection | null = null;
+
+    this.store.update((d) => {
+      if (mergedVars.length) {
+        d.variables = [...d.variables, ...mergedVars.map((v) => ({ ...v }))];
+      }
+
+      if (sections.length) {
+        // 落点：选中 Section（或选中 Block 的所属节）之后；无选中则追加末尾
+        const anchorId =
+          sel?.kind === 'section'
+            ? sel.sectionId
+            : sel?.kind === 'block'
+              ? findBlockLocation(d, sel.blockId)?.section.id
+              : undefined;
+        const anchorIdx = anchorId ? d.sections.findIndex((s) => s.id === anchorId) : -1;
+        const clones = sections.map((s) => remapSectionIds(s));
+        const at = anchorIdx >= 0 ? anchorIdx + 1 : d.sections.length;
+        d.sections.splice(at, 0, ...clones);
+        nextSelection = { kind: 'section', sectionId: clones[0].id };
+      }
+
+      if (blocks.length) {
+        const clones = blocks.map((b) => regenerateBlockId(b));
+        if (sel?.kind === 'block') {
+          const loc = findBlockLocation(d, sel.blockId);
+          if (loc) {
+            const col = loc.section.columns[loc.columnIndex];
+            const at = col.blocks.findIndex((b) => b.id === loc.block.id);
+            col.blocks.splice(at < 0 ? col.blocks.length : at + 1, 0, ...clones);
+            nextSelection = {
+              kind: 'block',
+              sectionId: loc.section.id,
+              columnIndex: loc.columnIndex,
+              blockId: clones[0].id,
+            };
+            return;
+          }
+        }
+        if (sel?.kind === 'section') {
+          const sec = findSection(d, sel.sectionId);
+          if (sec?.columns.length) {
+            sec.columns[0].blocks.push(...clones);
+            nextSelection = {
+              kind: 'block',
+              sectionId: sec.id,
+              columnIndex: 0,
+              blockId: clones[0].id,
+            };
+            return;
+          }
+        }
+        // 无可用落点：包一层单列 Section 追加到末尾（与 autoWrapSection 行为一致）
+        const host = createSection('1');
+        host.columns[0].blocks = clones;
+        d.sections.push(host);
+        nextSelection = { kind: 'section', sectionId: host.id };
+      }
+    });
+
+    this.store.setSelection(nextSelection);
+
+    this._showToast(
+      skippedTypes.size
+        ? this.i18n.t('toast.pasteSelectionSkipped', { types: [...skippedTypes].join(', ') })
+        : this.i18n.t('toast.pasteSelectionOk'),
+    );
+  }
+
   private _showExport() {
     // 切回设计模式时如果还在内联编辑，先把内容提交进 store
     this.canvas.commitInlineEdit();
@@ -1140,6 +1467,17 @@ export class MailEditor {
     this.root.classList.toggle('sm-show-layout-borders', this.showLayoutBorders);
     this.topbar.setLayoutBordersActive(this.showLayoutBorders);
   }
+
+  /** 顶栏「选择节」入口：进入 / 退出 Section 批量选择模式（批量复制 / 导出 / 删除） */
+  private _toggleSectionSelectMode() {
+    // 顶栏高亮由 canvas.onSectionSelectModeChange 回调统一同步（顶栏按钮 / 画布「完成」/ Esc / ⌘点击直达同源）
+    if (this.canvas.isSectionSelectMode) this._exitSectionSelectMode();
+    else this.canvas.enterSectionSelectMode();
+  }
+
+  private _exitSectionSelectMode() {
+    this.canvas.exitSectionSelectMode();
+  }
 }
 
 /** 在 .sm-root 坐标系下定位浮层，靠右的锚点右对齐，并限制在根节点内 */
@@ -1211,7 +1549,8 @@ function smGetFullscreenElement(): Element | null {
 async function smRequestFullscreen(el: HTMLElement): Promise<void> {
   const anyEl = el as HTMLElement & { webkitRequestFullscreen?: () => Promise<void> | void };
   if (typeof anyEl.requestFullscreen === 'function') await anyEl.requestFullscreen();
-  else if (typeof anyEl.webkitRequestFullscreen === 'function') await anyEl.webkitRequestFullscreen();
+  else if (typeof anyEl.webkitRequestFullscreen === 'function')
+    await anyEl.webkitRequestFullscreen();
 }
 
 async function smExitFullscreen(): Promise<void> {
@@ -1248,12 +1587,13 @@ function migrateLegacyStyles(styles: Partial<GlobalStyles>): Partial<GlobalStyle
 function createDefaultDoc(partial?: Partial<EmailDoc>): EmailDoc {
   const mergedStyles = {
     backgroundColor: '#ffffff',
-    fontFamily: 'Inter, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif',
+    fontFamily:
+      'Inter, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif',
     fontSize: '16px',
     fontWeight: '400',
     color: '#433f3f',
     linkColor: '#ff5a00',
-    lineHeight: '1.25',
+    lineHeight: '1.5',
     ...migrateLegacyStyles(partial?.styles ?? {}),
   };
   return {
@@ -1268,7 +1608,7 @@ function createDefaultDoc(partial?: Partial<EmailDoc>): EmailDoc {
     styles: {
       ...mergedStyles,
       fontWeight: mergedStyles.fontWeight ?? '400',
-      lineHeight: mergedStyles.lineHeight ?? '1.25',
+      lineHeight: mergedStyles.lineHeight ?? '1.5',
     },
     sections: partial?.sections ?? [],
   };

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

@@ -1,14 +1,14 @@
+import { html as cmHtml } from '@codemirror/lang-html';
 import { EditorState } from '@codemirror/state';
 import { EditorView, basicSetup } from 'codemirror';
-import { html as cmHtml } from '@codemirror/lang-html';
+import type { SimpleMailT } from '../i18n';
 import type { Registry } from '../registry/registry';
 import { renderDoc } from '../renderer';
 import type { Store } from '../store/store';
-import { prettyHtml } from '../utils/html';
 import { h } from '../utils/dom';
+import { prettyHtml } from '../utils/html';
 import { richTextExecCommand } from '../utils/richTextCommand';
 import { Modal } from './Modal';
-import type { SimpleMailT } from '../i18n';
 
 export interface ExportModalOptions {
   store: Store;
@@ -27,7 +27,7 @@ export class ExportModal {
   private opts: ExportModalOptions;
   private modal: Modal;
   private cm: EditorView | null = null;
-  private current: string = '';
+  private current = '';
 
   constructor(opts: ExportModalOptions) {
     this.opts = opts;
@@ -43,11 +43,9 @@ export class ExportModal {
     const editorHost = h('div', { class: 'sm-export__editor' });
     this.modal.body.append(editorHost);
 
-    const copyBtn = h(
-      'button',
-      { class: 'sm-btn', type: 'button', onclick: () => this._copy() },
-      [this.opts.t('export.copyHtml')],
-    );
+    const copyBtn = h('button', { class: 'sm-btn', type: 'button', onclick: () => this._copy() }, [
+      this.opts.t('export.copyHtml'),
+    ]);
     const beautifyBtn = h(
       'button',
       { class: 'sm-btn', type: 'button', onclick: () => this._beautify() },

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

@@ -1,9 +1,9 @@
+import type { SimpleMailT } from '../i18n';
 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 type { SectionLayout } from '../types';
-import type { SimpleMailT } from '../i18n';
+import { clear, h } from '../utils/dom';
 
 export interface FocusBreadcrumbOptions {
   store: Store;
@@ -62,7 +62,7 @@ export class FocusBreadcrumb {
           h(
             'span',
             {
-              class: `sm-focus-crumb__item sm-focus-crumb__item--current`,
+              class: 'sm-focus-crumb__item sm-focus-crumb__item--current',
               title: item.label,
             },
             [item.label],