mail-editor-pancake 0.2.8 → 0.3.0

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

@@ -1,9 +1,9 @@
+import type { SimpleMailT } from '../i18n';
 import type { Store } from '../store/store';
-import { bindColorPickerInput } from './ColorPickerPopover';
 import { normalizeAccentHex, rgbCssToHex } from '../utils/accentColor';
-import { h, clear } from '../utils/dom';
+import { clear, h } from '../utils/dom';
+import { bindColorPickerInput } from './ColorPickerPopover';
 import type { EditorTheme } from './theme';
-import type { SimpleMailT } from '../i18n';
 
 export type EditorMode = 'design' | 'source';
 
@@ -32,6 +32,8 @@ export interface TopbarOptions {
   onFullscreenToggle?: () => void;
   /** 切换画布 Section / Block 布局虚线边框 */
   onLayoutBordersToggle?: () => void;
+  /** 进入 / 退出「选择节」批量操作模式（批量复制 / 导出 / 删除 Section） */
+  onSectionSelectToggle?: () => void;
   /** 为 false 时不展示全屏按钮（也可用 `ui.hideTopbarFullscreen`） */
   showFullscreenButton?: boolean;
   /** 为 false 时不展示「邮件设置」按钮（也可用 `ui.hideTopbarMailSettings`） */
@@ -62,6 +64,7 @@ export class Topbar {
   private accentInput?: HTMLInputElement;
   private fullscreenBtn?: HTMLButtonElement;
   private layoutBordersBtn?: HTMLButtonElement;
+  private sectionSelectBtn?: HTMLButtonElement;
   private insertVariableBtn?: HTMLButtonElement;
 
   constructor(opts: TopbarOptions) {
@@ -97,7 +100,9 @@ export class Topbar {
   /** 根据 `.sm-root` 上计算后的 `--sm-primary` 更新拾取器显示（无拾取器或未挂 root 时忽略） */
   syncAccentPicker() {
     if (!this.accentInput || !this.opts.accentPickerRoot) return;
-    const raw = getComputedStyle(this.opts.accentPickerRoot).getPropertyValue('--sm-primary').trim();
+    const raw = getComputedStyle(this.opts.accentPickerRoot)
+      .getPropertyValue('--sm-primary')
+      .trim();
     const base = normalizeAccentHex(raw) || rgbCssToHex(raw);
     if (!base) return;
     const norm = normalizeAccentHex(base);
@@ -117,12 +122,26 @@ export class Topbar {
     btn.setAttribute('aria-pressed', active ? 'true' : 'false');
   }
 
+  /** 「选择节」批量模式激活时高亮顶栏按钮（按钮不存在时忽略） */
+  setSectionSelectActive(active: boolean) {
+    const btn = this.sectionSelectBtn;
+    if (!btn) return;
+    btn.setAttribute('aria-pressed', active ? 'true' : 'false');
+    const title = active
+      ? this.opts.t('topbar.sectionSelectActive')
+      : this.opts.t('topbar.sectionSelect');
+    btn.title = title;
+    btn.setAttribute('aria-label', title);
+  }
+
   /** 与画布布局边框开关同步按钮高亮（按钮不存在时忽略） */
   setLayoutBordersActive(active: boolean) {
     const btn = this.layoutBordersBtn;
     if (!btn) return;
     btn.setAttribute('aria-pressed', active ? 'true' : 'false');
-    const title = active ? this.opts.t('topbar.hideLayoutBorders') : this.opts.t('topbar.showLayoutBorders');
+    const title = active
+      ? this.opts.t('topbar.hideLayoutBorders')
+      : this.opts.t('topbar.showLayoutBorders');
     btn.title = title;
     btn.setAttribute('aria-label', title);
   }
@@ -139,7 +158,11 @@ export class Topbar {
     clear(this.el);
     const t = this.opts.t;
 
-    const segmented = h('div', { class: 'sm-segmented sm-topbar__mode-seg', role: 'group', 'aria-label': t('topbar.mode') });
+    const segmented = h('div', {
+      class: 'sm-segmented sm-topbar__mode-seg',
+      role: 'group',
+      'aria-label': t('topbar.mode'),
+    });
     const designBtn = modeSegBtn({
       active: this.opts.mode === 'design',
       title: t('topbar.design'),
@@ -219,7 +242,10 @@ export class Topbar {
     });
 
     const contentActionKids: HTMLElement[] = [];
-    if (this.opts.showClearCanvasButton !== false && typeof this.opts.onClearCanvas === 'function') {
+    if (
+      this.opts.showClearCanvasButton !== false &&
+      typeof this.opts.onClearCanvas === 'function'
+    ) {
       contentActionKids.push(
         actionBtn({
           class: 'sm-btn--ghost',
@@ -300,15 +326,15 @@ export class Topbar {
       );
     }
     if (this.opts.showInsertVariableButton !== false) {
-      trailingGroup.push(
-        (this.insertVariableBtn = actionBtn({
-          class: 'sm-topbar__insert-var',
-          title: t('topbar.insertVariable'),
-          icon: iconVariable(),
-          label: t('topbar.insertVariable'),
-          onclick: (e: Event) => this.opts.onInsertVariable(e.currentTarget as HTMLElement),
-        })),
-      );
+      const insertVariableBtn = actionBtn({
+        class: 'sm-topbar__insert-var',
+        title: t('topbar.insertVariable'),
+        icon: iconVariable(),
+        label: t('topbar.insertVariable'),
+        onclick: (e: Event) => this.opts.onInsertVariable(e.currentTarget as HTMLElement),
+      });
+      this.insertVariableBtn = insertVariableBtn;
+      trailingGroup.push(insertVariableBtn);
     } else {
       this.insertVariableBtn = undefined;
     }
@@ -316,16 +342,29 @@ export class Topbar {
 
     const canvasToolKids: HTMLElement[] = [];
 
+    if (typeof this.opts.onSectionSelectToggle === 'function') {
+      this.sectionSelectBtn = iconOnlyBtn({
+        class: 'sm-btn--ghost sm-topbar__toggle-btn',
+        title: t('topbar.sectionSelect'),
+        icon: iconSectionSelect(),
+        pressed: false,
+        onclick: () => this.opts.onSectionSelectToggle!(),
+      });
+      canvasToolKids.push(this.sectionSelectBtn);
+    } else {
+      this.sectionSelectBtn = undefined;
+    }
+
     if (typeof this.opts.onLayoutBordersToggle === 'function') {
-      canvasToolKids.push(
-        (this.layoutBordersBtn = iconOnlyBtn({
-          class: 'sm-btn--ghost sm-topbar__toggle-btn',
-          title: t('topbar.showLayoutBorders'),
-          icon: iconLayoutBorders(),
-          pressed: false,
-          onclick: () => this.opts.onLayoutBordersToggle!(),
-        }) as HTMLButtonElement),
-      );
+      const layoutBordersBtn = iconOnlyBtn({
+        class: 'sm-btn--ghost sm-topbar__toggle-btn',
+        title: t('topbar.showLayoutBorders'),
+        icon: iconLayoutBorders(),
+        pressed: false,
+        onclick: () => this.opts.onLayoutBordersToggle!(),
+      }) as HTMLButtonElement;
+      this.layoutBordersBtn = layoutBordersBtn;
+      canvasToolKids.push(layoutBordersBtn);
     } else {
       this.layoutBordersBtn = undefined;
     }
@@ -334,15 +373,15 @@ export class Topbar {
       this.opts.showFullscreenButton !== false &&
       typeof this.opts.onFullscreenToggle === 'function';
     if (showFs) {
-      canvasToolKids.push(
-        (this.fullscreenBtn = iconOnlyBtn({
-          class: 'sm-btn--ghost sm-topbar__toggle-btn',
-          title: t('topbar.fullscreen'),
-          icon: iconFullscreenEnter(),
-          pressed: false,
-          onclick: () => this.opts.onFullscreenToggle!(),
-        }) as HTMLButtonElement),
-      );
+      const fullscreenBtn = iconOnlyBtn({
+        class: 'sm-btn--ghost sm-topbar__toggle-btn',
+        title: t('topbar.fullscreen'),
+        icon: iconFullscreenEnter(),
+        pressed: false,
+        onclick: () => this.opts.onFullscreenToggle!(),
+      }) as HTMLButtonElement;
+      this.fullscreenBtn = fullscreenBtn;
+      canvasToolKids.push(fullscreenBtn);
     } else {
       this.fullscreenBtn = undefined;
     }
@@ -508,6 +547,12 @@ function iconImportDoc(): SVGElement {
     '<path d="M10 4.5v6.5M7.2 9.2 10 12l2.8-2.8M5.5 14.5h9" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/><rect x="4" y="14" width="12" height="2.5" rx=".6" fill="currentColor"/>',
   );
 }
+/** 选择节（批量操作）：勾选列表 */
+function iconSectionSelect(): SVGElement {
+  return svg(
+    '<rect x="3" y="3.5" width="14" height="13" rx="2" stroke="currentColor" stroke-width="1.4" fill="none"/><path d="M6.2 10l2.2 2.2 4.6-5" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>',
+  );
+}
 /** 显示边框：圆角矩形描边（开启时由 toggle 样式点亮 currentColor） */
 function iconLayoutBorders(): SVGElement {
   return svgPathFill(

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

@@ -1,7 +1,7 @@
+import type { SimpleMailT } from '../i18n';
 import type { Variable } from '../types';
-import { variablePlaceholder } from '../variables';
 import { h } from '../utils/dom';
-import type { SimpleMailT } from '../i18n';
+import { variablePlaceholder } from '../variables';
 
 export interface VariablePickerHandlers {
   onPickKey: (v: Variable) => void;
@@ -88,9 +88,7 @@ export function buildVariablePickerBody(
 ): HTMLElement {
   const wrap = h('div', { class: 'sm-var-picker' });
   if (!vars.length) {
-    wrap.append(
-      h('div', { class: 'sm-empty-form' }, [t('variablePicker.empty')]),
-    );
+    wrap.append(h('div', { class: 'sm-empty-form' }, [t('variablePicker.empty')]));
     return wrap;
   }
   for (const v of vars) {

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

@@ -89,7 +89,7 @@ export interface ImageGalleryAdapter {
   /** 搜索 + 分页；`query` 为搜索框当前文本，`page` 从 0 起 */
   listItems: (args: { query: string; page: number }) => Promise<ImageGalleryListResult>;
   /** 在弹层内「上传到图库」：成功后编辑器会重新拉取第 0 页 */
-  uploadFile?: (file: File) => Promise<void | string>;
+  uploadFile?: (file: File) => Promise<unknown>;
   /** 在弹层内「通过链接添加」：校验/落库后编辑器会重新拉取第 0 页 */
   addByUrl?: (url: string) => Promise<void>;
   /** 从图库删除一条；提供后每张缩略图右上角显示删除按钮 */