feat(编辑器): 优化富文本工具栏稳定性与选区验证机制

- 修复requestAnimationFrame未正确清理导致的内存泄漏问题
- 增强选区验证逻辑，确保工具栏仅在有效编辑器范围内显示
- 改进选区恢复机制，添加编辑器容器边界检查防止跨编辑器干扰
- 优化内容格式按钮布局，采用固定六列网格避免工具栏溢出
- 重构hasFormat函数，改进选区遍历效率与范围检测准确性
- 移除未使用的UnorderedListOutlined导入与过期工具函数

src/components/Editor/RichTextEditor/RichTextEditor.tsx

@@ -135,6 +135,15 @@ export const RichTextEditor: React.FC<RichTextEditorProps> = ({
   const [toolbarPosition, setToolbarPosition] = useState({ top: 0, left: -34 });
   const isComposingRef = useRef(false);
   const isFormattingRef = useRef(false); // 标记正在格式化,避免被value更新覆盖
+  const formatFrameRef = useRef<number | null>(null);
+
+  useEffect(() => {
+    return () => {
+      if (formatFrameRef.current !== null) {
+        cancelAnimationFrame(formatFrameRef.current);
+      }
+    };
+  }, []);
 
   // ── 初始化内容 ─────────────────────────────────────────────────────────────
   useEffect(() => {
@@ -183,10 +192,15 @@ export const RichTextEditor: React.FC<RichTextEditorProps> = ({
   // ── 处理格式变更(工具栏修改) ──────────────────────────────────────────────
   const handleFormatChange = useCallback(() => {
     if (!editorRef.current || !onChange) return;
+
+    if (formatFrameRef.current !== null) {
+      cancelAnimationFrame(formatFrameRef.current);
+    }
     
     // 使用requestAnimationFrame或setTimeout等待DOM更新
     // 这样可以确保工具栏的DOM修改已经完成
-    requestAnimationFrame(() => {
+    formatFrameRef.current = requestAnimationFrame(() => {
+      formatFrameRef.current = null;
       if (!editorRef.current || !onChange) return;
       
       // 标记正在格式化
@@ -283,7 +297,12 @@ export const RichTextEditor: React.FC<RichTextEditorProps> = ({
     }
     
     // 富文本模式：只在有选中文本时显示工具栏
-    if (!selection || selection.isCollapsed) {
+    if (!selection || selection.isCollapsed || !editorRef.current) {
+      return;
+    }
+
+    const range = selection.getRangeAt(0);
+    if (!editorRef.current.contains(range.commonAncestorContainer)) {
       return;
     }
 

src/components/Editor/RichTextEditor/RichTextToolbar.css

@@ -79,6 +79,15 @@
   gap: 2px;
 }
 
+/* 内容格式按钮较多，固定六列，避免标题和列表按钮超出工具栏。 */
+.rich-text-toolbar.expanded .toolbar-row.toolbar-row-content {
+  display: grid;
+  grid-template-columns: repeat(6, 28px);
+  grid-auto-rows: 28px;
+  justify-content: start;
+  gap: 2px;
+}
+
 .toolbar-row-primary,
 .toolbar-row-secondary,
 .toolbar-row-format {

src/components/Editor/RichTextEditor/RichTextToolbar.tsx

@@ -18,7 +18,6 @@ import {
   FontSizeOutlined,
   FontColorsOutlined,
   OrderedListOutlined,
-  UnorderedListOutlined,
   AlignLeftOutlined,
   AlignCenterOutlined,
   AlignRightOutlined,
@@ -102,6 +101,18 @@ function restoreSelection(saved: SavedRange | null): boolean {
         !document.body.contains(saved.endContainer)) {
       return false;
     }
+
+    const startElement = saved.startContainer.nodeType === Node.TEXT_NODE
+      ? saved.startContainer.parentElement
+      : saved.startContainer as HTMLElement;
+    const endElement = saved.endContainer.nodeType === Node.TEXT_NODE
+      ? saved.endContainer.parentElement
+      : saved.endContainer as HTMLElement;
+    const startEditor = startElement?.closest('.rich-text-editor');
+    const endEditor = endElement?.closest('.rich-text-editor');
+    if (!startEditor || startEditor !== endEditor) {
+      return false;
+    }
     
     const range = document.createRange();
     range.setStart(saved.startContainer, saved.startOffset);
@@ -120,13 +131,28 @@ function restoreSelection(saved: SavedRange | null): boolean {
   }
 }
 
-function restoreSavedOrCurrentSelection(saved: SavedRange | null): boolean {
+function restoreSavedOrCurrentSelection(saved: SavedRange | null, editor?: HTMLElement | null): boolean {
   if (restoreSelection(saved)) {
-    return true;
+    if (!editor) return true;
+    const selection = window.getSelection();
+    const container = selection?.rangeCount ? selection.getRangeAt(0).commonAncestorContainer : null;
+    const element = container?.nodeType === Node.TEXT_NODE
+      ? container.parentElement
+      : container as HTMLElement | null;
+    return element?.closest('.rich-text-editor') === editor;
   }
 
   const selection = window.getSelection();
-  return !!selection && selection.rangeCount > 0 && !selection.isCollapsed;
+  if (!selection || selection.rangeCount === 0 || selection.isCollapsed) {
+    return false;
+  }
+
+  const container = selection.getRangeAt(0).commonAncestorContainer;
+  const element = container.nodeType === Node.TEXT_NODE
+    ? container.parentElement
+    : container as HTMLElement;
+  const selectedEditor = element?.closest('.rich-text-editor');
+  return !!selectedEditor && (!editor || selectedEditor === editor);
 }
 
 // ══════════════════════════════════════════════════════════════════════════════
@@ -187,54 +213,49 @@ function hasFormat(tagName?: string, styleCheck?: (el: HTMLElement) => boolean):
   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;
-  
-  // 向上遍历检查
-  let element: HTMLElement | null = parentElement;
-  while (element && element !== document.body) {
-    // 检查标签名
-    if (tagName && element.tagName.toUpperCase() === tagName.toUpperCase()) {
-      return true;
-    }
-    
-    // 检查样式
-    if (styleCheck && styleCheck(element)) {
-      return true;
+  const matchesElement = (element: HTMLElement | null): boolean => {
+    let current = element;
+    while (current && current !== document.body) {
+      if (tagName && current.tagName.toUpperCase() === tagName.toUpperCase()) {
+        return true;
+      }
+      if (styleCheck && styleCheck(current)) {
+        return true;
+      }
+      current = current.parentElement;
     }
-    
-    element = element.parentElement;
-  }
-  
-  return false;
-}
-
-type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
-type ContentFormat = 'paragraph' | 'ordered-list' | 'unordered-list' | `heading-${HeadingLevel}`;
-
-function getTextWithLineBreaks(node: Node): string {
-  if (node.nodeType === Node.TEXT_NODE) {
-    return node.textContent || '';
-  }
+    return false;
+  };
 
-  if (node.nodeType !== Node.ELEMENT_NODE && node.nodeType !== Node.DOCUMENT_FRAGMENT_NODE) {
-    return '';
+  if (range.collapsed) {
+    const container = range.startContainer;
+    const element = container.nodeType === Node.TEXT_NODE
+      ? container.parentElement
+      : container as HTMLElement;
+    return matchesElement(element);
   }
 
-  const element = node as HTMLElement;
-  if (element.tagName === 'BR') {
-    return '\n';
+  const walker = document.createTreeWalker(
+    range.commonAncestorContainer,
+    NodeFilter.SHOW_TEXT,
+  );
+  let textNode: Node | null = walker.nextNode();
+  while (textNode) {
+    if (range.intersectsNode(textNode)) {
+      if (matchesElement(textNode.parentElement)) return true;
+    }
+    textNode = walker.nextNode();
   }
 
-  const text = Array.from(node.childNodes).map(getTextWithLineBreaks).join('');
-  const blockTags = new Set(['DIV', 'P', 'LI', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6']);
-  return element.tagName && blockTags.has(element.tagName) ? `${text}\n` : text;
+  const ancestor = range.commonAncestorContainer.nodeType === Node.TEXT_NODE
+    ? range.commonAncestorContainer.parentElement
+    : range.commonAncestorContainer as HTMLElement;
+  return matchesElement(ancestor);
 }
 
+type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+type ContentFormat = 'paragraph' | 'ordered-list' | 'unordered-list' | `heading-${HeadingLevel}`;
+
 // ══════════════════════════════════════════════════════════════════════════════
 // Component
 // ══════════════════════════════════════════════════════════════════════════════
@@ -257,7 +278,7 @@ export const RichTextToolbar: React.FC<RichTextToolbarProps> = ({
   const [colorPickerOpen, setColorPickerOpen] = useState(false);
   
   // 对齐样式状态
-  const [textAlign, setTextAlign] = useState<'left' | 'center' | 'right' | 'justify'>('center');
+  const [textAlign, setTextAlign] = useState<'left' | 'center' | 'right' | 'justify'>('left');
   const [verticalAlign, setVerticalAlign] = useState<'top' | 'middle' | 'bottom'>('middle');
   const [isBold, setIsBold] = useState<boolean>(false);
   const [isItalic, setIsItalic] = useState<boolean>(false);
@@ -267,6 +288,10 @@ export const RichTextToolbar: React.FC<RichTextToolbarProps> = ({
   // 判断是否处于表格编辑模式
   const isTableMode = !!tableContext;
 
+  const getEditorElement = useCallback(() => (
+    toolbarRef.current?.parentElement?.querySelector<HTMLElement>('.rich-text-editor') ?? null
+  ), []);
+
   // 预设颜色
   const presetColors = [
     '#000000', '#FFFFFF', '#FF0000', '#00FF00',
@@ -280,7 +305,15 @@ export const RichTextToolbar: React.FC<RichTextToolbarProps> = ({
     let canceled = false;
 
     if (!isTableMode) {
-      savedRangeRef.current = saveSelection();
+      const selection = window.getSelection();
+      const range = selection?.rangeCount ? selection.getRangeAt(0) : null;
+      const container = range?.commonAncestorContainer;
+      const element = container?.nodeType === Node.TEXT_NODE
+        ? container.parentElement
+        : container as HTMLElement | null;
+      if (element?.closest('.rich-text-editor') === getEditorElement()) {
+        savedRangeRef.current = saveSelection();
+      }
     }
 
     queueMicrotask(() => {
@@ -350,7 +383,7 @@ export const RichTextToolbar: React.FC<RichTextToolbarProps> = ({
     return () => {
       canceled = true;
     };
-  }, [isTableMode, tableContext, currentAlign]);
+  }, [getEditorElement, isTableMode, tableContext, currentAlign]);
 
   useEffect(() => {
     if (isTableMode) return;
@@ -365,14 +398,14 @@ export const RichTextToolbar: React.FC<RichTextToolbarProps> = ({
         ? container.parentElement
         : container as HTMLElement;
 
-      if (element?.closest('.rich-text-editor')) {
+      if (element?.closest('.rich-text-editor') === getEditorElement()) {
         savedRangeRef.current = saveSelection();
       }
     };
 
     document.addEventListener('selectionchange', handleSelectionChange);
     return () => document.removeEventListener('selectionchange', handleSelectionChange);
-  }, [isTableMode]);
+  }, [getEditorElement, isTableMode]);
 
   // ── 点击外部关闭 ───────────────────────────────────────────────────────────
   useEffect(() => {
@@ -381,7 +414,7 @@ export const RichTextToolbar: React.FC<RichTextToolbarProps> = ({
       const isToolbarPopup = target.closest('.ant-select-dropdown, .ant-popover, .ant-dropdown');
 
       if (toolbarRef.current && !toolbarRef.current.contains(target) && !isToolbarPopup) {
-        const editor = document.querySelector('.rich-text-editor');
+        const editor = getEditorElement();
         if (!editor?.contains(target)) {
           setIsExpanded(false);
           onClose();
@@ -391,7 +424,7 @@ export const RichTextToolbar: React.FC<RichTextToolbarProps> = ({
 
     document.addEventListener('mousedown', handleClickOutside);
     return () => document.removeEventListener('mousedown', handleClickOutside);
-  }, [onClose]);
+  }, [getEditorElement, onClose]);
 
   // ── 切换格式 (Bold, Italic, Underline) ─────────────────────────────────────
   const toggleFormat = useCallback((tagName: string) => {
@@ -410,7 +443,7 @@ export const RichTextToolbar: React.FC<RichTextToolbarProps> = ({
     }
     
     // 富文本模式
-    const restored = restoreSavedOrCurrentSelection(savedRangeRef.current);
+    const restored = restoreSavedOrCurrentSelection(savedRangeRef.current, getEditorElement());
     if (!restored) {
       return;
     }
@@ -425,7 +458,7 @@ export const RichTextToolbar: React.FC<RichTextToolbarProps> = ({
     
     savedRangeRef.current = saveSelection();
     onFormat();
-  }, [isTableMode, tableContext, isBold, isItalic, isUnderline, onFormat]);
+  }, [getEditorElement, isTableMode, tableContext, isBold, isItalic, isUnderline, onFormat]);
 
   // ── 处理字号变化 ───────────────────────────────────────────────────────────
   const handleFontSizeChange = useCallback((value: number | null) => {
@@ -440,7 +473,7 @@ export const RichTextToolbar: React.FC<RichTextToolbarProps> = ({
     }
     
     // 富文本模式
-    if (!restoreSavedOrCurrentSelection(savedRangeRef.current)) {
+    if (!restoreSavedOrCurrentSelection(savedRangeRef.current, getEditorElement())) {
       return;
     }
     
@@ -456,7 +489,7 @@ export const RichTextToolbar: React.FC<RichTextToolbarProps> = ({
     
     savedRangeRef.current = saveSelection();
     onFormat();
-  }, [isTableMode, tableContext, onFormat]);
+  }, [getEditorElement, isTableMode, tableContext, onFormat]);
 
   // ── 处理颜色变化 ───────────────────────────────────────────────────────────
   const handleColorChange = useCallback((color: string) => {
@@ -471,7 +504,7 @@ export const RichTextToolbar: React.FC<RichTextToolbarProps> = ({
     }
     
     // 富文本模式
-    const restored = restoreSavedOrCurrentSelection(savedRangeRef.current);
+    const restored = restoreSavedOrCurrentSelection(savedRangeRef.current, getEditorElement());
     
     if (!restored) {
       setTimeout(() => setColorPickerOpen(false), 100);
@@ -506,7 +539,7 @@ export const RichTextToolbar: React.FC<RichTextToolbarProps> = ({
     onFormat();
     
     setTimeout(() => setColorPickerOpen(false), 100);
-  }, [isTableMode, tableContext, onFormat]);
+  }, [getEditorElement, isTableMode, tableContext, onFormat]);
 
   // ── 处理对齐方式 ──────────────────────────────────────────────────────────
   const handleTextAlignChange = useCallback((align: 'left' | 'center' | 'right' | 'justify') => {
@@ -535,41 +568,20 @@ export const RichTextToolbar: React.FC<RichTextToolbarProps> = ({
 
   // ── 处理内容格式 ──────────────────────────────────────────────────────────
   const handleContentFormatChange = useCallback((format: ContentFormat) => {
-    if (isTableMode || !restoreSavedOrCurrentSelection(savedRangeRef.current)) {
-      return;
-    }
-
-    const selection = window.getSelection();
-    if (!selection || selection.rangeCount === 0 || selection.isCollapsed) {
+    if (isTableMode) {
       return;
     }
 
-    if (format !== 'ordered-list') {
+    // 对于列表格式，直接调用回调，不需要选中文本
+    if (format === 'ordered-list') {
       onContentFormatChange?.(format);
+      onFormat();
       return;
-    } else {
-      const range = selection.getRangeAt(0);
-      const selectedContent = range.cloneContents();
-      const selectedText = getTextWithLineBreaks(selectedContent).replace(/\n+$/, '');
-      const lines = selectedText.split(/\r?\n/);
-      let itemNumber = 0;
-      const numberedText = lines.map((line) => {
-        if (!line.trim()) return '';
-        itemNumber += 1;
-        return `${itemNumber}. ${line.replace(/^\s*\d+\.\s+/, '')}`;
-      }).join('\n');
-
-      range.deleteContents();
-      const textNode = document.createTextNode(numberedText);
-      range.insertNode(textNode);
-      range.selectNodeContents(textNode);
-      selection.removeAllRanges();
-      selection.addRange(range);
     }
 
-    savedRangeRef.current = saveSelection();
+    // 对于段落和标题格式，也直接调用回调
+    onContentFormatChange?.(format);
     onFormat();
-    requestAnimationFrame(() => onContentFormatChange?.('ordered-list'));
   }, [isTableMode, onContentFormatChange, onFormat]);
 
   // ── 检查格式状态 ───────────────────────────────────────────────────────────
@@ -588,7 +600,7 @@ export const RichTextToolbar: React.FC<RichTextToolbarProps> = ({
 
   const handleDelete = useCallback(() => {
     if (isTableMode) return;
-    if (restoreSavedOrCurrentSelection(savedRangeRef.current)) {
+    if (restoreSavedOrCurrentSelection(savedRangeRef.current, getEditorElement())) {
       const selection = window.getSelection();
       if (selection && selection.rangeCount > 0 && !selection.isCollapsed) {
         document.execCommand('delete', false);
@@ -597,22 +609,38 @@ export const RichTextToolbar: React.FC<RichTextToolbarProps> = ({
       }
     }
     onDelete?.();
-  }, [isTableMode, onDelete, onFormat]);
+  }, [getEditorElement, isTableMode, onDelete, onFormat]);
 
   // ── 阻止工具栏点击导致失焦 ─────────────────────────────────────────────────
   const handleMouseDown = (e: React.MouseEvent) => {
     if (!isTableMode) {
-      savedRangeRef.current = saveSelection();
+      const editor = getEditorElement();
+      const selection = window.getSelection();
+      const container = selection?.rangeCount ? selection.getRangeAt(0).commonAncestorContainer : null;
+      const element = container?.nodeType === Node.TEXT_NODE
+        ? container.parentElement
+        : container as HTMLElement | null;
+      if (element?.closest('.rich-text-editor') === editor) {
+        savedRangeRef.current = saveSelection();
+      }
     }
     e.preventDefault();
   };
 
   const handleLauncherClick = useCallback(() => {
     if (!isTableMode) {
-      savedRangeRef.current = saveSelection();
+      const editor = getEditorElement();
+      const selection = window.getSelection();
+      const container = selection?.rangeCount ? selection.getRangeAt(0).commonAncestorContainer : null;
+      const element = container?.nodeType === Node.TEXT_NODE
+        ? container.parentElement
+        : container as HTMLElement | null;
+      if (element?.closest('.rich-text-editor') === editor) {
+        savedRangeRef.current = saveSelection();
+      }
     }
     setIsExpanded(true);
-  }, [isTableMode]);
+  }, [getEditorElement, isTableMode]);
 
   // ── 渲染 ───────────────────────────────────────────────────────────────────
 
@@ -682,9 +710,6 @@ export const RichTextToolbar: React.FC<RichTextToolbarProps> = ({
             <ToolbarButton title="有序列表" active={currentContentFormat === 'ordered-list'} onClick={() => handleContentFormatChange('ordered-list')}>
               <OrderedListOutlined />
             </ToolbarButton>
-            <ToolbarButton title="无序列表" active={currentContentFormat === 'unordered-list'} onClick={() => handleContentFormatChange('unordered-list')}>
-              <UnorderedListOutlined />
-            </ToolbarButton>
           </div>
         </>
       )}
@@ -732,8 +757,13 @@ export const RichTextToolbar: React.FC<RichTextToolbarProps> = ({
           placement="bottomLeft"
           overlayClassName="rich-text-alignment-menu"
         >
-          <button type="button" className="toolbar-action-button" title={`缩进和对齐（${textAlign}）`}>
-            <AlignLeftOutlined /><span>缩进和对齐</span><DownOutlined />
+          <button type="button" className="toolbar-action-button" title="对齐方式">
+            {textAlign === 'left' && <AlignLeftOutlined />}
+            {textAlign === 'center' && <AlignCenterOutlined />}
+            {textAlign === 'right' && <AlignRightOutlined />}
+            {textAlign === 'justify' && <AlignRightOutlined />}
+            <span>对齐</span>
+            <DownOutlined />
           </button>
         </Dropdown>
       </div>

src/components/Editor/blocks/BlockMenu.tsx

@@ -62,6 +62,13 @@ export const BlockMenu: React.FC<BlockMenuProps> = ({
   onInsertTable,
 }) => {
   const uploadRef = React.useRef<HTMLDivElement>(null);
+  const isMountedRef = React.useRef(true);
+
+  React.useEffect(() => {
+    return () => {
+      isMountedRef.current = false;
+    };
+  }, []);
 
   /**
    * 处理图片上传
@@ -74,10 +81,17 @@ export const BlockMenu: React.FC<BlockMenuProps> = ({
       return false;
     }
 
-    // 文件类型检查
-    const isImage = file.type.startsWith('image/');
+    // 只允许浏览器可安全解码的常见栅格图片，避免将 SVG 等可执行载荷写入文档。
+    const allowedImageTypes = new Set([
+      'image/jpeg',
+      'image/png',
+      'image/gif',
+      'image/webp',
+      'image/bmp',
+    ]);
+    const isImage = allowedImageTypes.has(file.type.toLowerCase());
     if (!isImage) {
-      message.error('只能上传图片文件');
+      message.error('只支持 JPG、PNG、GIF、WebP 或 BMP 图片');
       return false;
     }
 
@@ -85,26 +99,54 @@ export const BlockMenu: React.FC<BlockMenuProps> = ({
     const reader = new FileReader();
     reader.onload = (e) => {
       const dataUrl = e.target?.result as string;
+      if (!isMountedRef.current || typeof dataUrl !== 'string') return;
 
       // 使用Image对象获取图片尺寸
       const img = new Image();
       img.onload = () => {
+        if (!isMountedRef.current) return;
+
+        const maxDimension = 10000;
+        const maxPixels = 40_000_000;
+        if (
+          !Number.isFinite(img.width) ||
+          !Number.isFinite(img.height) ||
+          img.width <= 0 ||
+          img.height <= 0 ||
+          img.width > maxDimension ||
+          img.height > maxDimension ||
+          img.width * img.height > maxPixels
+        ) {
+          message.error('图片尺寸过大，请选择较小的图片');
+          return;
+        }
+
         // 计算适合的显示尺寸（默认最大宽度15cm）
         const maxWidthCm = 15;
         const aspectRatio = img.height / img.width;
         const widthCm = Math.min(maxWidthCm, img.width / 37.795); // 37.795 px ≈ 1cm
         const heightCm = widthCm * aspectRatio;
+        const safeFileName = Array.from(file.name)
+          .filter((character) => {
+            const codePoint = character.codePointAt(0) ?? 0;
+            return codePoint > 31 && codePoint !== 127;
+          })
+          .join('')
+          .trim()
+          .slice(0, 200) || '未命名图片';
 
         // 调用插入图片回调
-        onInsertImage?.(dataUrl, file.name, parseFloat(widthCm.toFixed(2)), parseFloat(heightCm.toFixed(2)));
+        onInsertImage?.(dataUrl, safeFileName, parseFloat(widthCm.toFixed(2)), parseFloat(heightCm.toFixed(2)));
         message.success('图片已插入');
       };
       img.onerror = () => {
+        if (!isMountedRef.current) return;
         message.error('图片加载失败');
       };
       img.src = dataUrl;
     };
     reader.onerror = () => {
+      if (!isMountedRef.current) return;
       message.error('图片读取失败');
     };
     reader.readAsDataURL(file);