mail-editor-pancake 0.0.7 → 0.0.8

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

@@ -5,6 +5,7 @@ import type { Registry } from '../registry/registry';
 import { renderDoc } from '../renderer';
 import type { Store } from '../store/store';
 import { clear, h } from '../utils/dom';
+import { richTextExecCommand } from '../utils/richTextCommand';
 
 export interface SourceViewOptions {
   store: Store;
@@ -110,7 +111,7 @@ export class SourceView {
       ta.value = text;
       document.body.appendChild(ta);
       ta.select();
-      document.execCommand('copy');
+      richTextExecCommand('copy');
       document.body.removeChild(ta);
     }
   }

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

@@ -1,4 +1,5 @@
 import type { Store } from '../store/store';
+import { bindColorPickerInput } from './ColorPickerPopover';
 import { normalizeAccentHex, rgbCssToHex } from '../utils/accentColor';
 import { h, clear } from '../utils/dom';
 import type { EditorTheme } from './theme';
@@ -25,12 +26,20 @@ export interface TopbarOptions {
   onExport: () => void;
   /** 切换编辑器根节点浏览器全屏（由 Editor 实现 Fullscreen API） */
   onFullscreenToggle?: () => void;
+  /** 切换画布 Section / Block 布局虚线边框 */
+  onLayoutBordersToggle?: () => void;
   /** 为 false 时不展示全屏按钮（也可用 `ui.hideTopbarFullscreen`） */
   showFullscreenButton?: boolean;
   /** 为 false 时不展示「邮件设置」按钮（也可用 `ui.hideTopbarMailSettings`） */
   showMailSettingsButton?: boolean;
   /** 为 false 时不渲染左侧产品标题 */
   showTitle?: boolean;
+  /** 为 false 时不展示「清空画布」 */
+  showClearCanvasButton?: boolean;
+  onClearCanvas?: () => void;
+  /** 为 false 时不展示「重置内容」 */
+  showResetContentButton?: boolean;
+  onResetContent?: () => void;
 }
 
 export class Topbar {
@@ -42,6 +51,7 @@ export class Topbar {
   private modeButtons: Record<EditorMode, HTMLButtonElement> = {} as any;
   private accentInput?: HTMLInputElement;
   private fullscreenBtn?: HTMLButtonElement;
+  private layoutBordersBtn?: HTMLButtonElement;
 
   constructor(opts: TopbarOptions) {
     this.opts = opts;
@@ -89,6 +99,15 @@ export class Topbar {
     btn.setAttribute('aria-pressed', active ? 'true' : 'false');
   }
 
+  /** 与画布布局边框开关同步按钮高亮（按钮不存在时忽略） */
+  setLayoutBordersActive(active: boolean) {
+    const btn = this.layoutBordersBtn;
+    if (!btn) return;
+    btn.setAttribute('aria-pressed', active ? 'true' : 'false');
+    btn.title = active ? '隐藏 Section / Block 边框' : '显示 Section / Block 边框';
+    btn.setAttribute('aria-label', active ? '隐藏 Section / Block 边框' : '显示 Section / Block 边框');
+  }
+
   private _render() {
     clear(this.el);
 
@@ -147,7 +166,11 @@ export class Topbar {
         title: '主题色',
         value: '#4f46e5',
       }) as HTMLInputElement;
-      inputEl.addEventListener('input', () => this.opts.onAccentChange!(inputEl.value));
+      bindColorPickerInput(inputEl, {
+        layerRoot: this.opts.accentPickerRoot,
+        liveCommit: true,
+        onCommit: (hex) => this.opts.onAccentChange!(hex),
+      });
       this.accentInput = inputEl;
       themeGroupKids.push(h('div', { class: 'sm-topbar__accent' }, [inputEl]));
     } else {
@@ -175,6 +198,41 @@ export class Topbar {
       [iconRedo(), '重做'],
     );
 
+    const contentActionKids: HTMLElement[] = [];
+    if (this.opts.showClearCanvasButton !== false && typeof this.opts.onClearCanvas === 'function') {
+      contentActionKids.push(
+        h(
+          'button',
+          {
+            class: 'sm-btn sm-btn--ghost',
+            type: 'button',
+            title: '移除画布上所有 Section 与组件',
+            onclick: () => this.opts.onClearCanvas!(),
+          },
+          ['清空画布'],
+        ),
+      );
+    }
+    if (
+      this.opts.showResetContentButton !== false &&
+      typeof this.opts.onResetContent === 'function'
+    ) {
+      contentActionKids.push(
+        h(
+          'button',
+          {
+            class: 'sm-btn sm-btn--ghost',
+            type: 'button',
+            title: '恢复为预置邮件结构',
+            onclick: () => this.opts.onResetContent!(),
+          },
+          ['重置内容'],
+        ),
+      );
+    }
+    const contentActionsGroup =
+      contentActionKids.length > 0 && h('div', { class: 'sm-topbar__group' }, contentActionKids);
+
     const insertVar = h(
       'button',
       {
@@ -215,12 +273,32 @@ export class Topbar {
     }
     trailingGroup.push(insertVar, previewBtn, exportBtn);
 
+    const canvasToolKids: HTMLElement[] = [];
+
+    if (typeof this.opts.onLayoutBordersToggle === 'function') {
+      canvasToolKids.push(
+        (this.layoutBordersBtn = h(
+          'button',
+          {
+            class: 'sm-btn sm-btn--ghost sm-topbar__icon-btn sm-topbar__toggle-btn',
+            type: 'button',
+            title: '显示 Section / Block 边框',
+            'aria-label': '显示 Section / Block 边框',
+            'aria-pressed': 'false',
+            onclick: () => this.opts.onLayoutBordersToggle!(),
+          },
+          [iconLayoutBorders()],
+        ) as HTMLButtonElement),
+      );
+    } else {
+      this.layoutBordersBtn = undefined;
+    }
+
     const showFs =
       this.opts.showFullscreenButton !== false &&
       typeof this.opts.onFullscreenToggle === 'function';
-    const fsGroup =
-      showFs &&
-      h('div', { class: 'sm-topbar__group' }, [
+    if (showFs) {
+      canvasToolKids.push(
         (this.fullscreenBtn = h(
           'button',
           {
@@ -233,8 +311,13 @@ export class Topbar {
           },
           [iconFullscreenEnter()],
         ) as HTMLButtonElement),
-      ]);
-    if (!showFs) this.fullscreenBtn = undefined;
+      );
+    } else {
+      this.fullscreenBtn = undefined;
+    }
+
+    const canvasToolsGroup =
+      canvasToolKids.length > 0 && h('div', { class: 'sm-topbar__group' }, canvasToolKids);
 
     const headKids: HTMLElement[] = [];
     if (this.opts.showTitle !== false) {
@@ -246,7 +329,8 @@ export class Topbar {
       h('div', { class: 'sm-topbar__group' }, [segmented]),
       h('div', { class: 'sm-topbar__group sm-topbar__theme-group' }, themeGroupKids),
       h('div', { class: 'sm-topbar__group' }, [this.undoBtn, this.redoBtn]),
-      ...(fsGroup ? [fsGroup] : []),
+      ...(contentActionsGroup ? [contentActionsGroup] : []),
+      ...(canvasToolsGroup ? [canvasToolsGroup] : []),
       h('div', { class: 'sm-topbar__spacer' }),
       h('div', { class: 'sm-topbar__group' }, trailingGroup),
     );
@@ -276,6 +360,13 @@ function iconEye(): SVGElement {
     '<path d="M2 10s3-5 8-5 8 5 8 5-3 5-8 5-8-5-8-5z" stroke="currentColor" stroke-width="1.5" fill="none"/><circle cx="10" cy="10" r="2.4" stroke="currentColor" stroke-width="1.5" fill="none"/>',
   );
 }
+/** 布局边框：虚线框 + 勾选（点亮时显示勾） */
+function iconLayoutBorders(): SVGElement {
+  const el = svg(
+    '<rect x="4.5" y="4.5" width="11" height="11" rx="1.5" stroke="currentColor" stroke-width="1.5" fill="none" stroke-dasharray="2.5 2"/><path d="M7.2 10.1l1.8 1.8 3.8-3.9" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round" class="sm-layout-borders-check"/>',
+  );
+  return el;
+}
 /** 进入全屏：四角向外 */
 function iconFullscreenEnter(): SVGElement {
   return svg(