mail-editor-pancake 0.0.0 → 0.0.8

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

@@ -8,14 +8,13 @@ export type PreviewDevice = 'pc' | 'pad' | 'phone';
 
 interface DeviceSpec {
   width: number;
-  height: number;
   label: string;
 }
 
 const DEVICES: Record<PreviewDevice, DeviceSpec> = {
-  pc: { width: 800, height: 700, label: 'PC' },
-  pad: { width: 640, height: 800, label: 'Pad' },
-  phone: { width: 375, height: 667, label: 'Phone' },
+  pc: { width: 800, label: 'PC' },
+  pad: { width: 640, label: 'Pad' },
+  phone: { width: 375, label: 'Phone' },
 };
 
 export interface PreviewModalOptions {
@@ -35,14 +34,18 @@ export class PreviewModal {
   private iframe: HTMLIFrameElement;
   private viewport: HTMLElement;
   private deviceBtns: Record<PreviewDevice, HTMLButtonElement> = {} as any;
+  private iframeRo?: ResizeObserver;
+  private layoutRaf: number | null = null;
+  private onWinResize?: () => void;
 
   constructor(opts: PreviewModalOptions) {
     this.opts = opts;
     this.modal = new Modal({
       title: '预览邮件',
       className: 'sm-modal--preview',
-      width: 'min(960px, 96vw)',
-      height: 'min(820px, 92vh)',
+      width: 'min(960px, calc(100vw - 32px))',
+      /** 高度随 iframe 内容测量，见 _fitPreviewHeight；不超过屏高由 CSS max-height 约束 */
+      onClose: () => this._teardownLayoutHooks(),
     });
 
     this.iframe = h('iframe', {
@@ -50,6 +53,10 @@ export class PreviewModal {
       sandbox: 'allow-same-origin',
       title: 'preview',
     }) as HTMLIFrameElement;
+    this.iframe.addEventListener('load', () => {
+      this._bindIframeResizeObserver();
+      this._scheduleFitPreviewHeight();
+    });
 
     this.viewport = h('div', { class: 'sm-preview__viewport' }, [this.iframe]);
     this.modal.body.classList.add('sm-modal__body--center');
@@ -77,16 +84,20 @@ export class PreviewModal {
     this._render();
     this.setDevice(this.device);
     this.modal.open(parent);
+    this.onWinResize = () => this._scheduleFitPreviewHeight();
+    window.addEventListener('resize', this.onWinResize);
   }
 
   setDevice(d: PreviewDevice) {
     this.device = d;
     const spec = DEVICES[d];
     this.viewport.style.setProperty('--sm-preview-w', `${spec.width}px`);
-    this.viewport.style.setProperty('--sm-preview-h', `${spec.height}px`);
     for (const k of Object.keys(this.deviceBtns) as PreviewDevice[]) {
       this.deviceBtns[k].classList.toggle('sm-segmented__item--active', k === d);
     }
+    requestAnimationFrame(() =>
+      requestAnimationFrame(() => this._scheduleFitPreviewHeight()),
+    );
   }
 
   private _render() {
@@ -96,6 +107,65 @@ export class PreviewModal {
     // 用 srcdoc 而非 src=blob:，避免 about:srcdoc 偶发的相对资源问题
     this.iframe.srcdoc = result.html;
   }
+
+  /** 标题栏 + body 上下 padding + 与视口的小间距 */
+  private static readonly VIEWPORT_RESERVED_Y = 112;
+
+  private _scheduleFitPreviewHeight() {
+    if (this.layoutRaf != null) cancelAnimationFrame(this.layoutRaf);
+    this.layoutRaf = requestAnimationFrame(() => {
+      this.layoutRaf = null;
+      this._fitPreviewHeight();
+    });
+  }
+
+  private _fitPreviewHeight() {
+    if (!this.iframe.isConnected) return;
+    try {
+      const doc = this.iframe.contentDocument;
+      const root = doc?.documentElement;
+      const body = doc?.body;
+      if (!root || !body) return;
+      const raw = Math.max(root.scrollHeight, body.scrollHeight);
+      const maxPx = Math.max(
+        240,
+        window.innerHeight - PreviewModal.VIEWPORT_RESERVED_Y,
+      );
+      const minPx = 200;
+      const next = Math.min(Math.max(Math.ceil(raw), minPx), maxPx);
+      this.viewport.style.height = `${next}px`;
+    } catch {
+      /* srcdoc 同域，极端情况下忽略 */
+    }
+  }
+
+  private _bindIframeResizeObserver() {
+    this.iframeRo?.disconnect();
+    try {
+      const doc = this.iframe.contentDocument;
+      const body = doc?.body;
+      if (!body || typeof ResizeObserver === 'undefined') return;
+      this.iframeRo = new ResizeObserver(() => this._scheduleFitPreviewHeight());
+      this.iframeRo.observe(body);
+      const html = doc.documentElement;
+      if (html) this.iframeRo.observe(html);
+    } catch {
+      /* ignore */
+    }
+  }
+
+  private _teardownLayoutHooks() {
+    if (this.onWinResize) {
+      window.removeEventListener('resize', this.onWinResize);
+      this.onWinResize = undefined;
+    }
+    this.iframeRo?.disconnect();
+    this.iframeRo = undefined;
+    if (this.layoutRaf != null) {
+      cancelAnimationFrame(this.layoutRaf);
+      this.layoutRaf = null;
+    }
+  }
 }
 
 function iconForDevice(d: PreviewDevice): SVGElement {

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

@@ -1,4 +1,6 @@
+import { bindColorPickerInput } from './ColorPickerPopover';
 import { h } from '../utils/dom';
+import { FONT_WEIGHT_STEP_OPTIONS, normalizeFontWeightStep } from '../utils/fontWeightSteps';
 import type { InlineEditor, SelectionState } from './InlineEditor';
 
 /**
@@ -34,13 +36,6 @@ const FONT_FAMILIES = [
 
 const FONT_SIZES = ['12px', '13px', '14px', '15px', '16px', '18px', '20px', '24px', '28px', '32px'];
 
-const FONT_WEIGHTS = [
-  { label: '常规', value: '400' },
-  { label: '中等', value: '500' },
-  { label: '半粗', value: '600' },
-  { label: '加粗', value: '700' },
-];
-
 export class RichTextToolbar {
   el: HTMLElement;
   private opts: RichTextToolbarOptions;
@@ -115,14 +110,15 @@ export class RichTextToolbar {
     this.btns.unlink.style.display = hasLink ? '' : 'none';
 
     if (f.foreColor) {
-      const hex = rgbToHex(f.foreColor);
+      const hex = colorToHexInput(f.foreColor);
       if (hex) this.inputColor.value = hex;
     }
+    this.inputBgColor.value = f.backColor
+      ? (colorToHexInput(f.backColor) ?? '#ffffff')
+      : '#ffffff';
     if (f.fontName) this.selectFontFamily.value = matchFamily(f.fontName);
-    if (f.fontSize) {
-      const px = f.fontSize.match(/\d+px/)?.[0];
-      if (px && FONT_SIZES.includes(px)) this.selectFontSize.value = px;
-    }
+    this.selectFontSize.value = matchFontSize(f.fontSize);
+    this.selectFontWeight.value = matchFontWeight(f.fontWeight);
 
     const ed = this.editor;
     requestAnimationFrame(() => {
@@ -212,7 +208,7 @@ export class RichTextToolbar {
       title: '字号',
       onchange: (e: Event) => {
         const v = (e.target as HTMLSelectElement).value;
-        if (v) this._wrapStyle('font-size', v);
+        if (v) this.editor?.applyFontSize(v);
       },
     });
     {
@@ -234,7 +230,7 @@ export class RichTextToolbar {
       title: '字重',
       onchange: (e: Event) => {
         const v = (e.target as HTMLSelectElement).value;
-        if (v) this._wrapStyle('font-weight', v);
+        if (v) this.editor?.applyFontWeight(v);
       },
     });
     {
@@ -243,7 +239,7 @@ export class RichTextToolbar {
       placeholder.textContent = '字重';
       this.selectFontWeight.append(placeholder);
     }
-    for (const w of FONT_WEIGHTS) {
+    for (const w of FONT_WEIGHT_STEP_OPTIONS) {
       const opt = document.createElement('option');
       opt.value = w.value;
       opt.textContent = w.label;
@@ -256,8 +252,15 @@ export class RichTextToolbar {
       type: 'color',
       title: '文字颜色',
       value: '#433f3f',
-      oninput: (e: Event) => this.editor?.exec('foreColor', (e.target as HTMLInputElement).value),
     }) as HTMLInputElement;
+    bindColorPickerInput(this.inputColor, {
+      layerRoot: this.opts.positionRoot,
+      liveCommit: true,
+      autoFocusHex: false,
+      onBeforeOpen: () => this.editor?.saveSelection(),
+      onCommit: (hex) => this.editor?.exec('foreColor', hex),
+      onClosed: () => this.editor?.refocus(),
+    });
 
     // 文字背景色
     this.inputBgColor = h('input', {
@@ -265,8 +268,15 @@ export class RichTextToolbar {
       type: 'color',
       title: '文字背景色',
       value: '#fff7e6',
-      oninput: (e: Event) => this.editor?.exec('hiliteColor', (e.target as HTMLInputElement).value),
     }) as HTMLInputElement;
+    bindColorPickerInput(this.inputBgColor, {
+      layerRoot: this.opts.positionRoot,
+      liveCommit: true,
+      autoFocusHex: false,
+      onBeforeOpen: () => this.editor?.saveSelection(),
+      onCommit: (hex) => this.editor?.exec('hiliteColor', hex),
+      onClosed: () => this.editor?.refocus(),
+    });
 
     // 链接：插入链接（无链接时显示）
     this.btns.link = this._iconBtn(
@@ -361,30 +371,6 @@ export class RichTextToolbar {
     this.inputLink.value = '';
   }
 
-  private _wrapStyle(prop: string, value: string) {
-    if (!this.editor) return;
-    // execCommand 没有"任意 inline style"命令；自己处理：把存档选区的内容包到一个 span。
-    this.editor.refocus(); // focus + restoreSelection
-    const sel = window.getSelection();
-    if (!sel || sel.rangeCount === 0) return;
-    const range = sel.getRangeAt(0);
-    if (range.collapsed) return; // 没选中文字，无意义
-    const span = document.createElement('span');
-    span.setAttribute('style', `${prop}:${value};`);
-    try {
-      span.appendChild(range.extractContents());
-      range.insertNode(span);
-      // 选中 span 内容方便连续操作
-      const newRange = document.createRange();
-      newRange.selectNodeContents(span);
-      sel.removeAllRanges();
-      sel.addRange(newRange);
-      this.editor.saveSelection();
-    } catch {
-      // 跨节点结构复杂时 extractContents 偶尔抛错，忽略并保持原样
-    }
-  }
-
   /**
    * 相对 `positionRoot` 定位：默认贴在**正文容器**上沿上方，避免压在选区文字上；
    * 若顶端空间不足则贴在容器下沿下方。
@@ -475,9 +461,45 @@ function matchFamily(name: string): string {
   return '';
 }
 
-function rgbToHex(rgb: string): string | null {
-  if (rgb.startsWith('#')) return rgb;
-  const m = rgb.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/i);
+function matchFontSize(raw: string | null): string {
+  if (!raw) return '';
+  const m = raw.trim().match(/^(\d+(?:\.\d+)?)px$/i);
+  if (!m) return '';
+  const px = `${Math.round(parseFloat(m[1]))}px`;
+  if (FONT_SIZES.includes(px)) return px;
+  const num = parseFloat(px);
+  let best = FONT_SIZES[0];
+  let bestD = Infinity;
+  for (const s of FONT_SIZES) {
+    const d = Math.abs(parseFloat(s) - num);
+    if (d < bestD) {
+      bestD = d;
+      best = s;
+    }
+  }
+  return best;
+}
+
+function matchFontWeight(raw: string | null): string {
+  if (!raw) return '';
+  const step = normalizeFontWeightStep(raw);
+  return FONT_WEIGHT_STEP_OPTIONS.some((w) => w.value === step) ? step : '';
+}
+
+function colorToHexInput(color: string): string | null {
+  const s = color.trim();
+  if (!s) return null;
+  if (s.startsWith('#')) {
+    if (/^#[0-9a-f]{3}$/i.test(s)) {
+      const r = s[1];
+      const g = s[2];
+      const b = s[3];
+      return `#${r}${r}${g}${g}${b}${b}`.toLowerCase();
+    }
+    if (/^#[0-9a-f]{6}$/i.test(s)) return s.toLowerCase();
+    return s;
+  }
+  const m = s.match(/^rgba?\(\s*(\d+)[,\s]+(\d+)[,\s]+(\d+)/i);
   if (!m) return null;
   const toHex = (n: string) => Number(n).toString(16).padStart(2, '0');
   return `#${toHex(m[1])}${toHex(m[2])}${toHex(m[3])}`;