Discussion

PreviousNext
PlusBlock Discussion
Loading...

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 components.

Add Kit

import { createPlateEditor } from 'platejs/react';
import { DiscussionKit } from '@/components/editor/plugins/discussion-kit';
 
const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    ...DiscussionKit,
  ],
});

Manual Usage

Installation

pnpm add @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,
  ],
});

Plate Plus

Plugins

discussionPlugin

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

Options

  • currentUserId string

    ID of the current active user in the collaboration session.

  • discussions TDiscussion[]

    Array of discussion objects containing comments and metadata.

  • users Record<string, UserData>

    Object mapping user IDs to user information including name and avatar.

Selectors

currentUser

Gets the current user data.

ReturnsUserData

    The current user's data including id, name, and avatarUrl.

user

Gets user data by ID.

Parameters

Collapse all

  • id string

    The user ID to look up.

ReturnsUserData | undefined

    The user data if found, undefined otherwise.

Types

TDiscussion

Discussion data structure containing comments and metadata.

Attributes

Collapse all

  • id string

    Unique identifier for the discussion.

  • comments TComment[]

    Array of comments in the discussion thread.

  • createdAt Date

    When the discussion was created.

  • isResolved boolean

    Whether the discussion has been resolved.

  • userId string

    ID of the user who created the discussion.

  • documentContent optional string

    Content from the document related to this discussion.

UserData

User information structure for collaboration.

Attributes

Collapse all

  • id string

    Unique identifier for the user.

  • name string

    Display name of the user.

  • avatarUrl string

    URL for the user's avatar image.

  • hue optional number

    Optional color hue for user identification.

讨论建议功能