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 498c1421983feface8b1bee2981eb9521bcc56fb Author: robin <[email protected]> AuthorDate: Tue Dec 16 15:07:29 2025 +0800 feat(editor): rename WYSIWYG editor to Rich editor and implement new RichEditor component - Updated the editor mode from WYSIWYG to Rich in the MDEditor component. - Introduced a new RichEditor component utilizing TipTap for enhanced editing capabilities. - Adjusted styles and references in the editor components to reflect the new naming convention. --- .../Editor/{WysiwygEditor.tsx => RichEditor.tsx} | 8 ++++---- ui/src/components/Editor/index.scss | 3 +-- ui/src/components/Editor/index.tsx | 16 ++++++++-------- ui/src/components/Editor/utils/tiptap/adapter.ts | 2 +- 4 files changed, 14 insertions(+), 15 deletions(-) diff --git a/ui/src/components/Editor/WysiwygEditor.tsx b/ui/src/components/Editor/RichEditor.tsx similarity index 96% rename from ui/src/components/Editor/WysiwygEditor.tsx rename to ui/src/components/Editor/RichEditor.tsx index 7ddb2836..c574551c 100644 --- a/ui/src/components/Editor/WysiwygEditor.tsx +++ b/ui/src/components/Editor/RichEditor.tsx @@ -33,7 +33,7 @@ import { TableKit } from '@tiptap/extension-table'; import { Editor } from './types'; import { createTipTapAdapter } from './utils/tiptap/adapter'; -interface WysiwygEditorProps { +interface RichEditorProps { value: string; onChange?: (value: string) => void; onFocus?: () => void; @@ -43,7 +43,7 @@ interface WysiwygEditorProps { onEditorReady?: (editor: Editor) => void; } -const WysiwygEditor: React.FC<WysiwygEditorProps> = ({ +const RichEditor: React.FC<RichEditorProps> = ({ value, onChange, onFocus, @@ -153,10 +153,10 @@ const WysiwygEditor: React.FC<WysiwygEditorProps> = ({ } return ( - <div className="wysiwyg-editor-wrap"> + <div className="rich-editor-wrap"> <EditorContent editor={editor} /> </div> ); }; -export default WysiwygEditor; +export default RichEditor; diff --git a/ui/src/components/Editor/index.scss b/ui/src/components/Editor/index.scss index 20ab5bab..4775e84a 100644 --- a/ui/src/components/Editor/index.scss +++ b/ui/src/components/Editor/index.scss @@ -114,8 +114,7 @@ height: 264px; } - // WYSIWYG 编辑器样式 - .wysiwyg-editor-wrap { + .rich-editor-wrap { height: 264px; overflow-y: auto; padding: 0.375rem 0.75rem; diff --git a/ui/src/components/Editor/index.tsx b/ui/src/components/Editor/index.tsx index 94bd5836..c293fa65 100644 --- a/ui/src/components/Editor/index.tsx +++ b/ui/src/components/Editor/index.tsx @@ -51,7 +51,7 @@ import { import { htmlRender } from './utils'; import Viewer from './Viewer'; import { EditorContext } from './EditorContext'; -import WysiwygEditor from './WysiwygEditor'; +import RichEditor from './RichEditor'; import MarkdownEditor from './MarkdownEditor'; import { Editor } from './types'; @@ -86,14 +86,14 @@ const MDEditor: ForwardRefRenderFunction<EditorRef, Props> = ( }, ref, ) => { - const [mode, setMode] = useState<'markdown' | 'wysiwyg'>('markdown'); + const [mode, setMode] = useState<'markdown' | 'rich'>('markdown'); const [currentEditor, setCurrentEditor] = useState<Editor | null>(null); const previewRef = useRef<{ getHtml; element } | null>(null); useRenderPlugin(previewRef.current?.element); const handleModeChange = useCallback( - (newMode: 'markdown' | 'wysiwyg') => { + (newMode: 'markdown' | 'rich') => { if (newMode === mode) { return; } @@ -116,7 +116,7 @@ const MDEditor: ForwardRefRenderFunction<EditorRef, Props> = ( [getHtml], ); - const EditorComponent = mode === 'markdown' ? MarkdownEditor : WysiwygEditor; + const EditorComponent = mode === 'markdown' ? MarkdownEditor : RichEditor; return ( <> @@ -155,17 +155,17 @@ const MDEditor: ForwardRefRenderFunction<EditorRef, Props> = ( className={`btn btn-sm ${ mode === 'markdown' ? 'btn-primary' : 'btn-outline-secondary' }`} - title="Markdown 模式" + title="Markdown Mode" onClick={() => handleModeChange('markdown')}> <i className="bi bi-filetype-md" /> </button> <button type="button" className={`btn btn-sm ${ - mode === 'wysiwyg' ? 'btn-primary' : 'btn-outline-secondary' + mode === 'rich' ? 'btn-primary' : 'btn-outline-secondary' }`} - title="WYSIWYG 模式" - onClick={() => handleModeChange('wysiwyg')}> + title="Rich Mode" + onClick={() => handleModeChange('rich')}> <i className="bi bi-type" /> </button> </div> diff --git a/ui/src/components/Editor/utils/tiptap/adapter.ts b/ui/src/components/Editor/utils/tiptap/adapter.ts index 862cbf6c..415edb17 100644 --- a/ui/src/components/Editor/utils/tiptap/adapter.ts +++ b/ui/src/components/Editor/utils/tiptap/adapter.ts @@ -29,7 +29,7 @@ import { createCommandMethods } from './commands'; * Adapts TipTap editor to CodeMirror editor interface * * This adapter function converts TipTap editor's API to a CodeMirror-compatible interface, - * enabling toolbar components to work properly in WYSIWYG mode. The adapter implements + * enabling toolbar components to work properly in Rich mode. The adapter implements * the complete `ExtendEditor` interface, including base methods, event handling, and command methods. * * @param editor - TipTap editor instance
