From a76e64dcdae13518f9658903914b99325a366ff7 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Fri, 4 Jul 2025 12:29:40 +0800
Subject: [PATCH] refactor: make toolbox button expandable on click in editor
 (#7598)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### What type of PR is this?

/area ui
/area editor
/milestone 2.21.x
/kind improvement

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

Change the editor's toolbox button to expand on click, rather than on hover, to maintain consistency with other toolbar buttons.

#### Does this PR introduce a user-facing change?

```release-note
将编辑器的工具箱按钮改为点击展开
```
---
 .../editor/src/components/EditorHeader.vue    | 33 ++++++++++++-------
 .../src/components/toolbar/ToolbarItem.vue    |  2 +-
 2 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/ui/packages/editor/src/components/EditorHeader.vue b/ui/packages/editor/src/components/EditorHeader.vue
index 362219423..4068e23ca 100644
--- a/ui/packages/editor/src/components/EditorHeader.vue
+++ b/ui/packages/editor/src/components/EditorHeader.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { Editor, type AnyExtension } from "@/tiptap/vue-3";
 import type { ToolbarItemType, ToolboxItemType } from "@/types";
-import { Dropdown as VDropdown, Menu as VMenu } from "floating-vue";
+import { Dropdown as VDropdown } from "floating-vue";
 import MdiPlusCircle from "~icons/mdi/plus-circle";
 
 const props = defineProps({
@@ -62,10 +62,16 @@ function getToolboxItemsFromExtensions() {
     class="editor-header space-x-1 overflow-auto border-b bg-white px-1 py-1 text-center shadow-sm"
   >
     <div class="inline-flex h-full items-center">
-      <VMenu>
-        <button class="rounded-md p-1.5 hover:bg-gray-100" tabindex="-1">
-          <MdiPlusCircle class="text-[#4CCBA0]" />
-        </button>
+      <VDropdown :triggers="['click']" :popper-triggers="['click']">
+        <template #default="{ shown }">
+          <button
+            class="rounded-md p-1.5 hover:bg-gray-100 active:bg-gray-200"
+            :class="{ 'bg-gray-200': shown }"
+            tabindex="-1"
+          >
+            <MdiPlusCircle class="text-[#4CCBA0]" />
+          </button>
+        </template>
         <template #popper>
           <div
             class="relative max-h-96 w-56 space-y-1.5 overflow-hidden overflow-y-auto rounded-md bg-white p-1 shadow"
@@ -79,7 +85,7 @@ function getToolboxItemsFromExtensions() {
             />
           </div>
         </template>
-      </VMenu>
+      </VDropdown>
       <div class="!mx-1 h-5 w-[1px] bg-gray-100"></div>
       <div
         v-for="(item, index) in getToolbarItemsFromExtensions()"
@@ -98,12 +104,15 @@ function getToolboxItemsFromExtensions() {
             :triggers="['click']"
             :popper-triggers="['click']"
           >
-            <component
-              :is="item.component"
-              v-bind="item.props"
-              :children="item.children"
-              tabindex="-1"
-            />
+            <template #default="{ shown }">
+              <component
+                :is="item.component"
+                v-bind="item.props"
+                :children="item.children"
+                tabindex="-1"
+                :class="{ 'bg-gray-200': shown }"
+              />
+            </template>
             <template #popper>
               <div
                 class="relative max-h-96 w-56 space-y-1.5 overflow-hidden overflow-y-auto rounded-md bg-white p-1 shadow"
diff --git a/ui/packages/editor/src/components/toolbar/ToolbarItem.vue b/ui/packages/editor/src/components/toolbar/ToolbarItem.vue
index 6118bc080..b0b3b2d00 100644
--- a/ui/packages/editor/src/components/toolbar/ToolbarItem.vue
+++ b/ui/packages/editor/src/components/toolbar/ToolbarItem.vue
@@ -32,7 +32,7 @@ withDefaults(
       { 'cursor-not-allowed opacity-70': disabled },
       { 'hover:bg-gray-100': !disabled },
     ]"
-    class="inline-flex items-center space-x-1 rounded-md p-1.5"
+    class="inline-flex items-center space-x-1 rounded-md p-1.5 active:bg-gray-200"
     :disabled="disabled"
     tabindex="-1"
     @click="action"