diff --git a/packages/client/src/tiptap/core/menus/flow/bubble.tsx b/packages/client/src/tiptap/core/menus/flow/bubble.tsx index 35b2499f..98001d8e 100644 --- a/packages/client/src/tiptap/core/menus/flow/bubble.tsx +++ b/packages/client/src/tiptap/core/menus/flow/bubble.tsx @@ -1,24 +1,34 @@ -import { IconCopy, IconDelete, IconEdit } from '@douyinfe/semi-icons'; +import { IconCopy, IconDelete, IconEdit, IconLineHeight } from '@douyinfe/semi-icons'; import { Button, Space } from '@douyinfe/semi-ui'; import { Divider } from 'components/divider'; +import { SizeSetter } from 'components/size-setter'; import { Tooltip } from 'components/tooltip'; import { useUser } from 'data/user'; import { useCallback, useEffect } from 'react'; import { BubbleMenu } from 'tiptap/core/bubble-menu'; import { Flow, IFlowAttrs } from 'tiptap/core/extensions/flow'; import { useAttributes } from 'tiptap/core/hooks/use-attributes'; -import { copyNode, deleteNode } from 'tiptap/prose-utils'; +import { copyNode, deleteNode, getEditorContainerDOMSize } from 'tiptap/prose-utils'; import { triggerOpenFlowSettingModal } from '../_event'; export const FlowBubbleMenu = ({ editor }) => { + const { width: maxWidth } = getEditorContainerDOMSize(editor); const attrs = useAttributes(editor, Flow.name, { defaultShowPicker: false, createUser: '', + width: 0, + height: 0, }); - const { defaultShowPicker, createUser } = attrs; + const { defaultShowPicker, createUser, width, height } = attrs; const { user } = useUser(); + const setSize = useCallback( + (size) => { + editor.chain().updateAttributes(Flow.name, size).setNodeSelection(editor.state.selection.from).focus().run(); + }, + [editor] + ); const openEditLinkModal = useCallback(() => { triggerOpenFlowSettingModal(editor, attrs); }, [editor, attrs]); @@ -50,6 +60,12 @@ export const FlowBubbleMenu = ({ editor }) => {