fix: resolve editor styling issues in Safari browser (#7328)

#### 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 -->
pull/7331/head
Ryan Wang 2025-04-08 09:49:52 +08:00 committed by GitHub
parent fb7a09738a
commit 629a0f893e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 8 additions and 8 deletions

View File

@ -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

View File

@ -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"

View File

@ -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>

View File

@ -114,7 +114,7 @@ defineExpose({
rounded-md
bg-white
overflow-hidden
drop-shadow
shadow
w-52
p-1
max-h-72

View File

@ -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"

View File

@ -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 {