How to Organize Comments Into Bubbles Like PlateJS Playground

[shawonsaha]

Hi

I've been working on integrating comments into my editor implementation using PlateJS. I noticed that in the official Plate Playground demo (screenshot 1), comments appear in organized bubbles on the right side, making threaded discussions easy to follow. However, in my implementation (screenshot 2), the comments appear more scattered and lack the clean bubble/threaded organization that I see in the demo.

Could anyone share tips, code snippets, or recommended plugins/settings to achieve the same organized comment bubbles as shown in the official playground? Are there specific blocks, styles, or config options I should look into?

Thanks for your help!

[dosubot[bot]]

To get organized comment bubbles and threaded sidebar discussions like the PlateJS Playground, use the built-in CommentKit and DiscussionKit plugins. These handle the UI and state for comment bubbles and threads out of the box.

Install the kits with:

npx shadcn@latest add comment-kit discussion-kit block-discussion

Then, add them to your editor plugins:

import { commentPlugin } from '@/components/editor/plugins/comment-kit';
import { discussionPlugin } from '@/components/editor/plugins/discussion-kit';

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

The key UI components are CommentLeaf (renders comment marks in the text) and BlockDiscussion (renders the sidebar/threaded bubbles). The plugins manage state like activeId, commentingBlock, hoverId, and uniquePathMap for comment organization and highlighting. The discussionPlugin also takes users and discussions data for threaded discussions and avatars.

You can see example data structures and more details in the docs:

• CommentKit & commentPlugin setup
• DiscussionKit & BlockDiscussion
• BlockDiscussion component

This setup will give you the same organized comment bubbles and sidebar threads as the official playground.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}