{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "discussion-docs",
  "title": "Discussion",
  "description": "Documentation for Discussion",
  "files": [
    {
      "path": "../../content/docs/(plugins)/(collaboration)/discussion.mdx",
      "content": "---\ntitle: Discussion\ndocs:\n  - route: https://pro.platejs.org/docs/examples/discussion\n    title: Plus\n  - route: /docs/components/block-discussion\n    title: Block Discussion\n---\n\n<ComponentPreview name=\"discussion-demo\" />\n\n<PackageInfo>\n\n## Features\n\n- **User Management**: Store and manage user data with avatars and names\n- **Discussion Threads**: Manage discussion data structures with comments\n- **Current User Tracking**: Track the current active user for collaboration\n- **Data Storage**: Pure UI plugin for storing collaboration state\n- **Selector API**: Easy access to user data through plugin selectors\n\n</PackageInfo>\n\n## Kit Usage\n\n<Steps>\n\n### Installation\n\nThe 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.\n\n<ComponentSource name=\"discussion-kit\" />\n\n- [`BlockDiscussion`](/docs/components/block-discussion): Renders discussion UI above nodes\n\n### Add Kit\n\n```tsx\nimport { createPlateEditor } from 'platejs/react';\nimport { DiscussionKit } from '@/components/editor/plugins/discussion-kit';\n\nconst editor = createPlateEditor({\n  plugins: [\n    // ...otherPlugins,\n    ...DiscussionKit,\n  ],\n});\n```\n\n</Steps>\n\n## Manual Usage\n\n<Steps>\n\n### Installation\n\n```bash\nnpm install @platejs/comment @platejs/suggestion\n```\n\n### Create Plugin\n\n```tsx\nimport { createPlatePlugin } from 'platejs/react';\nimport { BlockDiscussion } from '@/components/ui/block-discussion';\n\nexport interface TDiscussion {\n  id: string;\n  comments: TComment[];\n  createdAt: Date;\n  isResolved: boolean;\n  userId: string;\n  documentContent?: string;\n}\n\nconst usersData = {\n  alice: {\n    id: 'alice',\n    avatarUrl: 'https://api.dicebear.com/9.x/glass/svg?seed=alice6',\n    name: 'Alice',\n  },\n  bob: {\n    id: 'bob', \n    avatarUrl: 'https://api.dicebear.com/9.x/glass/svg?seed=bob4',\n    name: 'Bob',\n  },\n};\n\nexport const discussionPlugin = createPlatePlugin({\n  key: 'discussion',\n  options: {\n    currentUserId: 'alice',\n    discussions: [],\n    users: usersData,\n  },\n})\n  .configure({\n    render: { aboveNodes: BlockDiscussion },\n  })\n  .extendSelectors(({ getOption }) => ({\n    currentUser: () => getOption('users')[getOption('currentUserId')],\n    user: (id: string) => getOption('users')[id],\n  }));\n```\n\n- `options.currentUserId`: ID of the current active user\n- `options.discussions`: Array of discussion data structures  \n- `options.users`: Object mapping user IDs to user data\n- `render.aboveNodes`: Renders [`BlockDiscussion`](/docs/components/block-discussion) above nodes for discussion UI\n- `selectors.currentUser`: Gets the current user data\n- `selectors.user`: Gets user data by ID\n\n### Add Plugin\n\n```tsx\nimport { createPlateEditor } from 'platejs/react';\n\nconst editor = createPlateEditor({\n  plugins: [\n    // ...otherPlugins,\n    discussionPlugin,\n  ],\n});\n```\n\n</Steps>\n\n## Plate Plus\n\n<ComponentPreviewPro name=\"discussion-pro\" />\n\n## Plugins\n\n### `discussionPlugin`\n\nPure UI plugin for managing collaboration state including users and discussion data.\n\n<API name=\"discussionPlugin\">\n<APIOptions>\n  <APIItem name=\"currentUserId\" type=\"string\">\n    ID of the current active user in the collaboration session.\n  </APIItem>\n  <APIItem name=\"discussions\" type=\"TDiscussion[]\">\n    Array of discussion objects containing comments and metadata.\n  </APIItem>\n  <APIItem name=\"users\" type=\"Record<string, UserData>\">\n    Object mapping user IDs to user information including name and avatar.\n  </APIItem>\n</APIOptions>\n</API>\n\n## Selectors\n\n### `currentUser`\n\nGets the current user data.\n\n<API name=\"currentUser\">\n<APIReturns type=\"UserData\">\n  The current user's data including id, name, and avatarUrl.\n</APIReturns>\n</API>\n\n### `user`\n\nGets user data by ID.\n\n<API name=\"user\">\n<APIParameters>\n  <APIItem name=\"id\" type=\"string\">\n    The user ID to look up.\n  </APIItem>\n</APIParameters>\n<APIReturns type=\"UserData | undefined\">\n  The user data if found, undefined otherwise.\n</APIReturns>\n</API>\n\n## Types\n\n### `TDiscussion`\n\nDiscussion data structure containing comments and metadata.\n\n<API name=\"TDiscussion\">\n<APIAttributes>\n  <APIItem name=\"id\" type=\"string\">\n    Unique identifier for the discussion.\n  </APIItem>\n  <APIItem name=\"comments\" type=\"TComment[]\">\n    Array of comments in the discussion thread.\n  </APIItem>\n  <APIItem name=\"createdAt\" type=\"Date\">\n    When the discussion was created.\n  </APIItem>\n  <APIItem name=\"isResolved\" type=\"boolean\">\n    Whether the discussion has been resolved.\n  </APIItem>\n  <APIItem name=\"userId\" type=\"string\">\n    ID of the user who created the discussion.\n  </APIItem>\n  <APIItem name=\"documentContent\" type=\"string\" optional>\n    Content from the document related to this discussion.\n  </APIItem>\n</APIAttributes>\n</API>\n\n### `UserData`\n\nUser information structure for collaboration.\n\n<API name=\"UserData\">\n<APIAttributes>\n  <APIItem name=\"id\" type=\"string\">\n    Unique identifier for the user.\n  </APIItem>\n  <APIItem name=\"name\" type=\"string\">\n    Display name of the user.\n  </APIItem>\n  <APIItem name=\"avatarUrl\" type=\"string\">\n    URL for the user's avatar image.\n  </APIItem>\n  <APIItem name=\"hue\" type=\"number\" optional>\n    Optional color hue for user identification.\n  </APIItem>\n</APIAttributes>\n</API> ",
      "type": "registry:file",
      "target": "content/docs/plate/(plugins)/(collaboration)/discussion.mdx"
    }
  ],
  "type": "registry:file"
}