Components
Comment Toolbar Button

Comment Toolbar Button

A toolbar button for adding and managing comments.

CommentsSeparatorToolbarTooltip

Installation

Install the following dependencies:

npm install @udecode/plate-comments @radix-ui/react-toolbar @radix-ui/react-tooltip @radix-ui/react-separator

Copy and paste the following code into your project.

Get the code ->

Update the import paths to match your project setup.

Examples

Comments

Get the code ->

💬 Comments

Add comments to your content to provide additional context, insights, or collaborate with others.
How to create comments:
  1. Select text and press "⌘ + ⇧+ M".
  1. Use the floating toolbar: Select text, then click the "comment" button.
  1. Use the block menu: Select a block, then click the "comment" button.
Using comments:
  • Type your comment and press "Enter" to create it.
  • Click anywhere to cancel comment creation.
  • Access existing comments by clicking on the commented text.
  • You can reply to, resolve, edit, or delete comments.
Try adding a comment to this text: Comments are a great way to collaborate!

Floating Toolbar

Get the code ->

Floating Toolbar

The floating toolbar provides quick access to formatting options and actions for selected text.
How to use the floating toolbar:
  • Select any text to invoke the floating toolbar.
With the floating toolbar, you can:
  • Ask AI for assistance
  • Add a comment to the selected text
  • Transform the selected into an another block
  • Apply text formatting: bold, italic, underline, strikethrough, code
  • Mark text as an equation
  • Change text color or background color
  • Open the block menu for additional options
Try selecting some text below to see the floating toolbar in action:
Bold text, italic text, underlined text, and combined formatting.
Color Dropdown MenuComments Popover