From 4fac550c5cc43ec4ea5d1c5bc2f2bb333d8df529 Mon Sep 17 00:00:00 2001
From: fantasticit <fantasticit@163.com>
Date: Tue, 26 Apr 2022 08:40:04 +0800
Subject: [PATCH] tiptap: update bubble menu max-width

---
 packages/client/src/tiptap/menus/countdown/bubble.tsx          | 2 +-
 packages/client/src/tiptap/menus/document-reference/bubble.tsx | 2 +-
 packages/client/src/tiptap/menus/iframe/bubble.tsx             | 2 +-
 packages/client/src/tiptap/menus/image/bubble.tsx              | 2 +-
 packages/client/src/tiptap/menus/link/bubble.tsx               | 2 +-
 packages/client/src/tiptap/menus/table/bubble.tsx              | 3 +--
 6 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/packages/client/src/tiptap/menus/countdown/bubble.tsx b/packages/client/src/tiptap/menus/countdown/bubble.tsx
index 0ef4297b..aba3cee6 100644
--- a/packages/client/src/tiptap/menus/countdown/bubble.tsx
+++ b/packages/client/src/tiptap/menus/countdown/bubble.tsx
@@ -22,7 +22,7 @@ export const CountdownBubbleMenu = ({ editor }) => {
       editor={editor}
       pluginKey="countdonw-bubble-menu"
       shouldShow={() => editor.isActive(Countdown.name)}
-      tippyOptions={{ maxWidth: 456 }}
+      tippyOptions={{ maxWidth: 'calc(100vw - 100px)' }}
     >
       <Space>
         <Tooltip content="编辑">
diff --git a/packages/client/src/tiptap/menus/document-reference/bubble.tsx b/packages/client/src/tiptap/menus/document-reference/bubble.tsx
index 9d0f5f9f..fee80b68 100644
--- a/packages/client/src/tiptap/menus/document-reference/bubble.tsx
+++ b/packages/client/src/tiptap/menus/document-reference/bubble.tsx
@@ -40,7 +40,7 @@ export const DocumentReferenceBubbleMenu = ({ editor }) => {
       editor={editor}
       pluginKey="countdonw-bubble-menu"
       shouldShow={() => editor.isActive(DocumentReference.name)}
-      tippyOptions={{ maxWidth: 456 }}
+      tippyOptions={{ maxWidth: 'calc(100vw - 100px)' }}
     >
       <Space>
         <Popover
diff --git a/packages/client/src/tiptap/menus/iframe/bubble.tsx b/packages/client/src/tiptap/menus/iframe/bubble.tsx
index 65c7afaa..1aaf5553 100644
--- a/packages/client/src/tiptap/menus/iframe/bubble.tsx
+++ b/packages/client/src/tiptap/menus/iframe/bubble.tsx
@@ -65,7 +65,7 @@ export const IframeBubbleMenu = ({ editor }) => {
       editor={editor}
       pluginKey="link-bubble-menu"
       shouldShow={() => editor.isActive(Iframe.name)}
-      tippyOptions={{ maxWidth: 456 }}
+      tippyOptions={{ maxWidth: 'calc(100vw - 100px)' }}
     >
       <Modal
         title="编辑链接"
diff --git a/packages/client/src/tiptap/menus/image/bubble.tsx b/packages/client/src/tiptap/menus/image/bubble.tsx
index d09c7f2f..053d3859 100644
--- a/packages/client/src/tiptap/menus/image/bubble.tsx
+++ b/packages/client/src/tiptap/menus/image/bubble.tsx
@@ -25,7 +25,7 @@ export const ImageBubbleMenu = ({ editor }) => {
       pluginKey="image-bubble-menu"
       shouldShow={() => editor.isActive(Image.name) && !!editor.getAttributes(Image.name).src}
       tippyOptions={{
-        maxWidth: 456,
+        maxWidth: 'calc(100vw - 100px)',
       }}
       matchRenderContainer={(node) => node && node.id === 'js-resizeable-container'}
     >
diff --git a/packages/client/src/tiptap/menus/link/bubble.tsx b/packages/client/src/tiptap/menus/link/bubble.tsx
index 014c680e..6d1367f7 100644
--- a/packages/client/src/tiptap/menus/link/bubble.tsx
+++ b/packages/client/src/tiptap/menus/link/bubble.tsx
@@ -59,7 +59,7 @@ export const LinkBubbleMenu = ({ editor }) => {
       editor={editor}
       pluginKey="link-bubble-menu"
       shouldShow={() => editor.isActive(Link.name)}
-      tippyOptions={{ maxWidth: 456 }}
+      tippyOptions={{ maxWidth: 'calc(100vw - 100px)' }}
     >
       <Space>
         <Tooltip content="访问链接">
diff --git a/packages/client/src/tiptap/menus/table/bubble.tsx b/packages/client/src/tiptap/menus/table/bubble.tsx
index 283aa52e..8e0602a4 100644
--- a/packages/client/src/tiptap/menus/table/bubble.tsx
+++ b/packages/client/src/tiptap/menus/table/bubble.tsx
@@ -26,8 +26,7 @@ export const TableBubbleMenu = ({ editor }) => {
       pluginKey="table-bubble-menu"
       shouldShow={() => editor.isActive(Table.name)}
       tippyOptions={{
-        maxWidth: 486,
-        placement: 'bottom',
+        maxWidth: 'calc(100vw - 100px)',
       }}
       matchRenderContainer={(node: HTMLElement) => node && node.tagName === 'TABLE'}
     >