tiptap: add defaultShowPicker for DocumentReference

This commit is contained in:
fantasticit 2022-06-05 00:17:09 +08:00
parent 7e46e7ba65
commit d073531325
3 changed files with 42 additions and 5 deletions

View File

@ -3,10 +3,15 @@ import { ReactNodeViewRenderer } from '@tiptap/react';
import { DocumentReferenceWrapper } from 'tiptap/core/wrappers/document-reference'; import { DocumentReferenceWrapper } from 'tiptap/core/wrappers/document-reference';
import { getDatasetAttribute } from 'tiptap/prose-utils'; import { getDatasetAttribute } from 'tiptap/prose-utils';
type IDocumentReferenceAttrs = {
defaultShowPicker?: boolean;
createUser: string;
};
declare module '@tiptap/core' { declare module '@tiptap/core' {
interface Commands<ReturnType> { interface Commands<ReturnType> {
documentReference: { documentReference: {
setDocumentReference: () => ReturnType; setDocumentReference: (arg?: IDocumentReferenceAttrs) => ReturnType;
}; };
} }
} }
@ -32,6 +37,12 @@ export const DocumentReference = Node.create({
default: '', default: '',
parseHTML: getDatasetAttribute('title'), parseHTML: getDatasetAttribute('title'),
}, },
defaultShowPicker: {
default: false,
},
createUser: {
default: null,
},
}; };
}, },
@ -58,11 +69,11 @@ export const DocumentReference = Node.create({
addCommands() { addCommands() {
return { return {
setDocumentReference: setDocumentReference:
() => (attrs) =>
({ commands }) => { ({ commands }) => {
return commands.insertContent({ return commands.insertContent({
type: this.name, type: this.name,
attrs: {}, attrs,
}); });
}, },
}; };

View File

@ -147,7 +147,8 @@ export const COMMANDS: ICommand[] = [
{ {
icon: <IconDocument />, icon: <IconDocument />,
label: '文档', label: '文档',
action: (editor) => editor.chain().focus().setDocumentReference().run(), action: (editor, user) =>
editor.chain().focus().setDocumentReference({ defaultShowPicker: true, createUser: user.id }).run(),
}, },
{ {
icon: <IconDocument />, icon: <IconDocument />,

View File

@ -4,17 +4,33 @@ import { DataRender } from 'components/data-render';
import { Divider } from 'components/divider'; import { Divider } from 'components/divider';
import { IconDocument } from 'components/icons'; import { IconDocument } from 'components/icons';
import { Tooltip } from 'components/tooltip'; import { Tooltip } from 'components/tooltip';
import { useUser } from 'data/user';
import { useWikiTocs } from 'data/wiki'; import { useWikiTocs } from 'data/wiki';
import { useToggle } from 'hooks/use-toggle';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import { useCallback } from 'react'; import { useCallback, useEffect } from 'react';
import { BubbleMenu } from 'tiptap/core/bubble-menu'; import { BubbleMenu } from 'tiptap/core/bubble-menu';
import { DocumentReference } from 'tiptap/core/extensions/document-reference'; import { DocumentReference } from 'tiptap/core/extensions/document-reference';
import { useAttributes } from 'tiptap/core/hooks/use-attributes';
import { copyNode, deleteNode } from 'tiptap/prose-utils'; import { copyNode, deleteNode } from 'tiptap/prose-utils';
const { Text } = Typography; const { Text } = Typography;
type DocumentReferenceAttrs = {
defaultShowPicker: boolean;
createUser: string;
};
export const DocumentReferenceBubbleMenu = ({ editor }) => { export const DocumentReferenceBubbleMenu = ({ editor }) => {
const attrs = useAttributes<DocumentReferenceAttrs, DocumentReferenceAttrs>(editor, DocumentReference.name, {
defaultShowPicker: false,
createUser: '',
});
const { defaultShowPicker, createUser } = attrs;
const { user } = useUser();
const { pathname, query } = useRouter(); const { pathname, query } = useRouter();
const [visible, toggleVisible] = useToggle(false);
const wikiIdFromUrl = query?.wikiId; const wikiIdFromUrl = query?.wikiId;
const isShare = pathname.includes('share'); const isShare = pathname.includes('share');
const { data: tocs, loading, error } = useWikiTocs(isShare ? null : wikiIdFromUrl); const { data: tocs, loading, error } = useWikiTocs(isShare ? null : wikiIdFromUrl);
@ -36,6 +52,13 @@ export const DocumentReferenceBubbleMenu = ({ editor }) => {
const copyMe = useCallback(() => copyNode(DocumentReference.name, editor), [editor]); const copyMe = useCallback(() => copyNode(DocumentReference.name, editor), [editor]);
const deleteMe = useCallback(() => deleteNode(DocumentReference.name, editor), [editor]); const deleteMe = useCallback(() => deleteNode(DocumentReference.name, editor), [editor]);
useEffect(() => {
if (defaultShowPicker && user && createUser === user.id) {
toggleVisible(true);
editor.chain().updateAttributes(DocumentReference.name, { defaultShowPicker: false }).focus().run();
}
}, [editor, defaultShowPicker, toggleVisible, createUser, user]);
return ( return (
<BubbleMenu <BubbleMenu
className={'bubble-menu'} className={'bubble-menu'}
@ -51,6 +74,8 @@ export const DocumentReferenceBubbleMenu = ({ editor }) => {
<Popover <Popover
spacing={15} spacing={15}
visible={visible}
onVisibleChange={toggleVisible}
content={ content={
<DataRender <DataRender
loading={loading} loading={loading}