mail-editor-pancake 0.0.0 → 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';
@@ -23,8 +24,22 @@ export interface TopbarOptions {
   onInsertVariable: (anchor: HTMLElement) => void;
   onPreview: () => void;
   onExport: () => void;
-  /** 为 false 时不展示「邮件设置」按钮（与 `ui.hideMailMeta` 配套） */
+  /** 切换编辑器根节点浏览器全屏（由 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 {
@@ -35,6 +50,8 @@ export class Topbar {
   private themeButtons!: Record<EditorTheme, HTMLButtonElement>;
   private modeButtons: Record<EditorMode, HTMLButtonElement> = {} as any;
   private accentInput?: HTMLInputElement;
+  private fullscreenBtn?: HTMLButtonElement;
+  private layoutBordersBtn?: HTMLButtonElement;
 
   constructor(opts: TopbarOptions) {
     this.opts = opts;
@@ -72,11 +89,28 @@ export class Topbar {
     if (this.accentInput.value.toLowerCase() !== forInput) this.accentInput.value = forInput;
   }
 
+  /** 与 document fullscreen 状态同步图标与 aria（按钮不存在时忽略） */
+  setFullscreenActive(active: boolean) {
+    const btn = this.fullscreenBtn;
+    if (!btn) return;
+    btn.replaceChildren(active ? iconFullscreenExit() : iconFullscreenEnter());
+    btn.title = active ? '退出全屏' : '全屏';
+    btn.setAttribute('aria-label', active ? '退出全屏' : '全屏');
+    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);
 
-    const title = h('div', { class: 'sm-topbar__title' }, ['Simple Mail Editor']);
-
     const segmented = h('div', { class: 'sm-segmented' });
     const designBtn = h(
       'button',
@@ -132,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 {
@@ -160,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',
       {
@@ -200,11 +273,64 @@ 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';
+    if (showFs) {
+      canvasToolKids.push(
+        (this.fullscreenBtn = h(
+          'button',
+          {
+            class: 'sm-btn sm-btn--ghost sm-topbar__icon-btn',
+            type: 'button',
+            title: '全屏',
+            'aria-label': '全屏',
+            'aria-pressed': 'false',
+            onclick: () => this.opts.onFullscreenToggle!(),
+          },
+          [iconFullscreenEnter()],
+        ) as HTMLButtonElement),
+      );
+    } else {
+      this.fullscreenBtn = undefined;
+    }
+
+    const canvasToolsGroup =
+      canvasToolKids.length > 0 && h('div', { class: 'sm-topbar__group' }, canvasToolKids);
+
+    const headKids: HTMLElement[] = [];
+    if (this.opts.showTitle !== false) {
+      headKids.push(h('div', { class: 'sm-topbar__title' }, ['Simple Mail Editor']));
+    }
+
     this.el.append(
-      title,
+      ...headKids,
       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]),
+      ...(contentActionsGroup ? [contentActionsGroup] : []),
+      ...(canvasToolsGroup ? [canvasToolsGroup] : []),
       h('div', { class: 'sm-topbar__spacer' }),
       h('div', { class: 'sm-topbar__group' }, trailingGroup),
     );
@@ -234,6 +360,25 @@ 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(
+    '<path d="M6 4H4v2M14 4h2v2M6 16H4v-2M14 16h2v-2M4 6V4h2M16 6V4h-2M4 14v2h2M16 14v2h-2" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round"/>',
+  );
+}
+/** 退出全屏：四角向内 */
+function iconFullscreenExit(): SVGElement {
+  return svg(
+    '<path d="M8 4v4H4M12 4v4h4M8 16v-4H4M12 16v-4h4M4 8h4v4H4M16 8h-4v4h4" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round"/>',
+  );
+}
 function iconSun(): SVGElement {
   return svgTheme(
     '<circle cx="10" cy="10" r="3.2" fill="none" stroke="currentColor" stroke-width="1.5"/><path d="M10 3.5V5M10 15v1.5M16.5 10H15M5 10H3.5M14.1 5.9 13 7M7 13 5.9 14.1M14.1 14.1 13 13M7 7 5.9 5.9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>',