mail-editor-pancake 0.0.7 → 0.0.8

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])}`;