mirror of https://github.com/fantasticit/think.git
tiptap: add defaultShowPicker in Mind
This commit is contained in:
parent
894759fb25
commit
ff86457cf7
|
@ -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<string, unknown>;
|
||||
|
@ -36,6 +39,12 @@ export const Mind = Node.create({
|
|||
|
||||
addAttributes() {
|
||||
return {
|
||||
defaultShowPicker: {
|
||||
default: false,
|
||||
},
|
||||
createUser: {
|
||||
default: null,
|
||||
},
|
||||
width: {
|
||||
default: '100%',
|
||||
parseHTML: getDatasetAttribute('width'),
|
||||
|
|
|
@ -121,8 +121,8 @@ export const COMMANDS: ICommand[] = [
|
|||
{
|
||||
icon: <IconMind />,
|
||||
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();
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
|
@ -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<IMindAttrs>(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 (
|
||||
<BubbleMenu
|
||||
className={'bubble-menu'}
|
||||
|
|
Loading…
Reference in New Issue