feat: provide find and replace functionality for the default rich tex…

…t editor (#5206)

#### What type of PR is this?

/kind feature

#### What this PR does / why we need it:

为默认富文本编辑器添加查找与搜索的功能扩展。

快捷键：

当焦点处于编辑器中时，可以使用 `Mod+f` 来唤起查找与搜索框，或者点击顶部工具栏来打开。
当焦点处于查找与搜索框时，按下 `Ecs` 可进行关闭。

<img width="1920" alt="image" src="https://github.com/halo-dev/halo/assets/31335418/03a54bb8-2cc4-4cb0-9a18-fd0e9aede564">

#### How to test it?

测试查找与搜索功能是否正常

#### Which issue(s) this PR fixes:

Fixes #5195 

#### Does this PR introduce a user-facing change?
```release-note
为默认富文本编辑器添加查找与搜索的功能扩展。
```

console/packages/editor/src/components/EditorHeader.vue

@@ -63,7 +63,7 @@ function getToolboxItemsFromExtensions() {
   >
     <div class="inline-flex items-center justify-center">
       <VMenu>
-        <button class="p-1 rounded-sm hover:bg-gray-100">
+        <button class="p-1 rounded-sm hover:bg-gray-100" tabindex="-1">
           <MdiPlusCircle class="text-[#4CCBA0]" />
         </button>
         <template #popper>
@@ -75,6 +75,7 @@ function getToolboxItemsFromExtensions() {
               v-for="(toolboxItem, index) in getToolboxItemsFromExtensions()"
               v-bind="toolboxItem.props"
               :key="index"
+              tabindex="-1"
             />
           </div>
         </template>
@@ -90,9 +91,10 @@ function getToolboxItemsFromExtensions() {
         :is="item.component"
         v-if="!item.children?.length"
         v-bind="item.props"
+        tabindex="-1"
       />
-      <VMenu v-else class="inline-flex">
-        <component :is="item.component" v-bind="item.props" />
+      <VMenu v-else class="inline-flex" tabindex="-1">
+        <component :is="item.component" v-bind="item.props" tabindex="-1" />
         <template #popper>
           <div
             class="relative rounded-md bg-white overflow-hidden drop-shadow w-48 p-1 max-h-72 overflow-y-auto"
@@ -102,6 +104,7 @@ function getToolboxItemsFromExtensions() {
               :is="child.component"
               v-for="(child, childIndex) in item.children"
               :key="childIndex"
+              tabindex="-1"
             />
           </div>
         </template>

console/packages/editor/src/components/toolbar/ToolbarItem.vue

@@ -30,6 +30,7 @@ withDefaults(
     ]"
     class="p-1 rounded-sm"
     :disabled="disabled"
+    tabindex="-1"
     @click="action"
   >
     <component :is="icon" />

console/packages/editor/src/dev/App.vue

@@ -44,6 +44,7 @@ import {
   ExtensionNodeSelected,
   ExtensionTrailingNode,
   ExtensionListKeymap,
+  ExtensionSearchAndReplace,
 } from "../index";
 
 const content = useLocalStorage("content", "");
@@ -109,6 +110,7 @@ const editor = useEditor({
     ExtensionNodeSelected,
     ExtensionTrailingNode,
     ExtensionListKeymap,
+    ExtensionSearchAndReplace,
   ],
   onUpdate: () => {
     content.value = editor.value?.getHTML() + "";

console/packages/editor/src/extensions/index.ts

@@ -42,6 +42,7 @@ import ExtensionText from "./text";
 import ExtensionDraggable from "./draggable";
 import ExtensionNodeSelected from "./node-selected";
 import ExtensionTrailingNode from "./trailing-node";
+import ExtensionSearchAndReplace from "./search-and-replace";
 
 const allExtensions = [
   ExtensionBlockquote,
@@ -98,6 +99,7 @@ const allExtensions = [
   ExtensionColumn,
   ExtensionNodeSelected,
   ExtensionTrailingNode,
+  ExtensionSearchAndReplace,
 ];
 
 export {
@@ -144,4 +146,5 @@ export {
   ExtensionNodeSelected,
   ExtensionTrailingNode,
   ExtensionListKeymap,
+  ExtensionSearchAndReplace,
 };