โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ ๐ shadcn/directory/udecode/plate/(plugins)/(collaboration)/discussion.cn โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ
title: ่ฎจ่ฎบ docs:
ๆทปๅ ่ฎจ่ฎบๅ่ฝๆๅฟซ็ๆนๆณๆฏไฝฟ็จ DiscussionKit,ๅฎๅ
ๅซ้ข้
็ฝฎ็ discussionPlugin ๅๅ
ถ Plate UI ็ปไปถใ
BlockDiscussion: ๅจ่็นไธๆนๆธฒๆ่ฎจ่ฎบ UIimport { createPlateEditor } from 'platejs/react';
import { DiscussionKit } from '@/components/editor/plugins/discussion-kit';
const editor = createPlateEditor({
plugins: [
// ...ๅ
ถไปๆไปถ,
...DiscussionKit,
],
});
npm install @platejs/comment @platejs/suggestion
import { createPlatePlugin } from 'platejs/react';
import { BlockDiscussion } from '@/components/ui/block-discussion';
export interface TDiscussion {
id: string;
comments: TComment[];
createdAt: Date;
isResolved: boolean;
userId: string;
documentContent?: string;
}
const usersData = {
alice: {
id: 'alice',
avatarUrl: 'https://api.dicebear.com/9.x/glass/svg?seed=alice6',
name: 'Alice',
},
bob: {
id: 'bob',
avatarUrl: 'https://api.dicebear.com/9.x/glass/svg?seed=bob4',
name: 'Bob',
},
};
export const discussionPlugin = createPlatePlugin({
key: 'discussion',
options: {
currentUserId: 'alice',
discussions: [],
users: usersData,
},
})
.configure({
render: { aboveNodes: BlockDiscussion },
})
.extendSelectors(({ getOption }) => ({
currentUser: () => getOption('users')[getOption('currentUserId')],
user: (id: string) => getOption('users')[id],
}));
options.currentUserId: ๅฝๅๆดป่ท็จๆท็ IDoptions.discussions: ่ฎจ่ฎบๆฐๆฎ็ปๆๆฐ็ปoptions.users: ๅฐ็จๆท ID ๆ ๅฐๅฐ็จๆทๆฐๆฎ็ๅฏน่ฑกrender.aboveNodes: ๅจ่็นไธๆนๆธฒๆ BlockDiscussion ็จไบ่ฎจ่ฎบ UIselectors.currentUser: ่ทๅๅฝๅ็จๆทๆฐๆฎselectors.user: ้่ฟ ID ่ทๅ็จๆทๆฐๆฎimport { createPlateEditor } from 'platejs/react';
const editor = createPlateEditor({
plugins: [
// ...ๅ
ถไปๆไปถ,
discussionPlugin,
],
});
discussionPlugin็จไบ็ฎก็ๅ ๆฌ็จๆทๅ่ฎจ่ฎบๆฐๆฎๅจๅ ็ๅไฝ็ถๆ็็บฏ UI ๆไปถใ
<API name="discussionPlugin"> <APIOptions> <APIItem name="currentUserId" type="string"> ๅไฝไผ่ฏไธญๅฝๅๆดป่ท็จๆท็ IDใ </APIItem> <APIItem name="discussions" type="TDiscussion[]"> ๅ ๅซ่ฏ่ฎบๅๅ ๆฐๆฎ็่ฎจ่ฎบๅฏน่ฑกๆฐ็ปใ </APIItem> <APIItem name="users" type="Record<string, UserData>"> ๅฐ็จๆท ID ๆ ๅฐๅฐๅ ๆฌๅ็งฐๅๅคดๅๅจๅ ็็จๆทไฟกๆฏ็ๅฏน่ฑกใ </APIItem> </APIOptions> </API>currentUser่ทๅๅฝๅ็จๆทๆฐๆฎใ
<API name="currentUser"> <APIReturns type="UserData"> ๅฝๅ็จๆท็ๆฐๆฎ,ๅ ๆฌ idใname ๅ avatarUrlใ </APIReturns> </API>user้่ฟ ID ่ทๅ็จๆทๆฐๆฎใ
<API name="user"> <APIParameters> <APIItem name="id" type="string"> ่ฆๆฅๆพ็็จๆท IDใ </APIItem> </APIParameters> <APIReturns type="UserData | undefined"> ๅฆๆๆพๅฐๅ่ฟๅ็จๆทๆฐๆฎ,ๅฆๅ่ฟๅ undefinedใ </APIReturns> </API>TDiscussionๅ ๅซ่ฏ่ฎบๅๅ ๆฐๆฎ็่ฎจ่ฎบๆฐๆฎ็ปๆใ
<API name="TDiscussion"> <APIAttributes> <APIItem name="id" type="string"> ่ฎจ่ฎบ็ๅฏไธๆ ่ฏ็ฌฆใ </APIItem> <APIItem name="comments" type="TComment[]"> ่ฎจ่ฎบ็บฟ็จไธญ็่ฏ่ฎบๆฐ็ปใ </APIItem> <APIItem name="createdAt" type="Date"> ่ฎจ่ฎบๅๅปบ็ๆถ้ดใ </APIItem> <APIItem name="isResolved" type="boolean"> ่ฎจ่ฎบๆฏๅฆๅทฒ่งฃๅณใ </APIItem> <APIItem name="userId" type="string"> ๅๅปบ่ฎจ่ฎบ็็จๆท IDใ </APIItem> <APIItem name="documentContent" type="string" optional> ไธๆญค่ฎจ่ฎบ็ธๅ ณ็ๆๆกฃๅ ๅฎนใ </APIItem> </APIAttributes> </API>UserData็จไบๅไฝ็็จๆทไฟกๆฏ็ปๆใ
<API name="UserData"> <APIAttributes> <APIItem name="id" type="string"> ็จๆท็ๅฏไธๆ ่ฏ็ฌฆใ </APIItem> <APIItem name="name" type="string"> ็จๆท็ๆพ็คบๅ็งฐใ </APIItem> <APIItem name="avatarUrl" type="string"> ็จๆทๅคดๅๅพ็็ URLใ </APIItem> <APIItem name="hue" type="number" optional> ็จไบ็จๆท่ฏๅซ็ๅฏ้้ข่ฒ่ฒ่ฐใ </APIItem> </APIAttributes> </API>โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ