mail-editor-pancake 0.0.0 → 0.0.8

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

@@ -9,6 +9,14 @@
  *    mode=html 时提交原始 innerHTML（用于 mj-raw 等），不挂富文本浮动条。
  *  - 选区变化通过 `onSelectionChange` 实时回调，便于浮动工具条同步按钮状态/位置。
  */
+import { normalizeFontWeightStep } from '../utils/fontWeightSteps';
+import {
+  richTextExecCommand,
+  richTextQueryCommandState,
+  richTextQueryCommandValue,
+} from '../utils/richTextCommand';
+import { isColorPickerOpen } from './ColorPickerPopover';
+
 export interface InlineEditorOptions {
   el: HTMLElement;
   initialValue: string;
@@ -36,6 +44,8 @@ export interface SelectionState {
     foreColor: string | null;
     fontSize: string | null;
     fontName: string | null;
+    fontWeight: string | null;
+    backColor: string | null;
   };
 }
 
@@ -55,6 +65,9 @@ export class InlineEditor {
   private savedRange: Range | null = null;
   /** 富文本工具条控件会抢走焦点，此时 getSelection 已不在编辑区内；保留上一帧状态避免工具条整栏收起。 */
   private lastSelectionState: SelectionState | null = null;
+  /** hiliteColor 在输入前不写 DOM；记录「待输入背景色 + 锚点」以便 bar 即时同步，移开光标后清除 */
+  private pendingHiliteColor: string | null = null;
+  private pendingHiliteAnchor: string | null = null;
 
   constructor(opts: InlineEditorOptions) {
     this.opts = opts;
@@ -112,9 +125,19 @@ export class InlineEditor {
   exec(command: string, value?: string) {
     this._ensureFocus();
     this._restoreSelection();
-    // styleWithCSS=true 让浏览器把 bold 之类输出成 <span style="font-weight:..."> 而不是 <b>，方便邮件 inline 化
-    document.execCommand('styleWithCSS', false, 'true' as any);
-    document.execCommand(command, false, value);
+    const sel = window.getSelection();
+    let hiliteAnchor: string | null = null;
+    if (command === 'hiliteColor' && sel?.rangeCount) {
+      hiliteAnchor = selectionAnchorKey(sel.getRangeAt(0));
+    }
+    // 列表：Chrome 等在 styleWithCSS=true 下 insertOrderedList / insertUnorderedList 常失灵，需退回 HTML 列表标签
+    const isListCmd = command === 'insertOrderedList' || command === 'insertUnorderedList';
+    richTextExecCommand('styleWithCSS', false, isListCmd ? 'false' : 'true');
+    richTextExecCommand(command, false, value);
+    if (command === 'hiliteColor') {
+      this.pendingHiliteColor = value ?? null;
+      this.pendingHiliteAnchor = hiliteAnchor;
+    }
     // 命令执行后选区可能已经变化（例如插入链接会扩展），刷新存档
     this.saveSelection();
     this._emitSelection();
@@ -129,7 +152,7 @@ export class InlineEditor {
     this._restoreSelection();
     const trimmed = url.trim();
     if (!trimmed) {
-      document.execCommand('unlink');
+      richTextExecCommand('unlink');
       this.saveSelection();
       this._emitSelection();
       return;
@@ -142,8 +165,8 @@ export class InlineEditor {
       anchor.setAttribute('href', safe);
       if (!anchor.getAttribute('rel')) anchor.setAttribute('rel', 'noopener');
     } else {
-      document.execCommand('styleWithCSS', false, 'true' as any);
-      document.execCommand('createLink', false, safe);
+      richTextExecCommand('styleWithCSS', false, 'true');
+      richTextExecCommand('createLink', false, safe);
     }
     this.saveSelection();
     this._emitSelection();
@@ -153,7 +176,7 @@ export class InlineEditor {
   insertText(text: string) {
     this._ensureFocus();
     this._restoreSelection();
-    document.execCommand('insertText', false, text);
+    richTextExecCommand('insertText', false, text);
     this.saveSelection();
   }
 
@@ -163,6 +186,52 @@ export class InlineEditor {
     this._restoreSelection();
   }
 
+  /** 字号：走原生 fontSize 命令（styleWithCSS 下浏览器会写 span），与 foreColor 同类 */
+  applyFontSize(px: string) {
+    this.exec('fontSize', pxToLegacyFontSize(px));
+  }
+
+  /**
+   * 字重：浏览器只有 bold 命令，没有 font-weight:500/600 的原生 API，需包 span。
+   * 有选区包裹内容；折叠光标插入 typing span，后续输入沿用。
+   */
+  applyFontWeight(weight: string) {
+    this._ensureFocus();
+    this._restoreSelection();
+    const sel = window.getSelection();
+    if (!sel || sel.rangeCount === 0) return;
+    const range = sel.getRangeAt(0);
+    if (!this.el.contains(range.startContainer) || !this.el.contains(range.endContainer)) return;
+
+    if (!range.collapsed) {
+      const span = document.createElement('span');
+      span.setAttribute('style', `font-weight:${weight};`);
+      try {
+        span.appendChild(range.extractContents());
+        range.insertNode(span);
+        const newRange = document.createRange();
+        newRange.selectNodeContents(span);
+        sel.removeAllRanges();
+        sel.addRange(newRange);
+      } catch {
+        return;
+      }
+    } else {
+      const span = document.createElement('span');
+      span.setAttribute('style', `font-weight:${weight};`);
+      span.appendChild(document.createTextNode('\u200b'));
+      range.insertNode(span);
+      const caret = document.createRange();
+      caret.setStart(span.firstChild!, 1);
+      caret.collapse(true);
+      sel.removeAllRanges();
+      sel.addRange(caret);
+    }
+
+    this.saveSelection();
+    this._emitSelection();
+  }
+
   /** 内联编辑根节点（如 `.sm-text-content`）的盒模型矩形，供富文本条贴在正文区域外沿定位 */
   getAnchorRect(): DOMRect {
     return this.el.getBoundingClientRect();
@@ -195,6 +264,18 @@ export class InlineEditor {
       placeCaretAtEnd(el);
     });
 
+    let imeComposing = false;
+    /** 部分浏览器在 compositionend 之后才派发 Enter keydown，需吞掉紧随其后的这一次 */
+    let suppressNextEnter = false;
+
+    const onCompositionStart = () => {
+      imeComposing = true;
+    };
+    const onCompositionEnd = () => {
+      imeComposing = false;
+      suppressNextEnter = true;
+    };
+
     const onKeyDown = (e: KeyboardEvent) => {
       if (e.key === 'Escape') {
         e.preventDefault();
@@ -202,6 +283,12 @@ export class InlineEditor {
         return;
       }
       if (e.key === 'Enter') {
+        // 拼音等 IME 用 Enter 上屏：不可 preventDefault / insertLineBreak
+        if (e.isComposing || imeComposing || e.keyCode === 229) return;
+        if (suppressNextEnter) {
+          suppressNextEnter = false;
+          return;
+        }
         if (!multiline) {
           e.preventDefault();
           this.commit();
@@ -209,16 +296,26 @@ export class InlineEditor {
         }
         // 多行下，回车默认会插入 <div> / <br>。强制 <br>，避免出现各种奇怪嵌套。
         e.preventDefault();
-        document.execCommand('insertLineBreak');
+        richTextExecCommand('insertLineBreak');
       }
     };
-    const onBlur = () => {
+    const onBlur = (e: FocusEvent) => {
       // 给点钟摆余地，避免点击工具条按钮时立刻提交
       setTimeout(() => {
         if (!this.alive) return;
-        const active = document.activeElement;
+        const active = document.activeElement as HTMLElement | null;
         if (active && (active === el || el.contains(active))) return;
-        if (active && (active as HTMLElement).closest?.('.sm-floating-toolbar')) return;
+        if (isColorPickerOpen()) return;
+        if (active?.closest?.('.sm-floating-toolbar, .sm-color-picker, .sm-color-picker-layer')) return;
+        // 从左栏拖入 / 画布内 Sortable 排序：mousedown 会先 blur，若在此时提交会触发画布重渲染并拆掉 drop 目标
+        if (active?.closest?.('.sm-panel--left')) return;
+        if (active?.closest?.('.sm-block__handle, .sm-section__handle')) return;
+        const related = e.relatedTarget as HTMLElement | null;
+        if (related?.closest?.('.sm-panel--left')) return;
+        if (related?.closest?.('.sm-block-card')) return;
+        if (related?.closest?.('.sm-block__handle, .sm-section__handle')) return;
+        if (related?.closest?.('.sm-color-picker, .sm-color-picker-layer')) return;
+        if (document.querySelector('.sm-root .sm-drag, .sm-root .sm-chosen')) return;
         this.commit();
       }, 0);
     };
@@ -227,10 +324,11 @@ export class InlineEditor {
       e.preventDefault();
       const text = e.clipboardData?.getData('text/plain') ?? '';
       const safe = multiline ? text : text.replace(/\r?\n/g, ' ');
-      document.execCommand('insertText', false, safe);
+      richTextExecCommand('insertText', false, safe);
     };
     const onSelChange = () => {
       if (!this.alive) return;
+      this._syncPendingHiliteAnchor();
       this.saveSelection();
       this._emitSelection();
     };
@@ -244,14 +342,7 @@ export class InlineEditor {
       return a;
     };
 
-    /** Chrome：contenteditable 里的 <a href> 仍会在 mousedown/click 时导航；阻止后用手动 caret 对齐点击处 */
-    const onLinkMouseDown = (e: MouseEvent) => {
-      if ((mode !== 'rich' && mode !== 'html') || e.button !== 0) return;
-      if (!linkInsideEditing(e.target)) return;
-      e.preventDefault();
-      placeCaretAtClientPoint(el, e.clientX, e.clientY);
-    };
-
+    /** Chrome：contenteditable 里的 <a href> 仍会在 click 时导航；mousedown 不拦截以保留拖选 */
     const stopLinkActivate = (e: MouseEvent) => {
       if (mode !== 'rich' && mode !== 'html') return;
       if (!linkInsideEditing(e.target)) return;
@@ -259,19 +350,22 @@ export class InlineEditor {
     };
 
     el.addEventListener('keydown', onKeyDown);
+    el.addEventListener('compositionstart', onCompositionStart);
+    el.addEventListener('compositionend', onCompositionEnd);
     el.addEventListener('blur', onBlur);
     el.addEventListener('paste', onPaste);
     document.addEventListener('selectionchange', onSelChange);
     el.addEventListener('input', onSelChange);
     el.addEventListener('mouseup', onSelChange);
     if (mode === 'rich' || mode === 'html') {
-      el.addEventListener('mousedown', onLinkMouseDown, true);
       el.addEventListener('click', stopLinkActivate, true);
       el.addEventListener('auxclick', stopLinkActivate, true);
     }
 
     this.listeners.push(
       () => el.removeEventListener('keydown', onKeyDown),
+      () => el.removeEventListener('compositionstart', onCompositionStart),
+      () => el.removeEventListener('compositionend', onCompositionEnd),
       () => el.removeEventListener('blur', onBlur),
       () => el.removeEventListener('paste', onPaste),
       () => document.removeEventListener('selectionchange', onSelChange),
@@ -279,7 +373,6 @@ export class InlineEditor {
       () => el.removeEventListener('mouseup', onSelChange),
       ...(mode === 'rich' || mode === 'html'
         ? [
-            () => el.removeEventListener('mousedown', onLinkMouseDown, true),
             () => el.removeEventListener('click', stopLinkActivate, true),
             () => el.removeEventListener('auxclick', stopLinkActivate, true),
           ]
@@ -293,6 +386,23 @@ export class InlineEditor {
     }
   }
 
+  private _syncPendingHiliteAnchor() {
+    if (!this.pendingHiliteColor || !this.pendingHiliteAnchor) return;
+    const sel = window.getSelection();
+    if (!sel?.rangeCount) {
+      this._clearPendingHilite();
+      return;
+    }
+    if (selectionAnchorKey(sel.getRangeAt(0)) !== this.pendingHiliteAnchor) {
+      this._clearPendingHilite();
+    }
+  }
+
+  private _clearPendingHilite() {
+    this.pendingHiliteColor = null;
+    this.pendingHiliteAnchor = null;
+  }
+
   private _emitSelection() {
     if (!this.opts.onSelectionChange) return;
     if (this.opts.mode === 'plain' || this.opts.mode === 'html') {
@@ -311,11 +421,11 @@ export class InlineEditor {
     const range = sel.getRangeAt(0);
     const rect = sel.isCollapsed ? this._caretRect(range) : range.getBoundingClientRect();
 
-    const align: SelectionState['formats']['align'] = document.queryCommandState('justifyCenter')
+    const align: SelectionState['formats']['align'] = richTextQueryCommandState('justifyCenter')
       ? 'center'
-      : document.queryCommandState('justifyRight')
+      : richTextQueryCommandState('justifyRight')
         ? 'right'
-        : document.queryCommandState('justifyFull')
+        : richTextQueryCommandState('justifyFull')
           ? 'justify'
           : 'left';
 
@@ -324,21 +434,37 @@ export class InlineEditor {
       return a?.getAttribute('href') ?? null;
     })();
 
+    const inline = resolveInlineFormatsAtSelection(this.el, sel);
+
+    let foreColor = inline.foreColor ?? safeQueryValue('foreColor');
+    let backColor = inline.backColor;
+    if (
+      !backColor &&
+      range.collapsed &&
+      this.pendingHiliteColor &&
+      this.pendingHiliteAnchor === selectionAnchorKey(range)
+    ) {
+      backColor = this.pendingHiliteColor;
+    }
+    if (inline.backColor) this._clearPendingHilite();
+
     const state: SelectionState = {
       hasSelection: true,
       rect,
       formats: {
-        bold: document.queryCommandState('bold'),
-        italic: document.queryCommandState('italic'),
-        underline: document.queryCommandState('underline'),
-        strikethrough: document.queryCommandState('strikeThrough'),
-        unorderedList: document.queryCommandState('insertUnorderedList'),
-        orderedList: document.queryCommandState('insertOrderedList'),
+        bold: richTextQueryCommandState('bold'),
+        italic: richTextQueryCommandState('italic'),
+        underline: richTextQueryCommandState('underline'),
+        strikethrough: richTextQueryCommandState('strikeThrough'),
+        unorderedList: richTextQueryCommandState('insertUnorderedList'),
+        orderedList: richTextQueryCommandState('insertOrderedList'),
         align,
         link,
-        foreColor: safeQueryValue('foreColor'),
-        fontSize: safeQueryValue('fontSize'),
+        foreColor,
+        fontSize: inline.fontSize,
         fontName: safeQueryValue('fontName'),
+        fontWeight: inline.fontWeight,
+        backColor,
       },
     };
     this.lastSelectionState = state;
@@ -350,7 +476,10 @@ export class InlineEditor {
     if (
       fallback === null &&
       this.lastSelectionState &&
-      document.activeElement?.closest?.('.sm-floating-toolbar')
+      isColorPickerOpen() ||
+      document.activeElement?.closest?.(
+        '.sm-floating-toolbar, .sm-color-picker, .sm-color-picker-layer',
+      )
     ) {
       this.opts.onSelectionChange?.(this.lastSelectionState);
       return;
@@ -396,45 +525,158 @@ function placeCaretAtEnd(el: HTMLElement) {
   sel.addRange(range);
 }
 
-/** 在视口坐标处设置折叠选区（用于拦截 <a> 默认行为后补回放光标） */
-function placeCaretAtClientPoint(root: HTMLElement, clientX: number, clientY: number): boolean {
-  const doc = root.ownerDocument;
-  const d = doc as Document & {
-    caretRangeFromPoint?: (x: number, y: number) => Range | null;
-    caretPositionFromPoint?: (x: number, y: number) => { offsetNode: Node; offset: number } | null;
-  };
-  let range: Range | null = null;
-  if (d.caretRangeFromPoint) {
-    range = d.caretRangeFromPoint(clientX, clientY);
-  } else if (d.caretPositionFromPoint) {
-    const pos = d.caretPositionFromPoint(clientX, clientY);
-    if (pos?.offsetNode) {
-      range = doc.createRange();
-      try {
-        range.setStart(pos.offsetNode, pos.offset);
-        range.collapse(true);
-      } catch {
-        range = null;
-      }
-    }
-  }
-  if (!range || !root.contains(range.startContainer)) return false;
-  const sel = doc.getSelection();
-  if (!sel) return false;
-  sel.removeAllRanges();
-  sel.addRange(range);
-  return true;
-}
-
 function safeQueryValue(cmd: string): string | null {
   try {
-    const v = document.queryCommandValue(cmd);
+    const v = richTextQueryCommandValue(cmd);
     return v ? v : null;
   } catch {
     return null;
   }
 }
 
+/** 光标/选区处的字号、字重、文字色、背景色（queryCommandValue 对 span style 与链接内颜色不可靠） */
+function resolveInlineFormatsAtSelection(
+  root: HTMLElement,
+  sel: Selection,
+): {
+  fontSize: string | null;
+  fontWeight: string | null;
+  foreColor: string | null;
+  backColor: string | null;
+} {
+  const host = selectionHostElement(sel, root);
+  if (!host) return { fontSize: null, fontWeight: null, foreColor: null, backColor: null };
+
+  let fontWeight: string | null = null;
+  for (let el: HTMLElement | null = host; el && root.contains(el) && el !== root; el = el.parentElement) {
+    if (el.style.fontWeight) fontWeight = el.style.fontWeight;
+  }
+
+  const foreColor = resolveForeColorAtSelection(root, host);
+  const backColor = resolveBackColorAtSelection(root, host);
+  // 用 computed px，避免读到 .sm-text-content 块级默认字号盖掉 <font>/span 上的真实字号
+  const fontSize = window.getComputedStyle(host).fontSize;
+
+  if (!fontWeight) {
+    fontWeight = richTextQueryCommandState('bold')
+      ? '700'
+      : normalizeFontWeightStep(window.getComputedStyle(host).fontWeight);
+  } else {
+    fontWeight = normalizeFontWeightStep(fontWeight);
+  }
+
+  return { fontSize, fontWeight, foreColor, backColor };
+}
+
+/** 光标处文字色（foreColor / 链接局部 color；queryCommandValue 在 <a> 内常不准） */
+function resolveForeColorAtSelection(root: HTMLElement, host: HTMLElement): string | null {
+  for (let el: HTMLElement | null = host; el && root.contains(el) && el !== root; el = el.parentElement) {
+    const inline = el.style.color?.trim();
+    if (inline) return inline;
+
+    const fromAttr = readColorFromStyleAttr(el.getAttribute('style'));
+    if (fromAttr) return fromAttr;
+  }
+
+  const computed = window.getComputedStyle(host).color;
+  return computed || null;
+}
+
+function readColorFromStyleAttr(styleAttr: string | null): string | null {
+  if (!styleAttr) return null;
+  const m = styleAttr.match(/(?:^|;)\s*color\s*:\s*([^;]+)/i);
+  if (!m) return null;
+  const c = m[1].trim();
+  return c || null;
+}
+
+/** 光标处文字背景/高亮色（hiliteColor 的 queryCommandValue 在 Chrome 常为空，需读 DOM） */
+function resolveBackColorAtSelection(root: HTMLElement, host: HTMLElement): string | null {
+  for (let el: HTMLElement | null = host; el && root.contains(el) && el !== root; el = el.parentElement) {
+    const inline = el.style.backgroundColor?.trim();
+    if (inline && !isTransparentColor(inline)) return inline;
+
+    const fromAttr = readBackgroundFromStyleAttr(el.getAttribute('style'));
+    if (fromAttr) return fromAttr;
+
+    const computed = window.getComputedStyle(el).backgroundColor;
+    if (computed && !isTransparentColor(computed)) return computed;
+  }
+
+  // 不用 queryCommandValue('hiliteColor')：它返回的是「下次输入用的颜色」，光标在无高亮处时仍会带上一次配置
+  return null;
+}
+
+function readBackgroundFromStyleAttr(styleAttr: string | null): string | null {
+  if (!styleAttr) return null;
+  const m = styleAttr.match(/background(?:-color)?\s*:\s*([^;]+)/i);
+  if (!m) return null;
+  const c = m[1].trim();
+  return c && !isTransparentColor(c) ? c : null;
+}
+
+function selectionHostElement(sel: Selection, root: HTMLElement): HTMLElement | null {
+  const node = sel.anchorNode;
+  if (!node || !root.contains(node)) return null;
+  return node.nodeType === Node.TEXT_NODE ? node.parentElement : (node as HTMLElement);
+}
+
+function selectionAnchorKey(range: Range): string {
+  return `${range.startContainer.nodeType}:${range.startOffset}:${range.endContainer.nodeType}:${range.endOffset}`;
+}
+
+/** execCommand fontSize 只认 1–7，与工具条 px 互转 */
+function pxToLegacyFontSize(px: string): string {
+  const map: Record<string, string> = {
+    '10px': '1',
+    '12px': '2',
+    '13px': '3',
+    '14px': '3',
+    '15px': '4',
+    '16px': '4',
+    '18px': '4',
+    '20px': '5',
+    '24px': '6',
+    '28px': '6',
+    '32px': '7',
+  };
+  const key = px.trim().toLowerCase();
+  if (map[key]) return map[key];
+  const num = parseFloat(key);
+  if (Number.isNaN(num)) return '4';
+  const steps: [number, string][] = [
+    [10, '1'],
+    [12, '2'],
+    [14, '3'],
+    [16, '4'],
+    [20, '5'],
+    [24, '6'],
+    [32, '7'],
+  ];
+  let best = '4';
+  let bestD = Infinity;
+  for (const [size, legacy] of steps) {
+    const d = Math.abs(size - num);
+    if (d < bestD) {
+      bestD = d;
+      best = legacy;
+    }
+  }
+  return best;
+}
+
+function isTransparentColor(c: string): boolean {
+  const s = c.trim().toLowerCase();
+  if (s === 'transparent' || s === 'inherit' || s === 'initial' || s === 'unset') return true;
+  if (s === 'rgba(0, 0, 0, 0)' || s === 'rgba(0,0,0,0)') return true;
+  const rgba = s.match(/^rgba?\(\s*(\d+)[,\s]+(\d+)[,\s]+(\d+)(?:[,\s/]+([\d.]+))?\s*\)$/);
+  if (rgba) {
+    const a = rgba[4] !== undefined ? parseFloat(rgba[4]) : 1;
+    return a === 0;
+  }
+  return false;
+}
+
 function escapeHtml(s: string): string {
   return s
     .replace(/&/g, '&amp;')
@@ -454,7 +696,7 @@ export function sanitizeRichHtml(html: string): string {
   const tpl = document.createElement('template');
   tpl.innerHTML = html;
   walk(tpl.content);
-  return tpl.innerHTML;
+  return tpl.innerHTML.replace(/\u200b/g, '');
 
   function walk(root: Node) {
     const toRemove: Element[] = [];

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

@@ -15,9 +15,8 @@ interface LayoutCard {
 
 const LAYOUT_CARDS: LayoutCard[] = [
   { layout: '1', name: '一列', icon: layoutSvg([1]) },
+  /** 默认 1:1；1:2 / 2:1 在选中 Section 后于右栏「列比例」切换 */
   { layout: '1-1', name: '两列', icon: layoutSvg([1, 1]) },
-  { layout: '1-2', name: '1:2', icon: layoutSvg([1, 2]) },
-  { layout: '2-1', name: '2:1', icon: layoutSvg([2, 1]) },
   { layout: '1-1-1', name: '三列', icon: layoutSvg([1, 1, 1]) },
 ];