refactor(editor): improve editor component functionality and code clarity

- Updated ToolItem component to ensure consistent return type for command functions.
- Modified heading toolbar to allow optional label parameter in handleClick function.
- Enhanced image component comments for clarity on editor state updates and event listener management.
- Cleaned up utility functions in htmlRender to remove unnecessary comments and improve readability.

Author: robin

ui/src/components/Editor/ToolBars/heading.tsx

@@ -62,7 +62,7 @@ const Heading = () => {
   const [isLocked, setLockState] = useState(false);
   const [currentEditor, setCurrentEditor] = useState<Editor | null>(null);
 
-  const handleClick = (level: Level = 2, label = '大标题') => {
+  const handleClick = (level: Level = 2, label?: string) => {
     if (!currentEditor) {
       return;
     }

ui/src/components/Editor/ToolBars/image.tsx

@@ -32,8 +32,8 @@ const Image = () => {
   const editor = useContext(EditorContext);
   const [editorState, setEditorState] = useState<Editor | null>(editor);
 
-  // 当 editor 改变时，更新 editor state
-  // 这样切换编辑器模式时，事件监听器会重新绑定
+  // Update editor state when editor context changes
+  // This ensures event listeners are re-bound when switching editor modes
   useEffect(() => {
     if (editor) {
       setEditorState(editor);
@@ -329,20 +329,18 @@ const Image = () => {
     if (!editorState) {
       return undefined;
     }
-    // 绑定事件监听器
+
     editorState.on('dragenter', dragenter);
     editorState.on('dragover', dragover);
     editorState.on('drop', drop);
     editorState.on('paste', paste);
+
     return () => {
-      // 清理事件监听器
       editorState.off('dragenter', dragenter);
       editorState.off('dragover', dragover);
       editorState.off('drop', drop);
       editorState.off('paste', paste);
     };
-    // 注意：dragenter, dragover, drop, paste 函数在组件生命周期内是稳定的
-    // 它们不依赖任何会变化的值，所以不需要加入依赖项
   }, [editorState]);
 
   useEffect(() => {

ui/src/components/Editor/toolItem.tsx

@@ -63,7 +63,7 @@ const ToolItem: FC<IProps> = (props) => {
       editor?.addKeyMap({
         [key]: () => {
           onClick?.(editor);
-          return true; // Command 类型要求返回 boolean
+          return true;
         },
       });
     });

ui/src/components/Editor/types.ts

@@ -61,45 +61,36 @@ export interface ExtendEditor {
   setSelection: (anchor: Position, head?: Position) => void;
   setReadOnly: (readOnly: boolean) => void;
 
-  // 底层方法（供编辑器内部使用，不推荐工具栏直接使用）
   wrapText: (before: string, after?: string, defaultText?: string) => void;
   replaceLines: (
     replace: Parameters<Array<string>['map']>[0],
     symbolLen?: number,
   ) => void;
   appendBlock: (content: string) => void;
 
-  // 语义化高级方法（工具栏推荐使用）
-  // 文本格式
   insertBold: (text?: string) => void;
   insertItalic: (text?: string) => void;
   insertCode: (text?: string) => void;
   insertStrikethrough: (text?: string) => void;
 
-  // 块级元素
   insertHeading: (level: Level, text?: string) => void;
   insertBlockquote: (text?: string) => void;
   insertCodeBlock: (language?: string, code?: string) => void;
   insertHorizontalRule: () => void;
 
-  // 列表
   insertOrderedList: () => void;
   insertUnorderedList: () => void;
   toggleOrderedList: () => void;
   toggleUnorderedList: () => void;
 
-  // 链接和媒体
   insertLink: (url: string, text?: string) => void;
   insertImage: (url: string, alt?: string) => void;
 
-  // 表格
   insertTable: (rows?: number, cols?: number) => void;
 
-  // 缩进
   indent: () => void;
   outdent: () => void;
 
-  // 状态查询
   isBold: () => boolean;
   isItalic: () => boolean;
   isHeading: (level?: number) => boolean;

ui/src/components/Editor/utils/index.ts

@@ -95,10 +95,8 @@ export function htmlRender(el: HTMLElement | null, config?: htmlRenderConfig) {
     `;
     codeTool.innerHTML = str;
 
-    // Add copy button to pre tag
     pre.style.position = 'relative';
 
-    // 将 codeTool 和 pre 插入到 codeWrap 中, 并且使用 codeWrap 替换 pre
     codeWrap.appendChild(codeTool);
     pre.parentNode?.replaceChild(codeWrap, pre);
     codeWrap.appendChild(pre);