From 4dbf671b32340d1b39ac90c591e34d4e31f4b06b Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Mon, 7 Apr 2025 23:10:32 +0800
Subject: [PATCH] fix: resolve editor styling issues in Safari browser

Signed-off-by: Ryan Wang <i@ryanc.cc>
---
 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 0be44f3efa..b51a6266b5 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 ed85f0a145..12467b31e5 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 a4f3fb6f7c..4bd355e2c1 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 bc72c8f479..2b582ea5de 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 7461fa669c..dfbec50d1b 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 a558a2905b..54f4691c2b 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 {