From ff86457cf7970b06915b14215faedd7ca8d12c31 Mon Sep 17 00:00:00 2001 From: fantasticit Date: Sun, 5 Jun 2022 00:30:10 +0800 Subject: [PATCH] tiptap: add defaultShowPicker in Mind --- .../client/src/tiptap/core/extensions/mind.ts | 9 +++++++++ .../client/src/tiptap/core/menus/commands.tsx | 4 ++-- .../src/tiptap/core/menus/mind/bubble.tsx | 20 ++++++++++++++++--- 3 files changed, 28 insertions(+), 5 deletions(-) diff --git a/packages/client/src/tiptap/core/extensions/mind.ts b/packages/client/src/tiptap/core/extensions/mind.ts index 147724d7..bd820ebd 100644 --- a/packages/client/src/tiptap/core/extensions/mind.ts +++ b/packages/client/src/tiptap/core/extensions/mind.ts @@ -1,3 +1,4 @@ +import { IUser } from '@think/domains'; import { mergeAttributes, Node, nodeInputRule } from '@tiptap/core'; import { ReactNodeViewRenderer } from '@tiptap/react'; import { MindWrapper } from 'tiptap/core/wrappers/mind'; @@ -11,6 +12,8 @@ const DEFAULT_MIND_DATA = { }; export interface IMindAttrs { + defaultShowPicker?: boolean; + createUser?: IUser['id']; width?: number | string; height?: number; data?: Record; @@ -36,6 +39,12 @@ export const Mind = Node.create({ addAttributes() { return { + defaultShowPicker: { + default: false, + }, + createUser: { + default: null, + }, width: { default: '100%', parseHTML: getDatasetAttribute('width'), diff --git a/packages/client/src/tiptap/core/menus/commands.tsx b/packages/client/src/tiptap/core/menus/commands.tsx index 17e52c1b..3ca11e1d 100644 --- a/packages/client/src/tiptap/core/menus/commands.tsx +++ b/packages/client/src/tiptap/core/menus/commands.tsx @@ -121,8 +121,8 @@ export const COMMANDS: ICommand[] = [ { icon: , label: '思维导图', - action: (editor) => { - editor.chain().focus().setMind({ width: '100%' }).run(); + action: (editor, user) => { + editor.chain().focus().setMind({ width: '100%', defaultShowPicker: true, createUser: user.id }).run(); }, }, { diff --git a/packages/client/src/tiptap/core/menus/mind/bubble.tsx b/packages/client/src/tiptap/core/menus/mind/bubble.tsx index e701cf5f..264d92b0 100644 --- a/packages/client/src/tiptap/core/menus/mind/bubble.tsx +++ b/packages/client/src/tiptap/core/menus/mind/bubble.tsx @@ -3,16 +3,23 @@ import { Button, Space } from '@douyinfe/semi-ui'; import { Divider } from 'components/divider'; import { SizeSetter } from 'components/size-setter'; 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 { Mind } from 'tiptap/core/extensions/mind'; +import { IMindAttrs, Mind } from 'tiptap/core/extensions/mind'; import { useAttributes } from 'tiptap/core/hooks/use-attributes'; import { copyNode, deleteNode, getEditorContainerDOMSize } from 'tiptap/prose-utils'; import { triggerOpenMindSettingModal } from '../_event'; export const MindBubbleMenu = ({ editor }) => { - const attrs = useAttributes(editor, Mind.name, {}); + const attrs = useAttributes(editor, Mind.name, { + defaultShowPicker: false, + createUser: '', + }); + const { defaultShowPicker, createUser } = attrs; + const { user } = useUser(); + const { width: maxWidth } = getEditorContainerDOMSize(editor); const { width, height } = useAttributes(editor, Mind.name, { width: 0, height: 0 }); @@ -37,6 +44,13 @@ export const MindBubbleMenu = ({ editor }) => { triggerOpenMindSettingModal(editor, attrs); }, [editor, attrs]); + useEffect(() => { + if (defaultShowPicker && user && createUser === user.id) { + openEditLinkModal(); + editor.chain().updateAttributes(Mind.name, { defaultShowPicker: false }).focus().run(); + } + }, [createUser, defaultShowPicker, editor, openEditLinkModal, user]); + return (