From 29a87a807831559719449370a16d41708d3f3751 Mon Sep 17 00:00:00 2001
From: Takagi <1103069291@qq.com>
Date: Thu, 18 Jan 2024 16:40:08 +0800
Subject: [PATCH] pref: add additional attributes and colgroup for tables
 (#5176)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

/kind improvmenet
/area editor
/milestone 2.12.x

为默认编辑器 table 组件渲染后的结果中增加 `colgroup`，并为 table 增加 `width` 与 `minWidth` 属性。
用于解决渲染完成之后的 table html 宽度与编辑时不一致的问题。

拖拽修改默认编辑器表格列宽，查看生成后的 html 列宽是否同样发生了变化，并且查看生成的 html 结构下是否具有 `colgroup` html 元素。

Fixes #5138

```release-note
为默认富文本编辑器 table 组件渲染后的 html 增加 colgroup 元素与 width 属性
```

feat: add search and replace

feat: add search and replace

feat: add search and replace

feat: add search and replace

feat: add search and replace

feat: add search and replace
---
 console/packages/editor/package.json          |   2 +-
 .../search-and-replace/SearchAndReplace.vue   |  39 ++---
 .../SearchAndReplacePlugin.ts                 | 154 ++++++++++--------
 .../extensions/search-and-replace/index.ts    |  78 ++++++---
 .../editor/src/extensions/table/index.ts      |  39 ++++-
 console/pnpm-lock.yaml                        |   8 +-
 .../src/components/editor/DefaultEditor.vue   |   2 +
 7 files changed, 207 insertions(+), 115 deletions(-)

diff --git a/console/packages/editor/package.json b/console/packages/editor/package.json
index 956402965dc..0245ad9127e 100644
--- a/console/packages/editor/package.json
+++ b/console/packages/editor/package.json
@@ -68,7 +68,7 @@
     "@tiptap/extension-strike": "^2.1.15",
     "@tiptap/extension-subscript": "^2.1.15",
     "@tiptap/extension-superscript": "^2.1.15",
-    "@tiptap/extension-table": "^2.1.15",
+    "@tiptap/extension-table": "2.2.0-rc.8",
     "@tiptap/extension-table-row": "^2.1.15",
     "@tiptap/extension-task-item": "^2.1.15",
     "@tiptap/extension-task-list": "^2.1.15",
diff --git a/console/packages/editor/src/extensions/search-and-replace/SearchAndReplace.vue b/console/packages/editor/src/extensions/search-and-replace/SearchAndReplace.vue
index 53aaaf8deb3..f6ff0cf8d98 100644
--- a/console/packages/editor/src/extensions/search-and-replace/SearchAndReplace.vue
+++ b/console/packages/editor/src/extensions/search-and-replace/SearchAndReplace.vue
@@ -50,12 +50,10 @@ const findState = computed(() => {
   };
 });
 
-// 查找下一个搜索结果
 const findNextSearchResult = () => {
   props.editor.commands.findNext();
 };
 
-// 查找上一个搜索结果
 const findPreviousSearchResult = () => {
   props.editor.commands.findPrevious();
 };
@@ -71,7 +69,6 @@ const updateSearchReplace = (value: any) => {
   flag.value = !flag.value;
 };
 
-// 替换当前搜索结果
 const replace = () => {
   props.editor.commands.replace();
   flag.value = !flag.value;
@@ -153,7 +150,7 @@ watch(
 <template>
   <Transition v-show="visible" appear name="slide">
     <div
-      class="absolute float-right top-0 right-5 z-50 flex justify-end bg-white shadow p-1 rounded min-w-[500px]"
+      class="absolute float-right top-0 right-5 z-50 flex justify-end bg-white shadow p-1 !pt-2 rounded min-w-[500px]"
       @keydown.escape.prevent="handleCloseSearch"
     >
       <section class="w-full flex flex-col gap-1">
@@ -163,7 +160,7 @@ watch(
               ref="searchInput"
               v-model="searchTerm"
               type="text"
-              class="block w-full p-1 ps-2 pr-24 bg-gray-50 rounded-sm text-sm border-gray-300 text-gray-900 focus:ring-blue-500 focus:border-blue-500"
+              class="block w-full p-1 ps-2 pr-24 bg-gray-50 rounded-sm border !border-solid !text-sm !leading-7 border-gray-300 text-gray-900 focus:ring-blue-500 focus:border-blue-500"
               :placeholder="
                 i18n.global.t(
                   'editor.extensions.search_and_replace.search_placeholder'
@@ -180,9 +177,9 @@ watch(
                   )
                 "
                 type="button"
-                class="p-1 rounded-sm hover:bg-gray-200"
+                class="p-0.5 rounded-sm hover:bg-gray-200"
                 :class="{
-                  'bg-blue-200 outline outline-1 outline-blue-500 hover:bg-blue-200':
+                  '!bg-blue-200 outline outline-1 outline-blue-500 hover:!bg-blue-200':
                     caseSensitive,
                 }"
                 @click="caseSensitive = !caseSensitive"
@@ -196,9 +193,9 @@ watch(
                   )
                 "
                 type="button"
-                class="p-1 rounded-sm hover:bg-gray-200"
+                class="p-0.5 rounded-sm hover:bg-gray-200"
                 :class="{
-                  'bg-blue-200 outline outline-1 outline-blue-500 hover:bg-blue-200':
+                  '!bg-blue-200 outline outline-1 outline-blue-500 hover:!bg-blue-200':
                     matchWord,
                 }"
                 @click="matchWord = !matchWord"
@@ -212,9 +209,9 @@ watch(
                   )
                 "
                 type="button"
-                class="p-1 rounded-sm hover:bg-gray-200"
+                class="p-0.5 rounded-sm hover:bg-gray-200"
                 :class="{
-                  'bg-blue-200 outline outline-1 outline-blue-500 hover:bg-blue-200':
+                  '!bg-blue-200 outline outline-1 outline-blue-500 hover:!bg-blue-200':
                     regex,
                 }"
                 @click="regex = !regex"
@@ -251,9 +248,9 @@ watch(
                 )
               "
               type="button"
-              class="p-1 rounded-sm opacity-50"
+              class="p-0.5 rounded-sm opacity-50"
               :class="{
-                'hover:bg-gray-200 opacity-100': findState.findCount > 0,
+                'hover:!bg-gray-200 !opacity-100': findState.findCount > 0,
               }"
               :disabled="findState.findCount === 0"
               @click="findPreviousSearchResult"
@@ -265,9 +262,9 @@ watch(
                 i18n.global.t('editor.extensions.search_and_replace.find_next')
               "
               type="button"
-              class="p-1 rounded-sm opacity-50"
+              class="p-0.5 rounded-sm opacity-50"
               :class="{
-                'hover:bg-gray-200 opacity-100': findState.findCount > 0,
+                'hover:!bg-gray-200 !opacity-100': findState.findCount > 0,
               }"
               :disabled="findState.findCount === 0"
               @click="findNextSearchResult"
@@ -279,7 +276,7 @@ watch(
                 i18n.global.t('editor.extensions.search_and_replace.close')
               "
               type="button"
-              class="p-1 rounded-sm hover:bg-gray-200"
+              class="p-0.5 rounded-sm hover:bg-gray-200"
               @click="handleCloseSearch"
             >
               <MdiClose></MdiClose>
@@ -292,7 +289,7 @@ watch(
             <input
               v-model="replaceTerm"
               type="text"
-              class="block w-full p-1 ps-2 rounded-sm bg-gray-50 border text-sm border-gray-300 text-gray-900 focus:ring-blue-500 focus:border-blue-500"
+              class="block w-full p-1 ps-2 rounded-sm bg-gray-50 border !border-solid !text-sm !leading-7 border-gray-300 text-gray-900 focus:ring-blue-500 focus:border-blue-500"
               :placeholder="
                 i18n.global.t(
                   'editor.extensions.search_and_replace.replace_placeholder'
@@ -308,9 +305,9 @@ watch(
                 i18n.global.t('editor.extensions.search_and_replace.replace')
               "
               type="button"
-              class="p-1 rounded-sm opacity-50"
+              class="p-0.5 rounded-sm opacity-50"
               :class="{
-                'hover:bg-gray-200 opacity-100': findState.findCount > 0,
+                'hover:!bg-gray-200 !opacity-100': findState.findCount > 0,
               }"
               :disabled="findState.findCount === 0"
               @click="replace"
@@ -324,9 +321,9 @@ watch(
                 )
               "
               type="button"
-              class="p-1 rounded-sm opacity-50"
+              class="p-0.5 rounded-sm opacity-50"
               :class="{
-                'hover:bg-gray-200 opacity-100': findState.findCount > 0,
+                'hover:!bg-gray-200 !opacity-100': findState.findCount > 0,
               }"
               :disabled="findState.findCount === 0"
               @click="replaceAll"
diff --git a/console/packages/editor/src/extensions/search-and-replace/SearchAndReplacePlugin.ts b/console/packages/editor/src/extensions/search-and-replace/SearchAndReplacePlugin.ts
index 1550235b001..f8563a8eaf3 100644
--- a/console/packages/editor/src/extensions/search-and-replace/SearchAndReplacePlugin.ts
+++ b/console/packages/editor/src/extensions/search-and-replace/SearchAndReplacePlugin.ts
@@ -63,8 +63,8 @@ export interface SearchResultWithPosition {
 export class SearchAndReplacePluginState {
   private _findIndex: number;
   public editor: Editor;
-  // 是否需要根据光标位置重新设置 findIndex
-  // 只有当重新设置 searchTerm 时，才会重新设置 findIndex。
+  public enable: boolean;
+  // Whether it is necessary to reset the findIndex based on the cursor position.
   public findIndexFlag: boolean;
   public findCount: number;
   public searchTerm: string;
@@ -78,16 +78,19 @@ export class SearchAndReplacePluginState {
 
   constructor({
     editor,
+    enable,
     regex,
     caseSensitive,
     wholeWord,
   }: {
     editor: Editor;
+    enable?: boolean;
     regex?: boolean;
     caseSensitive?: boolean;
     wholeWord?: boolean;
   }) {
     this.editor = editor;
+    this.enable = enable || false;
     this.searchTerm = "";
     this.replaceTerm = "";
     this.regex = regex || false;
@@ -106,40 +109,25 @@ export class SearchAndReplacePluginState {
   }
 
   set findIndex(newValue) {
-    const { results, editor } = this;
-    // 校验 findIndex 是否在区间范围内
-    // 如果 results.length === 0，则取 0
-    // 如果小于等于 -1，则取 results.length - 1
-    // 如果大于 results.length - 1，则取 0
-    if (results.length === 0) {
-      this._findIndex = 0;
-    } else if (newValue <= -1) {
-      this._findIndex = results.length - 1;
-    } else if (newValue > results.length - 1) {
-      this._findIndex = 0;
-    } else {
-      this._findIndex = newValue;
-    }
-
-    // findIndex 发生变化时，需要执行页面滚动
-    if (results.length > this._findIndex && this._findIndex >= 0) {
-      const result = results[this._findIndex];
-      if (result) {
-        const { pos } = result;
-        const { view } = editor;
-        const dom = view.nodeDOM(pos - 1) as HTMLElement;
-        // TODO: dom 可能为字符串，需要处理
-        scrollIntoView(dom, {
-          behavior: "smooth",
-          scrollMode: "if-needed",
-        });
-      }
-    }
+    this._findIndex = this.verifySetIndex(newValue);
   }
 
   apply(tr: Transaction): SearchAndReplacePluginState {
     const action = tr.getMeta(searchAndReplacePluginKey);
 
+    if (action && "setEnable" in action) {
+      if (action.setEnable && !this.enable) {
+        action.setSearchTerm = this.searchTerm;
+      }
+      this.enable = action.setEnable;
+    }
+
+    if (!this.enable) {
+      return this;
+    }
+
+    // The refresh method needs to be called before setFindIndex
+    // Because setFindIndex depends on the refreshed results
     if (action && action.refresh) {
       this.processSearches(tr);
     }
@@ -154,60 +142,96 @@ export class SearchAndReplacePluginState {
       this.processFindIndexDecoration();
     }
 
-    if (action && "setResult" in action) {
-      this.results = action.setResult || [];
-      this.processResultDecorations();
-      if (this.findIndexFlag) {
-        this.getNearestResultBySelection(tr.selection);
-        this.findIndexFlag = false;
-      }
-      this.processFindIndexDecoration();
+    if (action && "setScrollView") {
+      this.scrollIntoFindIndexView();
     }
 
     if (action && "setRegex" in action) {
       if (this.regex !== action.setRegex) {
         this.regex = action.setRegex;
-        this.findIndexFlag = true;
-        return this.processSearches(tr);
+        action.setSearchTerm = this.searchTerm;
       }
     }
 
     if (action && "setWholeWord" in action) {
       if (this.wholeWord !== action.setWholeWord) {
         this.wholeWord = action.setWholeWord;
-        this.findIndexFlag = true;
-        return this.processSearches(tr);
+        action.setSearchTerm = this.searchTerm;
       }
     }
 
     if (action && "setCaseSensitive" in action) {
       if (this.caseSensitive !== action.setCaseSensitive) {
         this.caseSensitive = action.setCaseSensitive;
-        this.findIndexFlag = true;
-        return this.processSearches(tr);
+        action.setSearchTerm = this.searchTerm;
       }
     }
 
-    // 如果修改替换了 searchTerm，则重新在全文中进行检索。
     if (action && "setSearchTerm" in action) {
       this.searchTerm = action.setSearchTerm;
       this.findIndexFlag = true;
-      // 重新检索数据
-      return this.processSearches(tr);
+      // If the searchTerm is modified or replaced, perform a new
+      // search throughout the entire document.
+      this.processSearches(tr);
+      this.scrollIntoFindIndexView();
+      return this;
     }
 
     if (tr.docChanged) {
       return this.processSearches(tr);
     } else if (tr.getMeta("pointer")) {
       this.getNearestResultBySelection(tr.selection);
-      this.findIndex = this.findIndex - 1;
+      this.processFindIndexDecoration();
     }
 
     return this;
   }
 
+  scrollIntoFindIndexView() {
+    const { results, editor, _findIndex } = this;
+    if (results.length > _findIndex && _findIndex >= 0) {
+      const result = results[_findIndex];
+      if (result) {
+        const { pos } = result;
+        const { view } = editor;
+        let node = view.nodeDOM(pos - 1);
+        if (!(node instanceof HTMLElement)) {
+          node = view.domAtPos(pos, 0).node;
+        }
+        if (node instanceof HTMLElement) {
+          scrollIntoView(node, {
+            behavior: "smooth",
+            scrollMode: "if-needed",
+          });
+        }
+      }
+    }
+  }
+
   /**
-   * 执行全文检索功能
+   * Validate if findIndex is within the range
+   * If results.length === 0, take 0
+   * If less than or equal to -1, take results.length - 1
+   * If greater than results.length - 1, take 0
+   *
+   * @param index new findIndex
+   * @returns validated findIndex
+   */
+  verifySetIndex(index: number) {
+    const { results } = this;
+    if (results.length === 0) {
+      return 0;
+    } else if (index <= -1) {
+      return results.length - 1;
+    } else if (index > results.length - 1) {
+      return 0;
+    } else {
+      return index;
+    }
+  }
+
+  /**
+   * Execute full-text search functionality.
    *
    * @param Transaction
    * @returns
@@ -242,8 +266,8 @@ export class SearchAndReplacePluginState {
           this.results.push({
             pos: pos,
             index: index,
-            from: pos + index + m.index,
-            to: pos + index + m.index + m[0].length,
+            from: pos + m.index,
+            to: pos + m.index + m[0].length,
           });
         }
       }
@@ -259,7 +283,7 @@ export class SearchAndReplacePluginState {
   }
 
   /**
-   * 根据 findIndex 高亮当前结果
+   * Highlight the current result based on findIndex.
    *
    * @memberof SearchAndReplacePluginState
    */
@@ -274,7 +298,7 @@ export class SearchAndReplacePluginState {
   }
 
   /**
-   * 根据 results 生成高亮结果
+   * Generate highlighted results based on the 'results'.
    *
    * @memberof SearchAndReplacePluginState
    */
@@ -293,17 +317,14 @@ export class SearchAndReplacePluginState {
   }
 
   /**
-   * 根据当前光标位置，重新设置 findIndex.
+   * Reset findIndex based on the current cursor position.
    *
-   * @param selection 当前光标位置
+   * @param selection Current cursor position.
    */
   getNearestResultBySelection(selection: Selection) {
     const { results } = this;
     for (let i = 0; i < results.length; i += 1) {
       const result = results[i];
-      // 根据光标位置，重新设置 findIndex.
-      // 当重新设置 searchTerm 时
-      // 当文本未发生变化，但光标位置发生变化时
       if (selection && selection.to <= result.from) {
         this.findIndex = i;
         break;
@@ -312,10 +333,10 @@ export class SearchAndReplacePluginState {
   }
 
   /**
-   * 将全文文本转换为扁平化的带有位置的文本
+   * Convert the entire text into flattened text with positions.
    *
-   * @param doc 文档
-   * @returns 带有位置的全文文本
+   * @param doc The entire document
+   * @returns Flattened text with positions
    */
   getFullText(doc: PMNode): TextNodesWithPosition[] {
     const textNodesWithPosition: TextNodesWithPosition[] = [];
@@ -332,9 +353,9 @@ export class SearchAndReplacePluginState {
   }
 
   /**
-   * 构造查找文本的正则表达式
+   * Get the regular expression object based on the current search term.
    *
-   * @returns 正则表达式
+   * @returns Regular expression object
    */
   getRegex = (): RegExp => {
     const { searchTerm, regex, caseSensitive, wholeWord } = this;
@@ -366,8 +387,11 @@ export const SearchAndReplacePlugin = (
       decorations: (state) => {
         const searchAndReplaceState = searchAndReplacePluginKey.getState(state);
         if (searchAndReplaceState) {
-          const { searchResultDecorations, findIndexDecoration } =
+          const { searchResultDecorations, findIndexDecoration, enable } =
             searchAndReplaceState;
+          if (!enable) {
+            return DecorationSet.empty;
+          }
           const decorations = [...searchResultDecorations];
           if (findIndexDecoration) {
             decorations.push(findIndexDecoration);
diff --git a/console/packages/editor/src/extensions/search-and-replace/index.ts b/console/packages/editor/src/extensions/search-and-replace/index.ts
index 35de54e0df3..af26ff2da71 100644
--- a/console/packages/editor/src/extensions/search-and-replace/index.ts
+++ b/console/packages/editor/src/extensions/search-and-replace/index.ts
@@ -138,15 +138,16 @@ const SearchAndReplace = Extension.create<ExtensionOptions>({
           }
           const { replaceTerm, results } = searchAndReplaceState;
           const tr = state.tr;
+          let offset = 0;
           results.forEach((result) => {
             const { from, to } = result;
-            tr.insertText(replaceTerm, from, to);
+            tr.insertText(replaceTerm, offset + from, offset + to);
+            // when performing multi-text replacement, it is necessary
+            // to calculate the offset between 'form' and 'to'.
+            offset = offset + replaceTerm.length - (to - from);
           });
 
           if (dispatch) {
-            tr.setMeta(searchAndReplacePluginKey, {
-              refresh: true,
-            });
             dispatch(tr);
           }
           return false;
@@ -203,22 +204,61 @@ const SearchAndReplace = Extension.create<ExtensionOptions>({
           return false;
         },
 
-      openSearch: () => () => {
-        const searchAndReplaceInstance = instance.component;
-        if (searchAndReplaceInstance) {
-          searchAndReplaceInstance.props.visible = true;
-        }
-        return false;
-      },
+      openSearch:
+        () =>
+        ({
+          state,
+          dispatch,
+        }: {
+          state: EditorState;
+          dispatch: ((args?: any) => any) | undefined;
+        }) => {
+          const searchAndReplaceState =
+            searchAndReplacePluginKey.getState(state);
+          if (!searchAndReplaceState) {
+            return false;
+          }
+          const searchAndReplaceInstance = instance.component;
+          if (searchAndReplaceInstance) {
+            searchAndReplaceInstance.props.visible = true;
+            const tr = state.tr;
+            tr.setMeta(searchAndReplacePluginKey, {
+              setEnable: true,
+            });
+            if (dispatch) {
+              dispatch(tr);
+            }
+          }
+          return false;
+        },
 
-      closeSearch: () => () => {
-        const searchAndReplaceInstance = instance.component;
-        if (searchAndReplaceInstance) {
-          searchAndReplaceInstance.props.visible = false;
-        }
-        this.editor.chain().focus().run();
-        return false;
-      },
+      closeSearch:
+        () =>
+        ({
+          state,
+          dispatch,
+        }: {
+          state: EditorState;
+          dispatch: ((args?: any) => any) | undefined;
+        }) => {
+          const searchAndReplaceState =
+            searchAndReplacePluginKey.getState(state);
+          if (!searchAndReplaceState) {
+            return false;
+          }
+          const searchAndReplaceInstance = instance.component;
+          if (searchAndReplaceInstance) {
+            searchAndReplaceInstance.props.visible = false;
+            const tr = state.tr;
+            tr.setMeta(searchAndReplacePluginKey, {
+              setEnable: false,
+            });
+            if (dispatch) {
+              dispatch(tr);
+            }
+          }
+          return false;
+        },
     };
   },
 
diff --git a/console/packages/editor/src/extensions/table/index.ts b/console/packages/editor/src/extensions/table/index.ts
index 3ad90ea66dd..4586257b546 100644
--- a/console/packages/editor/src/extensions/table/index.ts
+++ b/console/packages/editor/src/extensions/table/index.ts
@@ -1,14 +1,19 @@
-import TiptapTable, { type TableOptions } from "@tiptap/extension-table";
+import TiptapTable, {
+  type TableOptions,
+  createColGroup,
+} from "@tiptap/extension-table";
 import {
   isActive,
   type Editor,
   type Range,
+  mergeAttributes,
   isNodeActive,
 } from "@/tiptap/vue-3";
-import type {
-  Node as ProseMirrorNode,
-  NodeView,
-  EditorState,
+import {
+  type Node as ProseMirrorNode,
+  type NodeView,
+  type EditorState,
+  type DOMOutputSpec,
 } from "@/tiptap/pm";
 import TableCell from "./table-cell";
 import TableRow from "./table-row";
@@ -419,6 +424,30 @@ const Table = TiptapTable.extend<ExtensionOptions & TableOptions>({
       "Mod-Backspace": () => handleBackspace(),
     };
   },
+
+  renderHTML({ node, HTMLAttributes }) {
+    const { colgroup, tableWidth, tableMinWidth } = createColGroup(
+      node,
+      this.options.cellMinWidth
+    );
+
+    const table: DOMOutputSpec = [
+      "div",
+      { style: "overflow-x: auto; overflow-y: hidden;" },
+      [
+        "table",
+        mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
+          style: tableWidth
+            ? `width: ${tableWidth}`
+            : `minWidth: ${tableMinWidth}`,
+        }),
+        colgroup,
+        ["tbody", 0],
+      ],
+    ];
+
+    return table;
+  },
 }).configure({ resizable: true });
 
 export default Table;
diff --git a/console/pnpm-lock.yaml b/console/pnpm-lock.yaml
index 9881ade70da..11df834c164 100644
--- a/console/pnpm-lock.yaml
+++ b/console/pnpm-lock.yaml
@@ -524,8 +524,8 @@ importers:
         specifier: ^2.1.15
         version: 2.1.15(@tiptap/core@2.1.15)
       '@tiptap/extension-table':
-        specifier: ^2.1.15
-        version: 2.1.15(@tiptap/core@2.1.15)(@tiptap/pm@2.1.15)
+        specifier: 2.2.0-rc.8
+        version: 2.2.0-rc.8(@tiptap/core@2.1.15)(@tiptap/pm@2.1.15)
       '@tiptap/extension-table-row':
         specifier: ^2.1.15
         version: 2.1.15(@tiptap/core@2.1.15)
@@ -6039,8 +6039,8 @@ packages:
       '@tiptap/core': 2.1.15(@tiptap/pm@2.1.15)
     dev: false
 
-  /@tiptap/extension-table@2.1.15(@tiptap/core@2.1.15)(@tiptap/pm@2.1.15):
-    resolution: {integrity: sha512-7mEytHrY7eLaJHyHNwC5l7IXHMTBF2HydCX/sF5Z3oNh63bCGWo/5NjvW6fjJd9B6KQ5yH5ec+gO7uPaf/555w==}
+  /@tiptap/extension-table@2.2.0-rc.8(@tiptap/core@2.1.15)(@tiptap/pm@2.1.15):
+    resolution: {integrity: sha512-o/w+vVG0DIXU6Aal5OXJC/GHwkfazJZ8egBV1dHKyXV2hV4FAmAYpcGQyCpixtZxMTMVq3Ck1kFrbU9v5CqUQQ==}
     peerDependencies:
       '@tiptap/core': ^2.0.0
       '@tiptap/pm': ^2.0.0
diff --git a/console/src/components/editor/DefaultEditor.vue b/console/src/components/editor/DefaultEditor.vue
index f300f29d5b1..eefbd66c487 100644
--- a/console/src/components/editor/DefaultEditor.vue
+++ b/console/src/components/editor/DefaultEditor.vue
@@ -49,6 +49,7 @@ import {
   PluginKey,
   DecorationSet,
   ExtensionListKeymap,
+  ExtensionSearchAndReplace,
 } from "@halo-dev/richtext-editor";
 import {
   IconCalendar,
@@ -320,6 +321,7 @@ onMounted(() => {
         },
       }),
       ExtensionListKeymap,
+      ExtensionSearchAndReplace,
     ],
     autofocus: "start",
     onUpdate: () => {