mirror of https://github.com/fantasticit/think.git
tiptap: add defaultShowPicker for DocumentReference
This commit is contained in:
parent
7e46e7ba65
commit
d073531325
|
@ -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,
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
|
@ -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 />,
|
||||||
|
|
|
@ -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}
|
||||||
|
|
Loading…
Reference in New Issue