feat(编辑器): 优化富文本字号设置与占位符管理

- 优化字号检测逻辑，向上遍历 DOM 树查找第一个明确设置的 fontSize 元素
- 从 baseStyle 中提取默认字号作为后备值，支持 pt/px 单位转换
- 实现光标位置字号设置功能，插入占位符 span 确保用户输入时使用新字号
- 添加 handleInput 时的占位符清理逻辑，移除零宽空格并移除数据属性
- 完善 RichTextToolbar 组件的字号状态管理和选区状态处理
- 传递 baseStyle 属性到工具栏组件，提高字号设置的准确性和一致性

src/components/Editor/RichTextEditor/RichTextEditor.tsx

@@ -259,6 +259,19 @@ export const RichTextEditor: React.FC<RichTextEditorProps> = ({
   const handleInput = useCallback(() => {
     if (!editorRef.current || !onChange || isComposingRef.current) return;
     
+    // 清理字号占位符（带有零宽空格的span）
+    const placeholders = editorRef.current.querySelectorAll('span[data-font-size-placeholder="true"]');
+    placeholders.forEach((placeholder) => {
+      if (placeholder.textContent && placeholder.textContent.length > 1) {
+        // 用户已经输入了文字，移除零宽空格
+        placeholder.textContent = placeholder.textContent.replace(/\u200B/g, '');
+        placeholder.removeAttribute('data-font-size-placeholder');
+      } else if (placeholder.textContent === '\u200B' && placeholder.previousSibling) {
+        // 如果占位符还是空的且有前一个节点，可能需要清理（用户删除了文字）
+        // 这里保留占位符，让用户继续输入
+      }
+    });
+    
     // 标记正在输入
     isFormattingRef.current = true;
 
@@ -455,6 +468,7 @@ export const RichTextEditor: React.FC<RichTextEditorProps> = ({
           onDelete={onDelete}
           onAlignChange={onAlignChange}
           currentAlign={currentAlign}
+          baseStyle={baseStyle}
           tableContext={tableContext}
         />
       )}

src/components/Editor/RichTextEditor/RichTextToolbar.tsx

@@ -58,6 +58,8 @@ export interface RichTextToolbarProps {
   onAlignChange?: (align: 'left' | 'center' | 'right' | 'justify') => void;
   /** 当前对齐方式（用于初始化） */
   currentAlign?: 'left' | 'center' | 'right' | 'justify';
+  /** 基础样式（用于获取默认字号） */
+  baseStyle?: React.CSSProperties;
   /** 表格上下文(可选) - 如果提供,则显示表格样式控制 */
   tableContext?: {
     block: TableBlock;
@@ -301,6 +303,7 @@ export const RichTextToolbar: React.FC<RichTextToolbarProps> = ({
   onDelete,
   onAlignChange,
   currentAlign,
+  baseStyle,
   tableContext,
 }) => {
   const toolbarRef = useRef<HTMLDivElement>(null);
@@ -442,6 +445,21 @@ export const RichTextToolbar: React.FC<RichTextToolbarProps> = ({
         setTextAlign(currentAlign);
       }
       
+      // 从 baseStyle 提取默认字号（作为后备值）
+      let defaultFontSize = 12;
+      if (baseStyle?.fontSize) {
+        const baseFontSizeStr = String(baseStyle.fontSize);
+        const numericValue = parseFloat(baseFontSizeStr);
+        if (baseFontSizeStr.endsWith('pt')) {
+          defaultFontSize = Math.round(numericValue);
+        } else if (baseFontSizeStr.endsWith('px')) {
+          defaultFontSize = Math.round(numericValue * 0.75);
+        } else if (!isNaN(numericValue) && numericValue > 0) {
+          // 纯数字，假设是 pt
+          defaultFontSize = Math.round(numericValue);
+        }
+      }
+      
       const selection = window.getSelection();
       if (selection && selection.rangeCount > 0) {
         const range = selection.getRangeAt(0);
@@ -451,24 +469,37 @@ export const RichTextToolbar: React.FC<RichTextToolbarProps> = ({
           : container as HTMLElement;
         
         if (element) {
-          const computedStyle = window.getComputedStyle(element);
+          // 检测是否有显式设置的字号（在 span 标签的 style 中）
+          let currentFontSize = defaultFontSize;
+          let currentElement: HTMLElement | null = element;
           
-          // 检测字号
-          const fontSizeStr = computedStyle.fontSize;
-          let currentFontSize = 12;
-          
-          if (fontSizeStr) {
-            if (fontSizeStr.endsWith('pt')) {
-              currentFontSize = Math.round(parseFloat(fontSizeStr));
-            } else if (fontSizeStr.endsWith('px')) {
-              currentFontSize = Math.round(parseFloat(fontSizeStr) * 0.75);
+          // 向上遍历 DOM 树，查找第一个明确设置了 fontSize 的元素
+          while (currentElement && currentElement.classList?.contains('rich-text-editor') === false) {
+            if (currentElement.style.fontSize) {
+              const fontSizeStr = currentElement.style.fontSize;
+              const numericValue = parseFloat(fontSizeStr);
+              
+              if (fontSizeStr.endsWith('pt')) {
+                currentFontSize = Math.round(numericValue);
+                break;
+              } else if (fontSizeStr.endsWith('px')) {
+                // px 转 pt: 1pt = 4/3px, 所以 pt = px * 0.75
+                currentFontSize = Math.round(numericValue * 0.75);
+                break;
+              } else if (!isNaN(numericValue) && numericValue > 0) {
+                // 无单位，假设是 pt
+                currentFontSize = Math.round(numericValue);
+                break;
+              }
             }
+            currentElement = currentElement.parentElement;
           }
           
           setFontSize(currentFontSize);
           
           // 检测对齐方式（如果没有提供 currentAlign）
           if (!currentAlign) {
+            const computedStyle = window.getComputedStyle(element);
             const textAlignValue = computedStyle.textAlign;
             if (textAlignValue === 'left' || textAlignValue === 'center' || 
                 textAlignValue === 'right' || textAlignValue === 'justify') {
@@ -480,6 +511,9 @@ export const RichTextToolbar: React.FC<RichTextToolbarProps> = ({
             }
           }
         }
+      } else {
+        // 没有选区时，使用默认字号
+        setFontSize(defaultFontSize);
       }
     }
     });
@@ -492,6 +526,7 @@ export const RichTextToolbar: React.FC<RichTextToolbarProps> = ({
     isTableMode,
     tableContext,
     currentAlign,
+    baseStyle,
     hasSelectedTableCells,
     commonFontSize,
     commonColor,
@@ -583,14 +618,45 @@ export const RichTextToolbar: React.FC<RichTextToolbarProps> = ({
       return;
     }
     
-    const applied = wrapSelectionWithTag('span', { fontSize: `${value}pt` });
-    if (!applied) {
+    const range = selection.getRangeAt(0);
+    
+    // 情况1：有选中的文本
+    if (!selection.isCollapsed) {
+      const applied = wrapSelectionWithTag('span', { fontSize: `${value}pt` });
+      if (!applied) {
+        return;
+      }
+      
+      setFontSize(value);
+      savedRangeRef.current = saveSelection();
+      onFormat();
       return;
     }
     
-    setFontSize(value);
-    savedRangeRef.current = saveSelection();
-    onFormat();
+    // 情况2：没有选中文本（光标位置）
+    // 在光标位置创建一个带有新字号的空span，用户后续输入的文字将使用这个字号
+    const span = document.createElement('span');
+    span.style.fontSize = `${value}pt`;
+    span.setAttribute('data-font-size-placeholder', 'true');
+    // 插入一个零宽空格，确保光标可以定位到这个span中
+    span.textContent = '\u200B'; // 零宽空格
+    
+    try {
+      range.insertNode(span);
+      
+      // 将光标移动到span内部
+      const newRange = document.createRange();
+      newRange.setStart(span.firstChild!, 1);
+      newRange.collapse(true);
+      selection.removeAllRanges();
+      selection.addRange(newRange);
+      
+      setFontSize(value);
+      savedRangeRef.current = saveSelection();
+      onFormat();
+    } catch (error) {
+      console.error('插入字号样式失败:', error);
+    }
   }, [getEditorElement, isTableMode, tableContext, onFormat]);
 
   // ── 处理颜色变化 ───────────────────────────────────────────────────────────

src/utils/richTextConverter.ts

@@ -136,13 +136,16 @@ export function richTextToHtml(content: string | RichText[], baseStyle?: { fontS
         styles.push(`color: #${color}`);
       }
       
-      // 字号：优先使用片段自己的字号，否则使用基础样式的字号
-      const finalFontSize = font_size !== undefined ? font_size : baseStyle?.fontSize;
-      if (finalFontSize) styles.push(`font-size: ${finalFontSize}pt`);
+      // 字号：只有当片段明确设置了字号时才添加样式，否则继承容器的字号
+      // 这样可以避免重复设置，保持 DOM 的简洁性
+      if (font_size !== undefined) {
+        styles.push(`font-size: ${font_size}pt`);
+      }
       
-      // 字体：优先使用片段自己的字体，否则使用基础样式的字体
-      const finalFontName = font_name || baseStyle?.fontFamily;
-      if (finalFontName) styles.push(`font-family: ${toCssString(finalFontName)}`);
+      // 字体：只有当片段明确设置了字体时才添加样式，否则继承容器的字体
+      if (font_name) {
+        styles.push(`font-family: ${toCssString(font_name)}`);
+      }
       
       // 包装HTML标签
       if (bold) html = `<strong>${html}</strong>`;
@@ -209,7 +212,7 @@ function extractStyleFromElement(element: HTMLElement | null): RichTextStyle {
         
         if (fontSizeStr.endsWith('pt')) {
           // pt单位直接解析
-          fontSize = parseFloat(fontSizeStr);
+          fontSize = Math.round(parseFloat(fontSizeStr));
         } else if (fontSizeStr.endsWith('px')) {
           // px转pt: 1pt = 4/3 px, 所以 px * 0.75 = pt
           fontSize = Math.round(parseFloat(fontSizeStr) * 0.75);
@@ -217,14 +220,29 @@ function extractStyleFromElement(element: HTMLElement | null): RichTextStyle {
           // em相对单位，假设基准是16px
           fontSize = Math.round(parseFloat(fontSizeStr) * 16 * 0.75);
         } else {
-          // 无单位或其他单位，尝试直接解析为数字
-          fontSize = parseFloat(fontSizeStr);
+          // 无单位或其他单位，尝试直接解析为数字（假设是pt）
+          const numValue = parseFloat(fontSizeStr);
+          if (!isNaN(numValue) && numValue > 0) {
+            fontSize = Math.round(numValue);
+          }
         }
         
         if (fontSize && !isNaN(fontSize) && fontSize > 0) {
           style.font_size = fontSize;
         }
       }
+      
+      // 检查 font-family
+      if (el.style.fontFamily && !style.font_name) {
+        // 移除引号并取第一个字体名
+        const fontFamily = el.style.fontFamily
+          .split(',')[0]
+          .trim()
+          .replace(/^["']|["']$/g, '');
+        if (fontFamily) {
+          style.font_name = fontFamily;
+        }
+      }
     }
     
     // 特殊处理：检查 FONT 标签（execCommand 可能会创建）
@@ -257,11 +275,15 @@ function extractStyleFromElement(element: HTMLElement | null): RichTextStyle {
         let fontSize: number | undefined;
         
         if (fontSizeStr.endsWith('pt')) {
-          fontSize = parseFloat(fontSizeStr);
+          fontSize = Math.round(parseFloat(fontSizeStr));
         } else if (fontSizeStr.endsWith('px')) {
           fontSize = Math.round(parseFloat(fontSizeStr) * 0.75);
         } else {
-          fontSize = parseFloat(fontSizeStr);
+          // 无单位，假设是pt
+          const numValue = parseFloat(fontSizeStr);
+          if (!isNaN(numValue) && numValue > 0) {
+            fontSize = Math.round(numValue);
+          }
         }
         
         if (fontSize && !isNaN(fontSize) && fontSize > 0) {

src/utils/styleResolver.ts

@@ -193,11 +193,13 @@ export function resolveBlockStyle(
   
   // 4. 移除会影响富文本子元素的可继承属性
   // 这些属性应该由富文本内部的标签控制
+  // 但保留 fontSize 和 fontFamily，因为它们需要作为 baseStyle 传递给 RichTextEditor
   const safeStyles = { ...merged };
   delete safeStyles.color;
   delete safeStyles.fontWeight;
   delete safeStyles.fontStyle;
   delete safeStyles.textDecoration;
+  // 保留 fontSize 和 fontFamily
   
   return safeStyles;
 }