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.

Author: robin

…/src/components/Editor/WysiwygEditor.tsx ui/src/components/Editor/RichEditor.tsxui/src/components/Editor/WysiwygEditor.tsx renamed to ui/src/components/Editor/RichEditor.tsx ui/src/components/Editor/WysiwygEditor.tsx renamed to 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;

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;

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>

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