This is an automated email from the ASF dual-hosted git repository. robin0716 pushed a commit to branch feat/1.7.2/ui in repository https://gitbox.apache.org/repos/asf/answer.git
commit 7a4b57d1ffdb0b2980e8dc9b46e74b12b9e22cba Author: robin <[email protected]> AuthorDate: Wed Dec 17 10:50:36 2025 +0800 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. --- ui/src/components/Editor/ToolBars/heading.tsx | 2 +- ui/src/components/Editor/ToolBars/image.tsx | 10 ++++------ ui/src/components/Editor/toolItem.tsx | 2 +- ui/src/components/Editor/types.ts | 9 --------- ui/src/components/Editor/utils/index.ts | 2 -- 5 files changed, 6 insertions(+), 19 deletions(-) diff --git a/ui/src/components/Editor/ToolBars/heading.tsx b/ui/src/components/Editor/ToolBars/heading.tsx index 4b49212c..bcce69ae 100644 --- a/ui/src/components/Editor/ToolBars/heading.tsx +++ b/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; } diff --git a/ui/src/components/Editor/ToolBars/image.tsx b/ui/src/components/Editor/ToolBars/image.tsx index 67a79b3c..52b2e546 100644 --- a/ui/src/components/Editor/ToolBars/image.tsx +++ b/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(() => { diff --git a/ui/src/components/Editor/toolItem.tsx b/ui/src/components/Editor/toolItem.tsx index c0fdf175..39f82d70 100644 --- a/ui/src/components/Editor/toolItem.tsx +++ b/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; }, }); }); diff --git a/ui/src/components/Editor/types.ts b/ui/src/components/Editor/types.ts index e7d23081..48f69322 100644 --- a/ui/src/components/Editor/types.ts +++ b/ui/src/components/Editor/types.ts @@ -61,7 +61,6 @@ 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], @@ -69,37 +68,29 @@ export interface ExtendEditor { ) => 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; diff --git a/ui/src/components/Editor/utils/index.ts b/ui/src/components/Editor/utils/index.ts index 5ba7192c..eb4ad16e 100644 --- a/ui/src/components/Editor/utils/index.ts +++ b/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);
