4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T14c8,--- title: Discussion docs: - route: https://pro.platejs.org/docs/examples/discussion title: Plus - route: /docs/components/block-discussion title: Block Discussion --- ## Features - **User Management**: Store and manage user data with avatars and names - **Discussion Threads**: Manage discussion data structures with comments - **Current User Tracking**: Track the current active user for collaboration - **Data Storage**: Pure UI plugin for storing collaboration state - **Selector API**: Easy access to user data through plugin selectors ## Kit Usage ### Installation The fastest way to add discussion functionality is with the `DiscussionKit`, which includes the pre-configured `discussionPlugin` along with its [Plate UI](/docs/installation/plate-ui) components. - [`BlockDiscussion`](/docs/components/block-discussion): Renders discussion UI above nodes ### Add Kit ```tsx import { createPlateEditor } from 'platejs/react'; import { DiscussionKit } from '@/components/editor/plugins/discussion-kit'; const editor = createPlateEditor({ plugins: [ // ...otherPlugins, ...DiscussionKit, ], }); ``` ## Manual Usage ### Installation ```bash npm install @platejs/comment @platejs/suggestion ``` ### Create Plugin ```tsx 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`: ID of the current active user - `options.discussions`: Array of discussion data structures - `options.users`: Object mapping user IDs to user data - `render.aboveNodes`: Renders [`BlockDiscussion`](/docs/components/block-discussion) above nodes for discussion UI - `selectors.currentUser`: Gets the current user data - `selectors.user`: Gets user data by ID ### Add Plugin ```tsx import { createPlateEditor } from 'platejs/react'; const editor = createPlateEditor({ plugins: [ // ...otherPlugins, discussionPlugin, ], }); ``` ## Plate Plus ## Plugins ### `discussionPlugin` Pure UI plugin for managing collaboration state including users and discussion data. ID of the current active user in the collaboration session. Array of discussion objects containing comments and metadata. Object mapping user IDs to user information including name and avatar. ## Selectors ### `currentUser` Gets the current user data. The current user's data including id, name, and avatarUrl. ### `user` Gets user data by ID. The user ID to look up. The user data if found, undefined otherwise. ## Types ### `TDiscussion` Discussion data structure containing comments and metadata. Unique identifier for the discussion. Array of comments in the discussion thread. When the discussion was created. Whether the discussion has been resolved. ID of the user who created the discussion. Content from the document related to this discussion. ### `UserData` User information structure for collaboration. Unique identifier for the user. Display name of the user. URL for the user's avatar image. Optional color hue for user identification. 4e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L4f",null,{"files":[{"path":"../../content/docs/(plugins)/(collaboration)/discussion.mdx","content":"$50","type":"registry:file","target":"content/docs/plate/(plugins)/(collaboration)/discussion.mdx"}],"className":"h-[70svh] min-h-80"}]]}]