Docs
Comments

Comments

Add comments to text as marks.

Comment LeafComment Toolbar ButtonComments Popover

💬 Comments

Add comments to your content to provide additional context, insights, or collaborate with others

Features

  • Add text comments as marks.
  • Comments can include explanations, suggestions, questions, notes, or ideas for content improvement.
  • Add a comment by selecting the text and using the comment button or hotkey Cmd+Shift+M.

Installation

npm install @udecode/plate-comments

Usage

import { createCommentsPlugin } from '@udecode/plate-comments';
 
const plugins = [
  // ...otherPlugins,
  createCommentsPlugin(),
];

API

createCommentsPlugin

Attributes

Collapse all

    Options.

    The hotkey used to add a comment.

findCommentNode

findCommentNodeById

getCommentCount

getCommentKey

getCommentKeyId

getCommentKeys

getCommentNodeEntries

getCommentNodesById

getCommentPosition

getCommentUrl

getElementAbsolutePosition

isCommentKey

isCommentNodeById

isCommentText

removeCommentMark

unsetCommentNodesById

CommentUser

Attributes

Collapse all

    A unique identifier for the comment user.

    The name of the comment user.

    URL to the avatar of the comment user.

TComment

Attributes

Collapse all

    A unique identifier for the comment.

    The Slate value of the document.

    Timestamp when the comment was created.

    • Default: Date.now()

    Identifier of the author of the comment.

    Identifier of the parent comment it replies to.

    Whether the comment is resolved.

TCommentText

Attributes

Collapse all

    Indicates whether this is a comment.

    Records of comments. Each record's key is a string and its value is a boolean.

CommentUser

An interface representing a user who can make comments.

Parameters

Collapse all

    The unique identifier of the user.

    The name of the user.

    The URL of the user's avatar.

TComment

An interface representing a comment in the editor.

Parameters

Collapse all

    The unique identifier of the comment.

    The Slate value of the document.

    The time the comment was created. Default is the current time (Date.now()).

    The identifier of the user who made the comment.

    The identifier of the parent comment this comment replies to.

    Indicates whether the comment is resolved.

TCommentText

An interface extending TText with additional properties for managing comments.

Parameters

Collapse all

    Indicates whether the text includes a comment.

    An object containing boolean values for each comment associated with the text, with the comment id as the key.

API Plugins

useHooksComments

withComments

API Components

CommentDeleteButton

CommentEditActions

CommentEditButton

CommentEditCancelButton

CommentEditSaveButton

CommentEditTextarea

CommentNewSubmitButton

CommentNewTextarea

CommentProvider

CommentResolveButton

CommentUserName

CommentsPositioner

CommentsProvider

useActiveCommentNode

useAddCommentMark

useCommentAddButton

useCommentItemContent

useCommentLeaf

useCommentValue

useCommentsResolved

useCommentsShowResolvedButton

useFloatingCommentsContentState

useFloatingCommentsState

Keyboard Interactions

KeyDescription
Cmd + Shift + M

Add a comment on the selected text.

ComboboxDrag & Drop