gio
/
think
mirror of https://github.com/fantasticit/think.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

tiptap: add size setter in flow

This commit is contained in:
fantasticit 2022-06-05 19:33:58 +08:00
parent 49974328c6
commit 5368182a7f
1 changed files with 19 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
packages/client/src/tiptap/core/menus/flow/bubble.tsx
View File

@ -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 { Button, Space } from '@douyinfe/semi-ui';
import { Divider } from 'components/divider'; import { Divider } from 'components/divider';
import { SizeSetter } from 'components/size-setter';
import { Tooltip } from 'components/tooltip'; import { Tooltip } from 'components/tooltip';
import { useUser } from 'data/user'; import { useUser } from 'data/user';
import { useCallback, useEffect } from 'react'; import { useCallback, useEffect } from 'react';
import { BubbleMenu } from 'tiptap/core/bubble-menu'; import { BubbleMenu } from 'tiptap/core/bubble-menu';
import { Flow, IFlowAttrs } from 'tiptap/core/extensions/flow'; import { Flow, IFlowAttrs } from 'tiptap/core/extensions/flow';
import { useAttributes } from 'tiptap/core/hooks/use-attributes'; 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'; import { triggerOpenFlowSettingModal } from '../_event';
export const FlowBubbleMenu = ({ editor }) => { export const FlowBubbleMenu = ({ editor }) => {
const { width: maxWidth } = getEditorContainerDOMSize(editor);
const attrs = useAttributes<IFlowAttrs>(editor, Flow.name, { const attrs = useAttributes<IFlowAttrs>(editor, Flow.name, {
defaultShowPicker: false, defaultShowPicker: false,
createUser: '', createUser: '',
width: 0,
height: 0,
}); });
const { defaultShowPicker, createUser } = attrs; const { defaultShowPicker, createUser, width, height } = attrs;
const { user } = useUser(); const { user } = useUser();
const setSize = useCallback(
(size) => {
editor.chain().updateAttributes(Flow.name, size).setNodeSelection(editor.state.selection.from).focus().run();
},
[editor]
);
const openEditLinkModal = useCallback(() => { const openEditLinkModal = useCallback(() => {
triggerOpenFlowSettingModal(editor, attrs); triggerOpenFlowSettingModal(editor, attrs);
}, [editor, attrs]); }, [editor, attrs]);
@ -50,6 +60,12 @@ export const FlowBubbleMenu = ({ editor }) => {
<Button size="small" type="tertiary" theme="borderless" icon={<IconEdit />} onClick={openEditLinkModal} /> <Button size="small" type="tertiary" theme="borderless" icon={<IconEdit />} onClick={openEditLinkModal} />
</Tooltip> </Tooltip>
<SizeSetter width={width} maxWidth={maxWidth} height={height} onOk={setSize}>
<Tooltip content="设置宽高">
<Button icon={<IconLineHeight />} type="tertiary" theme="borderless" size="small" />
</Tooltip>
</SizeSetter>
<Divider /> <Divider />
<Tooltip content="删除节点" hideOnClick> <Tooltip content="删除节点" hideOnClick>