From 629a0f893e798d3b7997a15b9514fe8b0820b591 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Tue, 8 Apr 2025 09:49:52 +0800
Subject: [PATCH] fix: resolve editor styling issues in Safari browser (#7328)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### What type of PR is this?

/kind bug
/area editor
/area ui
/milestone 2.20.x

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

Replace `drop-shadow-*` with `shadow-*` to resolve editor styling issues in Safari brower.

before:

<img width="399" alt="image" src="https://github.com/user-attachments/assets/c9305e09-9f1b-4879-b532-a09b931ca178" />
<img width="270" alt="image" src="https://github.com/user-attachments/assets/d77cf742-c374-4b2d-b5a9-86f454103039" />

after:

<img width="411" alt="image" src="https://github.com/user-attachments/assets/47ab2cce-b511-4ece-ac21-c8668ef89e75" />
<img width="250" alt="image" src="https://github.com/user-attachments/assets/70008a8f-2f36-44e7-a40a-a260476342f0" />


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

None

#### Special notes for your reviewer:

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

```release-note
修复编辑器在 Safari 浏览器中关于浮动工具栏和命令列表的样式问题。
```

<!-- Fuuuuuuuuuuuuuuuuck Safari -->
---
 ui/packages/editor/src/components/EditorBubbleMenu.vue      | 2 +-
 ui/packages/editor/src/components/EditorHeader.vue          | 6 +++---
 ui/packages/editor/src/components/bubble/BubbleItem.vue     | 2 +-
 .../editor/src/extensions/commands-menu/CommandsView.vue    | 2 +-
 ui/packages/editor/src/extensions/link/LinkBubbleButton.vue | 2 +-
 ui/packages/editor/src/styles/base.scss                     | 2 +-
 6 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/ui/packages/editor/src/components/EditorBubbleMenu.vue b/ui/packages/editor/src/components/EditorBubbleMenu.vue
index 0be44f3ef..b51a6266b 100644
--- a/ui/packages/editor/src/components/EditorBubbleMenu.vue
+++ b/ui/packages/editor/src/components/EditorBubbleMenu.vue
@@ -71,7 +71,7 @@ const shouldShow = (
     :default-animation="bubbleMenu.defaultAnimation"
   >
     <div
-      class="bubble-menu bg-white flex items-center rounded-md p-1 border drop-shadow space-x-1"
+      class="bubble-menu bg-white flex items-center rounded-md p-1 border shadow space-x-1"
     >
       <template v-if="bubbleMenu.items">
         <template
diff --git a/ui/packages/editor/src/components/EditorHeader.vue b/ui/packages/editor/src/components/EditorHeader.vue
index ed85f0a14..12467b31e 100644
--- a/ui/packages/editor/src/components/EditorHeader.vue
+++ b/ui/packages/editor/src/components/EditorHeader.vue
@@ -59,7 +59,7 @@ function getToolboxItemsFromExtensions() {
 </script>
 <template>
   <div
-    class="editor-header py-1 space-x-1 px-1 overflow-auto border-b drop-shadow-sm bg-white text-center"
+    class="editor-header py-1 space-x-1 px-1 overflow-auto border-b shadow-sm bg-white text-center"
   >
     <div class="h-full inline-flex items-center">
       <VMenu>
@@ -68,7 +68,7 @@ function getToolboxItemsFromExtensions() {
         </button>
         <template #popper>
           <div
-            class="relative rounded-md bg-white overflow-hidden drop-shadow w-56 p-1 max-h-96 overflow-y-auto space-y-1.5"
+            class="relative rounded-md bg-white overflow-hidden shadow w-56 p-1 max-h-96 overflow-y-auto space-y-1.5"
           >
             <component
               :is="toolboxItem.component"
@@ -106,7 +106,7 @@ function getToolboxItemsFromExtensions() {
             />
             <template #popper>
               <div
-                class="relative rounded-md bg-white overflow-hidden drop-shadow w-56 p-1 max-h-96 overflow-y-auto space-y-1.5"
+                class="relative rounded-md bg-white overflow-hidden shadow w-56 p-1 max-h-96 overflow-y-auto space-y-1.5"
               >
                 <component
                   v-bind="child.props"
diff --git a/ui/packages/editor/src/components/bubble/BubbleItem.vue b/ui/packages/editor/src/components/bubble/BubbleItem.vue
index a4f3fb6f7..4bd355e2c 100644
--- a/ui/packages/editor/src/components/bubble/BubbleItem.vue
+++ b/ui/packages/editor/src/components/bubble/BubbleItem.vue
@@ -62,7 +62,7 @@ const handleBubbleItemClick = (editor: Editor) => {
     </button>
     <template #popper>
       <div
-        class="relative rounded-md bg-white overflow-hidden drop-shadow w-96 p-1 max-h-72 overflow-y-auto"
+        class="relative rounded-md bg-white overflow-hidden shadow w-96 p-1 max-h-72 overflow-y-auto"
       >
         <KeepAlive>
           <component :is="componentRef" v-bind="props"></component>
diff --git a/ui/packages/editor/src/extensions/commands-menu/CommandsView.vue b/ui/packages/editor/src/extensions/commands-menu/CommandsView.vue
index bc72c8f47..2b582ea5d 100644
--- a/ui/packages/editor/src/extensions/commands-menu/CommandsView.vue
+++ b/ui/packages/editor/src/extensions/commands-menu/CommandsView.vue
@@ -114,7 +114,7 @@ defineExpose({
   rounded-md
   bg-white
   overflow-hidden
-  drop-shadow
+  shadow
   w-52
   p-1
   max-h-72
diff --git a/ui/packages/editor/src/extensions/link/LinkBubbleButton.vue b/ui/packages/editor/src/extensions/link/LinkBubbleButton.vue
index 7461fa669..dfbec50d1 100644
--- a/ui/packages/editor/src/extensions/link/LinkBubbleButton.vue
+++ b/ui/packages/editor/src/extensions/link/LinkBubbleButton.vue
@@ -93,7 +93,7 @@ const handleLinkBubbleButton = () => {
 
     <template #popper>
       <div
-        class="relative rounded-md bg-white overflow-hidden drop-shadow w-96 p-1 max-h-72 overflow-y-auto"
+        class="relative rounded-md bg-white overflow-hidden shadow w-96 p-1 max-h-72 overflow-y-auto"
       >
         <input
           v-model.lazy="href"
diff --git a/ui/packages/editor/src/styles/base.scss b/ui/packages/editor/src/styles/base.scss
index a558a2905..54f4691c2 100644
--- a/ui/packages/editor/src/styles/base.scss
+++ b/ui/packages/editor/src/styles/base.scss
@@ -97,7 +97,7 @@
 
 .v-popper--theme-editor-block-dropdown {
   .v-popper__inner {
-    @apply bg-white drop-shadow-md rounded-md;
+    @apply bg-white shadow-md rounded-md;
   }
 
   .v-popper__arrow-container {