tiptap: update bubble menu max-width

This commit is contained in:
fantasticit 2022-04-26 08:40:04 +08:00
parent 4b31a98f90
commit 4fac550c5c
6 changed files with 6 additions and 7 deletions

View File

@ -22,7 +22,7 @@ export const CountdownBubbleMenu = ({ editor }) => {
editor={editor} editor={editor}
pluginKey="countdonw-bubble-menu" pluginKey="countdonw-bubble-menu"
shouldShow={() => editor.isActive(Countdown.name)} shouldShow={() => editor.isActive(Countdown.name)}
tippyOptions={{ maxWidth: 456 }} tippyOptions={{ maxWidth: 'calc(100vw - 100px)' }}
> >
<Space> <Space>
<Tooltip content="编辑"> <Tooltip content="编辑">

View File

@ -40,7 +40,7 @@ export const DocumentReferenceBubbleMenu = ({ editor }) => {
editor={editor} editor={editor}
pluginKey="countdonw-bubble-menu" pluginKey="countdonw-bubble-menu"
shouldShow={() => editor.isActive(DocumentReference.name)} shouldShow={() => editor.isActive(DocumentReference.name)}
tippyOptions={{ maxWidth: 456 }} tippyOptions={{ maxWidth: 'calc(100vw - 100px)' }}
> >
<Space> <Space>
<Popover <Popover

View File

@ -65,7 +65,7 @@ export const IframeBubbleMenu = ({ editor }) => {
editor={editor} editor={editor}
pluginKey="link-bubble-menu" pluginKey="link-bubble-menu"
shouldShow={() => editor.isActive(Iframe.name)} shouldShow={() => editor.isActive(Iframe.name)}
tippyOptions={{ maxWidth: 456 }} tippyOptions={{ maxWidth: 'calc(100vw - 100px)' }}
> >
<Modal <Modal
title="编辑链接" title="编辑链接"

View File

@ -25,7 +25,7 @@ export const ImageBubbleMenu = ({ editor }) => {
pluginKey="image-bubble-menu" pluginKey="image-bubble-menu"
shouldShow={() => editor.isActive(Image.name) && !!editor.getAttributes(Image.name).src} shouldShow={() => editor.isActive(Image.name) && !!editor.getAttributes(Image.name).src}
tippyOptions={{ tippyOptions={{
maxWidth: 456, maxWidth: 'calc(100vw - 100px)',
}} }}
matchRenderContainer={(node) => node && node.id === 'js-resizeable-container'} matchRenderContainer={(node) => node && node.id === 'js-resizeable-container'}
> >

View File

@ -59,7 +59,7 @@ export const LinkBubbleMenu = ({ editor }) => {
editor={editor} editor={editor}
pluginKey="link-bubble-menu" pluginKey="link-bubble-menu"
shouldShow={() => editor.isActive(Link.name)} shouldShow={() => editor.isActive(Link.name)}
tippyOptions={{ maxWidth: 456 }} tippyOptions={{ maxWidth: 'calc(100vw - 100px)' }}
> >
<Space> <Space>
<Tooltip content="访问链接"> <Tooltip content="访问链接">

View File

@ -26,8 +26,7 @@ export const TableBubbleMenu = ({ editor }) => {
pluginKey="table-bubble-menu" pluginKey="table-bubble-menu"
shouldShow={() => editor.isActive(Table.name)} shouldShow={() => editor.isActive(Table.name)}
tippyOptions={{ tippyOptions={{
maxWidth: 486, maxWidth: 'calc(100vw - 100px)',
placement: 'bottom',
}} }}
matchRenderContainer={(node: HTMLElement) => node && node.tagName === 'TABLE'} matchRenderContainer={(node: HTMLElement) => node && node.tagName === 'TABLE'}
> >