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

…t editor
halo-dev · Jan 22, 2024 · 683b8e3 · 683b8e3
1 parent 14580b9
commit 683b8e3
Show file tree

Hide file tree

Showing 12 changed files with 1,106 additions and 3 deletions.
diff --git a/console/packages/editor/src/components/EditorHeader.vue b/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>

diff --git a/console/packages/editor/src/components/toolbar/ToolbarItem.vue b/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" />

diff --git a/console/packages/editor/src/dev/App.vue b/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() + "";

diff --git a/console/packages/editor/src/extensions/index.ts b/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,
 };