feat(editor): integrate TipTap WYSIWYG editor with Markdown support and enhance editor functionalities

- Added TipTap extensions for image, placeholder, table, and markdown support.
- Implemented WYSIWYG and Markdown editor components.
- Refactored editor context and tool items to utilize the new editor interface.
- Updated styles for the WYSIWYG editor.
- Removed deprecated utility functions and integrated new command methods for better editor interaction.

Author: robin

ui/package.json

@@ -21,6 +21,12 @@
     "@codemirror/language-data": "^6.5.0",
     "@codemirror/state": "^6.5.0",
     "@codemirror/view": "^6.26.1",
+    "@tiptap/extension-image": "^3.11.1",
+    "@tiptap/extension-placeholder": "^3.11.1",
+    "@tiptap/extension-table": "^3.11.1",
+    "@tiptap/markdown": "^3.11.1",
+    "@tiptap/react": "^3.11.1",
+    "@tiptap/starter-kit": "^3.11.1",
     "axios": "^1.7.7",
     "bootstrap": "^5.3.2",
     "bootstrap-icons": "^1.10.5",
@@ -100,4 +106,4 @@
     "pnpm": ">=9"
   },
   "license": "MIT"
-}
+}

ui/pnpm-lock.yaml

@@ -19,6 +19,6 @@
 
 import React from 'react';
 
-import { IEditorContext } from './types';
+import { Editor } from './types';
 
-export const EditorContext = React.createContext<IEditorContext | any>({});
+export const EditorContext = React.createContext<Editor | null>(null);

ui/src/components/Editor/EditorContext.ts

@@ -0,0 +1,112 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { useEffect, useRef } from 'react';
+
+import { EditorView } from '@codemirror/view';
+
+import { Editor } from './types';
+import { useEditor } from './utils';
+
+interface MarkdownEditorProps {
+  value: string;
+  onChange?: (value: string) => void;
+  onFocus?: () => void;
+  onBlur?: () => void;
+  placeholder?: string;
+  autoFocus?: boolean;
+  onEditorReady?: (editor: Editor) => void;
+}
+
+const MarkdownEditor: React.FC<MarkdownEditorProps> = ({
+  value,
+  onChange,
+  onFocus,
+  onBlur,
+  placeholder,
+  autoFocus,
+  onEditorReady,
+}) => {
+  const editorRef = useRef<HTMLDivElement>(null);
+  const lastSyncedValueRef = useRef<string>(value);
+
+  const editor = useEditor({
+    editorRef,
+    onChange,
+    onFocus,
+    onBlur,
+    placeholder,
+    autoFocus,
+  });
+
+  // 初始化内容（只在编辑器创建时执行）
+  useEffect(() => {
+    if (!editor) {
+      return;
+    }
+
+    // 初始化编辑器内容
+    editor.setValue(value || '');
+    lastSyncedValueRef.current = value || '';
+    onEditorReady?.(editor);
+  }, [editor]); // 只在编辑器创建时执行
+
+  // 当外部 value 变化时更新（但不是用户输入导致的）
+  useEffect(() => {
+    if (!editor) {
+      return;
+    }
+
+    // 如果 value 和 lastSyncedValueRef 相同，说明是用户输入导致的更新，跳过
+    if (value === lastSyncedValueRef.current) {
+      return;
+    }
+
+    // 外部 value 真正变化，更新编辑器
+    const currentValue = editor.getValue();
+    if (currentValue !== value) {
+      editor.setValue(value || '');
+      lastSyncedValueRef.current = value || '';
+    }
+  }, [editor, value]);
+
+  // 清理：组件卸载时销毁编辑器
+  useEffect(() => {
+    return () => {
+      if (editor) {
+        // CodeMirror EditorView 有 destroy 方法
+        const view = editor as unknown as EditorView;
+        if (view.destroy) {
+          view.destroy();
+        }
+      }
+    };
+  }, [editor]);
+
+  return (
+    <div className="content-wrap">
+      <div
+        className="md-editor position-relative w-100 h-100"
+        ref={editorRef}
+      />
+    </div>
+  );
+};
+
+export default MarkdownEditor;

ui/src/components/Editor/MarkdownEditor.tsx

@@ -21,9 +21,8 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import ToolItem from '../toolItem';
-import { IEditorContext } from '../types';
+import { Editor } from '../types';
 
-let context: IEditorContext;
 const BlockQuote = () => {
   const { t } = useTranslation('translation', { keyPrefix: 'editor' });
 
@@ -33,21 +32,9 @@ const BlockQuote = () => {
     tip: `${t('blockquote.text')} (Ctrl+Q)`,
   };
 
-  const handleClick = (ctx) => {
-    context = ctx;
-    context.replaceLines((line) => {
-      const FIND_BLOCKQUOTE_RX = /^>\s+?/g;
-
-      if (line === `> ${t('blockquote.text')}`) {
-        line = '';
-      } else if (line.match(FIND_BLOCKQUOTE_RX)) {
-        line = line.replace(FIND_BLOCKQUOTE_RX, '');
-      } else {
-        line = `> ${line || t('blockquote.text')}`;
-      }
-      return line;
-    }, 2);
-    context.editor?.focus();
+  const handleClick = (editor: Editor) => {
+    editor.insertBlockquote(t('blockquote.text'));
+    editor.focus();
   };
 
   return <ToolItem {...item} onClick={handleClick} />;

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

@@ -21,9 +21,8 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import ToolItem from '../toolItem';
-import { IEditorContext } from '../types';
+import { Editor } from '../types';
 
-let context: IEditorContext;
 const Bold = () => {
   const { t } = useTranslation('translation', { keyPrefix: 'editor' });
   const item = {
@@ -33,10 +32,9 @@ const Bold = () => {
   };
   const DEFAULTTEXT = t('bold.text');
 
-  const handleClick = (ctx) => {
-    context = ctx;
-    context.wrapText('**', '**', DEFAULTTEXT);
-    context.editor?.focus();
+  const handleClick = (editor: Editor) => {
+    editor.insertBold(DEFAULTTEXT);
+    editor.focus();
   };
 
   return <ToolItem {...item} onClick={handleClick} />;

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

@@ -23,7 +23,7 @@ import { useTranslation } from 'react-i18next';
 
 import Select from '../Select';
 import ToolItem from '../toolItem';
-import { IEditorContext } from '../types';
+import { Editor } from '../types';
 
 const codeLanguageType = [
   'bash',
@@ -150,7 +150,6 @@ const codeLanguageType = [
   'yml',
 ];
 
-let context: IEditorContext;
 const Code = () => {
   const { t } = useTranslation('translation', { keyPrefix: 'editor' });
 
@@ -170,22 +169,20 @@ const Code = () => {
   const inputRef = useRef<HTMLTextAreaElement>(null);
 
   const SINGLELINEMAXLENGTH = 40;
-  const addCode = (ctx) => {
-    context = ctx;
+  const [currentEditor, setCurrentEditor] = useState<Editor | null>(null);
 
-    const { wrapText, editor } = context;
-
-    const text = context.editor.getSelection();
+  const addCode = (editor: Editor) => {
+    setCurrentEditor(editor);
+    const text = editor.getSelection();
 
     if (!text) {
       setVisible(true);
-
       return;
     }
     if (text.length > SINGLELINEMAXLENGTH) {
-      context.wrapText('```\n', '\n```');
+      editor.insertCodeBlock('', text);
     } else {
-      wrapText('`', '`');
+      editor.insertCode(text);
     }
     editor.focus();
   };
@@ -197,6 +194,10 @@ const Code = () => {
   }, [visible]);
 
   const handleClick = () => {
+    if (!currentEditor) {
+      return;
+    }
+
     if (!code.value.trim()) {
       setCode({
         ...code,
@@ -206,27 +207,26 @@ const Code = () => {
       return;
     }
 
-    let value;
-
     if (
       code.value.split('\n').length > 1 ||
       code.value.length >= SINGLELINEMAXLENGTH
     ) {
-      value = `\n\`\`\`${lang}\n${code.value}\n\`\`\`\n`;
+      currentEditor.insertCodeBlock(lang || undefined, code.value);
     } else {
-      value = `\`${code.value}\``;
+      currentEditor.insertCode(code.value);
     }
-    context.editor.replaceSelection(value);
+
     setCode({
       value: '',
       isInvalid: false,
       errorMsg: '',
     });
     setLang('');
     setVisible(false);
+    currentEditor.focus();
   };
   const onHide = () => setVisible(false);
-  const onExited = () => context.editor?.focus();
+  const onExited = () => currentEditor?.focus();
 
   return (
     <ToolItem {...item} onClick={addCode}>

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

@@ -17,31 +17,28 @@
  * under the License.
  */
 
-import { useState, memo, useRef } from 'react';
+import { memo, useRef, useContext } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { Modal as AnswerModal } from '@/components';
 import ToolItem from '../toolItem';
-import { IEditorContext, Editor } from '../types';
+import { EditorContext } from '../EditorContext';
 import { uploadImage } from '@/services';
 import { writeSettingStore } from '@/stores';
 
-let context: IEditorContext;
-const Image = ({ editorInstance }) => {
+const File = () => {
   const { t } = useTranslation('translation', { keyPrefix: 'editor' });
   const { max_attachment_size = 8, authorized_attachment_extensions = [] } =
     writeSettingStore((state) => state.write);
   const fileInputRef = useRef<HTMLInputElement>(null);
-  const [editor, setEditor] = useState<Editor>(editorInstance);
+  const editor = useContext(EditorContext);
 
   const item = {
     label: 'paperclip',
     tip: `${t('file.text')}`,
   };
 
-  const addLink = (ctx) => {
-    context = ctx;
-    setEditor(context.editor);
+  const addLink = () => {
     fileInputRef.current?.click?.();
   };
 
@@ -132,4 +129,4 @@ const Image = ({ editorInstance }) => {
   );
 };
 
-export default memo(Image);
+export default memo(File);

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

@@ -22,9 +22,8 @@ import { Dropdown } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
 
 import ToolItem from '../toolItem';
-import { IEditorContext } from '../types';
+import { Editor, Level } from '../types';
 
-let context: IEditorContext;
 const Heading = () => {
   const { t } = useTranslation('translation', { keyPrefix: 'editor' });
   const headerList = [
@@ -61,19 +60,18 @@ const Heading = () => {
   };
   const [isShow, setShowState] = useState(false);
   const [isLocked, setLockState] = useState(false);
+  const [currentEditor, setCurrentEditor] = useState<Editor | null>(null);
 
-  const handleClick = (level = 2, label = '大标题') => {
-    const { replaceLines } = context;
-
-    replaceLines((line) => {
-      line = line.trim().replace(/^#*/, '').trim();
-      line = `${'#'.repeat(level)} ${line || label}`;
-      return line;
-    }, level + 1);
+  const handleClick = (level: Level = 2, label = '大标题') => {
+    if (!currentEditor) {
+      return;
+    }
+    currentEditor.insertHeading(level, label);
+    currentEditor.focus();
     setShowState(false);
   };
-  const onAddHeader = (ctx) => {
-    context = ctx;
+  const onAddHeader = (editor: Editor) => {
+    setCurrentEditor(editor);
     if (isLocked) {
       return;
     }
@@ -104,7 +102,7 @@ const Heading = () => {
               onClick={(e) => {
                 e.preventDefault();
                 e.stopPropagation();
-                handleClick(header.level, header.label);
+                handleClick(header.level as Level, header.label);
               }}
               dangerouslySetInnerHTML={{ __html: header.text }}
             />