tiptap: add defaultShowPicker in Flow

This commit is contained in:
fantasticit 2022-06-05 00:26:52 +08:00
parent 42ec024279
commit 894759fb25
4 changed files with 28 additions and 11 deletions

View File

@ -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,
},
}; };
}, },

View File

@ -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);

View File

@ -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();
}, },
}, },
{ {

View File

@ -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'}