mirror of https://github.com/fantasticit/think.git
tiptap: add size setter in flow
This commit is contained in:
parent
49974328c6
commit
5368182a7f
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue