mirror of https://github.com/fantasticit/think.git
tiptap: add defaultShowPicker in Flow
This commit is contained in:
parent
42ec024279
commit
894759fb25
|
@ -1,3 +1,4 @@
|
||||||
|
import { IUser } from '@think/domains';
|
||||||
import { mergeAttributes, Node, nodeInputRule } from '@tiptap/core';
|
import { mergeAttributes, Node, nodeInputRule } from '@tiptap/core';
|
||||||
import { ReactNodeViewRenderer } from '@tiptap/react';
|
import { ReactNodeViewRenderer } from '@tiptap/react';
|
||||||
import { FlowWrapper } from 'tiptap/core/wrappers/flow';
|
import { FlowWrapper } from 'tiptap/core/wrappers/flow';
|
||||||
|
@ -7,6 +8,8 @@ export interface IFlowAttrs {
|
||||||
width?: number | string;
|
width?: number | string;
|
||||||
height?: number;
|
height?: number;
|
||||||
data?: string;
|
data?: string;
|
||||||
|
defaultShowPicker?: boolean;
|
||||||
|
createUser?: IUser['id'];
|
||||||
}
|
}
|
||||||
|
|
||||||
declare module '@tiptap/core' {
|
declare module '@tiptap/core' {
|
||||||
|
@ -40,6 +43,12 @@ export const Flow = Node.create({
|
||||||
default: DEFAULT_XML,
|
default: DEFAULT_XML,
|
||||||
parseHTML: getDatasetAttribute('data'),
|
parseHTML: getDatasetAttribute('data'),
|
||||||
},
|
},
|
||||||
|
defaultShowPicker: {
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
createUser: {
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
@ -8,12 +8,7 @@ function mapSelf<T>(d: T): T {
|
||||||
return d;
|
return d;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function useAttributes<T extends Record<string, unknown>, R>(
|
export function useAttributes<T, R = T>(editor: Editor, attrbute: string, defaultValue?: T, map?: (arg: T) => R) {
|
||||||
editor: Editor,
|
|
||||||
attrbute: string,
|
|
||||||
defaultValue?: T,
|
|
||||||
map?: (arg: T) => R
|
|
||||||
) {
|
|
||||||
const mapFn = (map || mapSelf) as MapFn<T, R>;
|
const mapFn = (map || mapSelf) as MapFn<T, R>;
|
||||||
const [value, setValue] = useState<R>(mapFn(defaultValue));
|
const [value, setValue] = useState<R>(mapFn(defaultValue));
|
||||||
const prevValueCache = useRef<R>(value);
|
const prevValueCache = useRef<R>(value);
|
||||||
|
|
|
@ -114,8 +114,8 @@ export const COMMANDS: ICommand[] = [
|
||||||
{
|
{
|
||||||
icon: <IconFlow />,
|
icon: <IconFlow />,
|
||||||
label: '流程图',
|
label: '流程图',
|
||||||
action: (editor) => {
|
action: (editor, user) => {
|
||||||
editor.chain().focus().setFlow({ width: '100%' }).run();
|
editor.chain().focus().setFlow({ width: '100%', defaultShowPicker: true, createUser: user.id }).run();
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
|
@ -2,16 +2,22 @@ import { IconCopy, IconDelete, IconEdit } 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 { Tooltip } from 'components/tooltip';
|
import { Tooltip } from 'components/tooltip';
|
||||||
import { useCallback } from 'react';
|
import { useUser } from 'data/user';
|
||||||
|
import { useCallback, useEffect } from 'react';
|
||||||
import { BubbleMenu } from 'tiptap/core/bubble-menu';
|
import { BubbleMenu } from 'tiptap/core/bubble-menu';
|
||||||
import { Flow } 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 } from 'tiptap/prose-utils';
|
||||||
|
|
||||||
import { triggerOpenFlowSettingModal } from '../_event';
|
import { triggerOpenFlowSettingModal } from '../_event';
|
||||||
|
|
||||||
export const FlowBubbleMenu = ({ editor }) => {
|
export const FlowBubbleMenu = ({ editor }) => {
|
||||||
const attrs = useAttributes(editor, Flow.name, {});
|
const attrs = useAttributes<IFlowAttrs>(editor, Flow.name, {
|
||||||
|
defaultShowPicker: false,
|
||||||
|
createUser: '',
|
||||||
|
});
|
||||||
|
const { defaultShowPicker, createUser } = attrs;
|
||||||
|
const { user } = useUser();
|
||||||
|
|
||||||
const openEditLinkModal = useCallback(() => {
|
const openEditLinkModal = useCallback(() => {
|
||||||
triggerOpenFlowSettingModal(editor, attrs);
|
triggerOpenFlowSettingModal(editor, attrs);
|
||||||
|
@ -20,6 +26,13 @@ export const FlowBubbleMenu = ({ editor }) => {
|
||||||
const copyMe = useCallback(() => copyNode(Flow.name, editor), [editor]);
|
const copyMe = useCallback(() => copyNode(Flow.name, editor), [editor]);
|
||||||
const deleteMe = useCallback(() => deleteNode(Flow.name, editor), [editor]);
|
const deleteMe = useCallback(() => deleteNode(Flow.name, editor), [editor]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (defaultShowPicker && user && createUser === user.id) {
|
||||||
|
openEditLinkModal();
|
||||||
|
editor.chain().updateAttributes(Flow.name, { defaultShowPicker: false }).focus().run();
|
||||||
|
}
|
||||||
|
}, [createUser, defaultShowPicker, editor, openEditLinkModal, user]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<BubbleMenu
|
<BubbleMenu
|
||||||
className={'bubble-menu'}
|
className={'bubble-menu'}
|
||||||
|
|
Loading…
Reference in New Issue