║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Discussion docs:

• route: https://pro.platejs.org/docs/examples/discussion title: Plus
• route: /docs/components/block-discussion title: Block Discussion

---

<ComponentPreview name="discussion-demo" /> <PackageInfo>

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

</PackageInfo>

Kit Usage

<Steps>

Installation

The fastest way to add discussion functionality is with the DiscussionKit, which includes the pre-configured discussionPlugin along with its Plate UI components.

<ComponentSource name="discussion-kit" />

• BlockDiscussion: Renders discussion UI above nodes

Add Kit

import { createPlateEditor } from 'platejs/react';
import { DiscussionKit } from '@/components/editor/plugins/discussion-kit';

const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    ...DiscussionKit,
  ],
});

</Steps>

Manual Usage

<Steps>

Installation

npm install @platejs/comment @platejs/suggestion

Create Plugin

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 above nodes for discussion UI
• selectors.currentUser: Gets the current user data
• selectors.user: Gets user data by ID

Add Plugin

import { createPlateEditor } from 'platejs/react';

const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    discussionPlugin,
  ],
});

</Steps>

Plate Plus

<ComponentPreviewPro name="discussion-pro" />

Plugins

discussionPlugin

Pure UI plugin for managing collaboration state including users and discussion data.

<API name="discussionPlugin"> <APIOptions> <APIItem name="currentUserId" type="string"> ID of the current active user in the collaboration session. </APIItem> <APIItem name="discussions" type="TDiscussion[]"> Array of discussion objects containing comments and metadata. </APIItem> <APIItem name="users" type="Record<string, UserData>"> Object mapping user IDs to user information including name and avatar. </APIItem> </APIOptions> </API>

Selectors

currentUser

Gets the current user data.

<API name="currentUser"> <APIReturns type="UserData"> The current user's data including id, name, and avatarUrl. </APIReturns> </API>

user

Gets user data by ID.

<API name="user"> <APIParameters> <APIItem name="id" type="string"> The user ID to look up. </APIItem> </APIParameters> <APIReturns type="UserData | undefined"> The user data if found, undefined otherwise. </APIReturns> </API>

Types

TDiscussion

Discussion data structure containing comments and metadata.

<API name="TDiscussion"> <APIAttributes> <APIItem name="id" type="string"> Unique identifier for the discussion. </APIItem> <APIItem name="comments" type="TComment[]"> Array of comments in the discussion thread. </APIItem> <APIItem name="createdAt" type="Date"> When the discussion was created. </APIItem> <APIItem name="isResolved" type="boolean"> Whether the discussion has been resolved. </APIItem> <APIItem name="userId" type="string"> ID of the user who created the discussion. </APIItem> <APIItem name="documentContent" type="string" optional> Content from the document related to this discussion. </APIItem> </APIAttributes> </API>

UserData

User information structure for collaboration.

<API name="UserData"> <APIAttributes> <APIItem name="id" type="string"> Unique identifier for the user. </APIItem> <APIItem name="name" type="string"> Display name of the user. </APIItem> <APIItem name="avatarUrl" type="string"> URL for the user's avatar image. </APIItem> <APIItem name="hue" type="number" optional> Optional color hue for user identification. </APIItem> </APIAttributes> </API>

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║