feat(RichTextEditor): Add font size and color picker controls with selection management

- Add font size dropdown selector with 16 preset sizes (8pt to 72pt)
- Add color picker popover with 16 preset colors and custom color input
- Implement selection save/restore mechanism to preserve text selection across toolbar interactions
- Add format detection to display current font size and color of selected text
- Replace native execCommand with custom span-based formatting for better control
- Add helper functions (isActive, getContainerElement) for format state detection
- Update toolbar styling for Ant Design Select and button alignment
- Add BgColorsOutlined icon and additional React hooks (useState, useCallback)
- Improve selection management with cloned Range objects for reliability

src/components/Editor/RichTextEditor/RichTextToolbar.css

@@ -24,23 +24,14 @@
   }
 }
 
-/* 颜色选择器 */
-.rich-text-toolbar .color-picker {
-  width: 24px;
-  height: 24px;
-  border: none;
-  border-radius: 2px;
-  cursor: pointer;
-  outline: none;
-  padding: 0;
-  background: transparent;
+/* 字号选择器样式 */
+.rich-text-toolbar .ant-select-selector {
+  border-radius: 2px !important;
 }
 
-.rich-text-toolbar .color-picker::-webkit-color-swatch-wrapper {
-  padding: 0;
+/* 确保按钮和选择器对齐 */
+.rich-text-toolbar .ant-select,
+.rich-text-toolbar .ant-btn {
+  vertical-align: middle;
 }
 
-.rich-text-toolbar .color-picker::-webkit-color-swatch {
-  border: 1px solid #d9d9d9;
-  border-radius: 2px;
-}

src/components/Editor/RichTextEditor/RichTextToolbar.tsx

@@ -6,13 +6,14 @@
  * @module components/Editor/RichTextEditor
  */
 
-import React, { useEffect, useRef } from 'react';
-import { Button, Tooltip, Space, Divider } from 'antd';
+import React, { useEffect, useRef, useState, useCallback } from 'react';
+import { Button, Tooltip, Space, Divider, Select, Popover } from 'antd';
 import {
   BoldOutlined,
   ItalicOutlined,
   UnderlineOutlined,
   FontSizeOutlined,
+  BgColorsOutlined,
 } from '@ant-design/icons';
 import './RichTextToolbar.css';
 
@@ -44,6 +45,139 @@ export const RichTextToolbar: React.FC<RichTextToolbarProps> = ({
   onFormat,
 }) => {
   const toolbarRef = useRef<HTMLDivElement>(null);
+  const [currentFontSize, setCurrentFontSize] = useState<string>('12');
+  const [currentColor, setCurrentColor] = useState<string>('#000000');
+  const [colorPickerOpen, setColorPickerOpen] = useState(false);
+  
+  // 保存选区的引用（使用更可靠的方式）
+  const savedSelectionRef = useRef<{
+    range: Range;
+    text: string;
+  } | null>(null);
+
+  // ── 保存选区 ───────────────────────────────────────────────────────────────
+  const saveSelection = useCallback(() => {
+    const selection = window.getSelection();
+    if (selection && selection.rangeCount > 0) {
+      const range = selection.getRangeAt(0);
+      savedSelectionRef.current = {
+        range: range.cloneRange(),
+        text: range.toString()
+      };
+    }
+  }, []);
+
+  // ── 恢复选区 ───────────────────────────────────────────────────────────────
+  const restoreSelection = useCallback(() => {
+    if (savedSelectionRef.current) {
+      const selection = window.getSelection();
+      if (selection) {
+        try {
+          selection.removeAllRanges();
+          selection.addRange(savedSelectionRef.current.range);
+        } catch (error) {
+          console.error('Failed to restore selection:', error);
+        }
+      }
+    }
+  }, []);
+
+  // ── 检测当前选区的格式 ─────────────────────────────────────────────────────
+  useEffect(() => {
+    const updateCurrentFormat = () => {
+      const selection = window.getSelection();
+      if (!selection || selection.rangeCount === 0) return;
+      
+      // 保存选区
+      console.log('[updateCurrentFormat] Saving selection');
+      saveSelection();
+      
+      const range = selection.getRangeAt(0);
+      const container = range.commonAncestorContainer;
+      const parentElement = container.nodeType === Node.TEXT_NODE 
+        ? container.parentElement 
+        : container as HTMLElement;
+      
+      if (parentElement) {
+        // 检测字号
+        const computedStyle = window.getComputedStyle(parentElement);
+        if (computedStyle.fontSize) {
+          const fontSizeStr = computedStyle.fontSize;
+          let fontSize: number;
+          
+          if (fontSizeStr.endsWith('pt')) {
+            fontSize = Math.round(parseFloat(fontSizeStr));
+          } else if (fontSizeStr.endsWith('px')) {
+            fontSize = Math.round(parseFloat(fontSizeStr) * 0.75);
+          } else {
+            fontSize = Math.round(parseFloat(fontSizeStr) * 0.75);
+          }
+          
+          if (fontSize && !isNaN(fontSize)) {
+            setCurrentFontSize(String(fontSize));
+          }
+        }
+        
+        // 检测颜色
+        if (computedStyle.color) {
+          const rgb = computedStyle.color;
+          // 将 rgb(r, g, b) 转换为十六进制
+          const match = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
+          if (match) {
+            const r = parseInt(match[1]).toString(16).padStart(2, '0');
+            const g = parseInt(match[2]).toString(16).padStart(2, '0');
+            const b = parseInt(match[3]).toString(16).padStart(2, '0');
+            const hexColor = `#${r}${g}${b}`;
+            console.log('[updateCurrentFormat] Detected color:', hexColor);
+            setCurrentColor(hexColor);
+          }
+        }
+      }
+    };
+    
+    // 工具栏显示时更新格式
+    updateCurrentFormat();
+  }, [position, saveSelection]); // position 变化表示工具栏重新显示
+
+  // 字号选项
+  const fontSizeOptions = [
+    { label: '8', value: '8' },
+    { label: '9', value: '9' },
+    { label: '10', value: '10' },
+    { label: '11', value: '11' },
+    { label: '12', value: '12' },
+    { label: '14', value: '14' },
+    { label: '16', value: '16' },
+    { label: '18', value: '18' },
+    { label: '20', value: '20' },
+    { label: '22', value: '22' },
+    { label: '24', value: '24' },
+    { label: '26', value: '26' },
+    { label: '28', value: '28' },
+    { label: '36', value: '36' },
+    { label: '48', value: '48' },
+    { label: '72', value: '72' },
+  ];
+
+  // 预设颜色
+  const presetColors = [
+    '#000000', // 黑色
+    '#FFFFFF', // 白色
+    '#FF0000', // 红色
+    '#00FF00', // 绿色
+    '#0000FF', // 蓝色
+    '#FFFF00', // 黄色
+    '#FF00FF', // 洋红
+    '#00FFFF', // 青色
+    '#808080', // 灰色
+    '#800000', // 栗色
+    '#008000', // 深绿
+    '#000080', // 海军蓝
+    '#808000', // 橄榄色
+    '#800080', // 紫色
+    '#008080', // 青色(暗)
+    '#C0C0C0', // 银色
+  ];
 
   // ── 点击外部关闭 ───────────────────────────────────────────────────────────
   useEffect(() => {
@@ -63,14 +197,181 @@ export const RichTextToolbar: React.FC<RichTextToolbarProps> = ({
 
   // ── 格式化命令 ─────────────────────────────────────────────────────────────
   const execCommand = (command: string, value?: string) => {
-    document.execCommand(command, false, value);
+    const selection = window.getSelection();
+    if (!selection || selection.rangeCount === 0) return;
+    
+    const range = selection.getRangeAt(0);
+    if (range.collapsed) return;
+    
+    // 创建一个包装元素
+    const span = document.createElement('span');
+    
+    // 根据命令类型应用样式
+    switch (command) {
+      case 'bold':
+        span.style.fontWeight = isActive('bold') ? 'normal' : 'bold';
+        break;
+      case 'italic':
+        span.style.fontStyle = isActive('italic') ? 'normal' : 'italic';
+        break;
+      case 'underline':
+        span.style.textDecoration = isActive('underline') ? 'none' : 'underline';
+        break;
+      case 'foreColor':
+        if (value) span.style.color = value;
+        break;
+      default:
+        return;
+    }
+    
+    // 提取内容并包装
+    const contents = range.extractContents();
+    span.appendChild(contents);
+    range.insertNode(span);
+    
+    // 重新选中
+    const newRange = document.createRange();
+    newRange.selectNodeContents(span);
+    selection.removeAllRanges();
+    selection.addRange(newRange);
+    
+    onFormat();
+  };
+
+  // ── 设置字号 ───────────────────────────────────────────────────────────────
+  const handleFontSizeChange = (size: string) => {
+    setCurrentFontSize(size);
+    
+    // 恢复选区
+    restoreSelection();
+    
+    const selection = window.getSelection();
+    if (!selection || selection.rangeCount === 0) return;
+    
+    const range = selection.getRangeAt(0);
+    if (range.collapsed) return;
+    
+    // 创建一个 span 元素来包装选中的文本
+    const span = document.createElement('span');
+    span.style.fontSize = `${size}pt`;
+    
+    // 提取选中的内容
+    const contents = range.extractContents();
+    span.appendChild(contents);
+    
+    // 插入新的 span
+    range.insertNode(span);
+    
+    // 重新选中内容
+    const newRange = document.createRange();
+    newRange.selectNodeContents(span);
+    selection.removeAllRanges();
+    selection.addRange(newRange);
+    
     onFormat();
   };
 
+  // ── 设置颜色（简化版，直接操作 DOM）───────────────────────────────────────
+  const handleColorChange = (color: string) => {
+    console.log('[handleColorChange] Start - color:', color);
+    setCurrentColor(color);
+    
+    // 获取编辑器元素
+    const editor = document.querySelector('.rich-text-editor') as HTMLElement;
+    if (!editor) {
+      console.error('[handleColorChange] Editor element not found');
+      return;
+    }
+    
+    // 确保编辑器有焦点
+    if (document.activeElement !== editor) {
+      console.log('[handleColorChange] Editor not focused, focusing...');
+      editor.focus();
+    }
+    
+    // 恢复保存的选区
+    restoreSelection();
+    
+    // 再次确认选区
+    const selection = window.getSelection();
+    if (!selection) {
+      console.error('[handleColorChange] No selection object');
+      return;
+    }
+    
+    if (selection.rangeCount === 0) {
+      console.error('[handleColorChange] No range in selection');
+      return;
+    }
+    
+    const range = selection.getRangeAt(0);
+    if (range.collapsed) {
+      console.error('[handleColorChange] Selection is collapsed');
+      return;
+    }
+    
+    console.log('[handleColorChange] Selection valid, applying color...');
+    console.log('[handleColorChange] Selected text:', range.toString());
+    
+    // 使用现代方法直接操作 DOM
+    try {
+      const span = document.createElement('span');
+      span.style.color = color;
+      
+      const contents = range.extractContents();
+      span.appendChild(contents);
+      range.insertNode(span);
+      
+      // 重新选中
+      const newRange = document.createRange();
+      newRange.selectNodeContents(span);
+      selection.removeAllRanges();
+      selection.addRange(newRange);
+      
+      console.log('[handleColorChange] Color applied successfully');
+    } catch (error) {
+      console.error('[handleColorChange] Failed to apply color:', error);
+      return;
+    }
+    
+    // 触发 input 事件
+    console.log('[handleColorChange] Triggering input event');
+    const inputEvent = new Event('input', { bubbles: true, cancelable: false });
+    editor.dispatchEvent(inputEvent);
+    
+    // 调用 onFormat
+    console.log('[handleColorChange] Calling onFormat');
+    onFormat();
+    
+    console.log('[handleColorChange] Complete');
+  };
+
   // ── 检查当前格式状态 ───────────────────────────────────────────────────────
   const isActive = (command: string): boolean => {
     try {
-      return document.queryCommandState(command);
+      const selection = window.getSelection();
+      if (!selection || selection.rangeCount === 0) return false;
+      
+      const range = selection.getRangeAt(0);
+      const container = range.commonAncestorContainer;
+      const parentElement = container.nodeType === Node.TEXT_NODE 
+        ? container.parentElement 
+        : container as HTMLElement;
+      
+      if (!parentElement) return false;
+      
+      const computedStyle = window.getComputedStyle(parentElement);
+      
+      switch (command) {
+        case 'bold':
+          return parseInt(computedStyle.fontWeight) >= 600 || computedStyle.fontWeight === 'bold';
+        case 'italic':
+          return computedStyle.fontStyle === 'italic';
+        case 'underline':
+          return computedStyle.textDecoration.includes('underline');
+        default:
+          return false;
+      }
     } catch {
       return false;
     }
@@ -121,39 +422,112 @@ export const RichTextToolbar: React.FC<RichTextToolbarProps> = ({
 
         <Divider type="vertical" style={{ margin: '0 4px' }} />
 
-        {/* 字号 */}
+        {/* 字号选择器 */}
         <Tooltip title="字号">
-          <Button
-            type="text"
+          <Select
+            value={currentFontSize}
             size="small"
-            icon={<FontSizeOutlined />}
-            onClick={() => {
-              const size = prompt('输入字号(磅):', '12');
-              if (size) {
-                execCommand('fontSize', '7');
-                // 查找刚创建的font标签并修改
-                const selection = window.getSelection();
-                if (selection && selection.anchorNode) {
-                  const parent = selection.anchorNode.parentElement;
-                  if (parent?.tagName === 'FONT') {
-                    parent.removeAttribute('size');
-                    parent.style.fontSize = `${size}pt`;
-                  }
-                }
-                onFormat();
-              }
-            }}
+            style={{ width: 65 }}
+            onChange={handleFontSizeChange}
+            options={fontSizeOptions}
+            suffixIcon={<FontSizeOutlined />}
           />
         </Tooltip>
 
-        {/* 颜色 */}
+        {/* 颜色选择器 */}
         <Tooltip title="文字颜色">
-          <input
-            type="color"
-            className="color-picker"
-            onChange={(e) => execCommand('foreColor', e.target.value)}
-            title="文字颜色"
-          />
+          <Popover
+            open={colorPickerOpen}
+            onOpenChange={(open) => {
+              if (open) {
+                // 打开时保存选区
+                saveSelection();
+              }
+              setColorPickerOpen(open);
+            }}
+            content={
+              <div 
+                style={{ width: 200 }}
+                onMouseDown={(e) => {
+                  // 阻止 mousedown 事件，防止失去焦点
+                  e.preventDefault();
+                  e.stopPropagation();
+                }}
+                onClick={(e) => {
+                  // 阻止 click 事件冒泡
+                  e.stopPropagation();
+                }}
+              >
+                <div style={{ marginBottom: 8 }}>
+                  <div style={{ 
+                    display: 'grid', 
+                    gridTemplateColumns: 'repeat(8, 1fr)', 
+                    gap: 4 
+                  }}>
+                    {presetColors.map((color) => (
+                      <div
+                        key={color}
+                        onMouseDown={(e) => {
+                          // 阻止失去焦点
+                          e.preventDefault();
+                          e.stopPropagation();
+                        }}
+                        onClick={(e) => {
+                          e.preventDefault();
+                          e.stopPropagation();
+                          console.log('Color clicked:', color);
+                          handleColorChange(color);
+                          // 延迟关闭，确保颜色应用完成
+                          setTimeout(() => setColorPickerOpen(false), 100);
+                        }}
+                        style={{
+                          width: 20,
+                          height: 20,
+                          backgroundColor: color,
+                          border: color === '#FFFFFF' ? '1px solid #d9d9d9' : 'none',
+                          borderRadius: 2,
+                          cursor: 'pointer',
+                          boxShadow: currentColor === color ? '0 0 0 2px #1890ff' : 'none',
+                        }}
+                        title={color}
+                      />
+                    ))}
+                  </div>
+                </div>
+                <div style={{ marginTop: 8 }}>
+                  <input
+                    type="color"
+                    value={currentColor}
+                    onChange={(e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      console.log('Color input changed:', e.target.value);
+                      handleColorChange(e.target.value);
+                    }}
+                    onMouseDown={(e) => {
+                      e.stopPropagation();
+                    }}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                    }}
+                    style={{ width: '100%', height: 32, cursor: 'pointer' }}
+                  />
+                </div>
+              </div>
+            }
+            trigger="click"
+            placement="bottom"
+          >
+            <Button
+              type="text"
+              size="small"
+              icon={<BgColorsOutlined style={{ color: currentColor }} />}
+              onMouseDown={(e) => {
+                // 打开颜色选择器前保存选区
+                saveSelection();
+              }}
+            />
+          </Popover>
         </Tooltip>
       </Space>
     </div>

src/utils/richTextConverter.ts

@@ -61,7 +61,7 @@ export function rgbToHex(rgb: string): string {
   const b = parseInt(match[3], 10);
   
   const toHex = (n: number) => {
-    const hex = n.toString(16);
+    const hex = n.toString(16).toUpperCase();  // 统一转换为大写
     return hex.length === 1 ? '0' + hex : hex;
   };
   
@@ -160,17 +160,98 @@ function extractStyleFromElement(element: HTMLElement | null): RichTextStyle {
     
     // 检查内联样式
     if (el.style) {
-      if (el.style.color) {
-        const color = rgbToHex(el.style.color);
-        if (color !== '000000') style.color = color;
+      // 颜色提取（改进版）
+      if (el.style.color && !style.color) {
+        // 检查是否是 rgb 格式
+        if (el.style.color.startsWith('rgb')) {
+          const hexColor = rgbToHex(el.style.color);
+          // 存储颜色，不排除黑色（因为黑色也可能是有意设置的）
+          style.color = hexColor;
+        } else if (el.style.color.startsWith('#')) {
+          // 十六进制格式，移除 # 号
+          style.color = el.style.color.substring(1).toUpperCase();
+        } else {
+          // 其他格式（如颜色名称），尝试转换
+          const tempDiv = document.createElement('div');
+          tempDiv.style.color = el.style.color;
+          document.body.appendChild(tempDiv);
+          const computed = window.getComputedStyle(tempDiv).color;
+          document.body.removeChild(tempDiv);
+          if (computed) {
+            style.color = rgbToHex(computed);
+          }
+        }
       }
+      
       if (el.style.fontFamily) {
         style.font_name = el.style.fontFamily.replace(/["']/g, '');
       }
+      
       if (el.style.fontSize) {
-        // 转换为磅(pt)
-        const pxSize = parseFloat(el.style.fontSize);
-        style.font_size = Math.round(pxSize * 0.75);
+        // 解析字号，支持 pt、px、em 等单位
+        const fontSizeStr = el.style.fontSize;
+        let fontSize: number | undefined;
+        
+        if (fontSizeStr.endsWith('pt')) {
+          // pt单位直接解析
+          fontSize = parseFloat(fontSizeStr);
+        } else if (fontSizeStr.endsWith('px')) {
+          // px转pt: 1pt = 4/3 px, 所以 px * 0.75 = pt
+          fontSize = Math.round(parseFloat(fontSizeStr) * 0.75);
+        } else if (fontSizeStr.endsWith('em')) {
+          // em相对单位，假设基准是16px
+          fontSize = Math.round(parseFloat(fontSizeStr) * 16 * 0.75);
+        } else {
+          // 无单位或其他单位，尝试直接解析为数字
+          fontSize = parseFloat(fontSizeStr);
+        }
+        
+        if (fontSize && !isNaN(fontSize) && fontSize > 0) {
+          style.font_size = fontSize;
+        }
+      }
+    }
+    
+    // 特殊处理：检查 FONT 标签（execCommand 可能会创建）
+    if (tagName === 'FONT') {
+      const fontEl = el as HTMLFontElement;
+      
+      // 检查 color 属性（FONT 标签的 color 属性）
+      if (fontEl.color && !style.color) {
+        // color 属性可能是 #RRGGBB 格式或颜色名称
+        if (fontEl.color.startsWith('#')) {
+          style.color = fontEl.color.substring(1).toUpperCase();
+        } else if (fontEl.color.startsWith('rgb')) {
+          style.color = rgbToHex(fontEl.color);
+        } else {
+          // 颜色名称，需要转换
+          const tempDiv = document.createElement('div');
+          tempDiv.style.color = fontEl.color;
+          document.body.appendChild(tempDiv);
+          const computed = window.getComputedStyle(tempDiv).color;
+          document.body.removeChild(tempDiv);
+          if (computed) {
+            style.color = rgbToHex(computed);
+          }
+        }
+      }
+      
+      // 检查 style.fontSize（优先）
+      if (fontEl.style.fontSize && !style.font_size) {
+        const fontSizeStr = fontEl.style.fontSize;
+        let fontSize: number | undefined;
+        
+        if (fontSizeStr.endsWith('pt')) {
+          fontSize = parseFloat(fontSizeStr);
+        } else if (fontSizeStr.endsWith('px')) {
+          fontSize = Math.round(parseFloat(fontSizeStr) * 0.75);
+        } else {
+          fontSize = parseFloat(fontSizeStr);
+        }
+        
+        if (fontSize && !isNaN(fontSize) && fontSize > 0) {
+          style.font_size = fontSize;
+        }
       }
     }