Comment Kit

Installation

No MCP yet? Connect your agent.

Features

  • Text Comments: Add comments as text marks with inline annotations
  • Overlapping Comments: Support multiple comments on the same text
  • Draft Comments: Create draft comments before finalizing
  • State Tracking: Track comment state and user interactions
  • Discussion Integration: Works with discussion plugin for complete collaboration

Usage

Installation

The fastest way to add comment functionality is with the CommentKit, which includes pre-configured commentPlugin and related components along with their Plate UI components.

  • CommentLeaf: Renders comment text marks
  • BlockDiscussion: Renders discussion UI with comments integration

Add Kit

import { createPlateEditor } from "platejs/react";
import { CommentKit } from "@/components/editor/plugins/comment-kit";

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

Connect users, persistence, permissions, and any realtime transport in the host application. The component alone does not provide a shared backend.

Related items

Requires

  • Comment Base Kit

    Static rendering plugins for comment, composed as a reusable Plate feature kit.

    ReactTailwind
  • A text component for displaying comments with visual indicators.

    ReactTailwind
  • Rich-text editing plugins for discussion, composed as a reusable Plate feature kit.

    ReactTailwind