Comments

Add comments to text as marks.

Comment LeafComment Toolbar ButtonComments Popover
Loading...
Files
components/demo.tsx
'use client';

import React from 'react';

import { Plate } from '@udecode/plate-common/react';

import { editorPlugins } from '@/components/editor/plugins/editor-plugins';
import { useCreateEditor } from '@/components/editor/use-create-editor';
import { Editor, EditorContainer } from '@/components/plate-ui/editor';

import { DEMO_VALUES } from './values/demo-values';

export default function Demo({ id }: { id: string }) {
  const editor = useCreateEditor({
    plugins: [...editorPlugins],
    value: DEMO_VALUES[id],
  });

  return (
    <Plate editor={editor}>
      <EditorContainer variant="demo">
        <Editor />
      </EditorContainer>
    </Plate>
  );
}

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 { CommentsPlugin } from '@udecode/plate-comments/react';
 
const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    CommentsPlugin,
  ],
});

Keyboard Shortcuts

KeyDescription
Cmd + Shift + M

Add a comment on the selected text.

Plugins

CommentsPlugin

Options

Collapse all

    The text for a new comment.

    The current user's information.

    Function to get a user by their ID.

    Function to get a comment by its ID.

    The currently active comment.

API

editor.tf.insert.comment

Insert a new comment mark.

editor.api.comment.updateComment

Updates an existing comment.

editor.api.comment.addRawComment

Adds a new raw comment.

editor.api.comment.addComment

Adds a new comment.

editor.api.comment.removeComment

Removes a comment.

editor.api.comment.resetNewCommentValue

Resets the value of a new comment.

CommentStoreState

State

Collapse all

    The unique ID of the comment.

    A flag indicating whether the menu associated with this comment is currently open.

    The value currently being edited for this comment. If no editing is in progress, this value is null.

findCommentNode

Finds the comment node in the editor.

Parameters

Collapse all

    The editor instance.

    Additional options for finding the node.

findCommentNodeById

Finds the comment node in the editor by its ID.

Parameters

Collapse all

    The editor instance.

    The ID of the comment node to find.

getCommentCount

Gets the count of comments in a comment node.

Parameters

Collapse all

    The comment node.

getCommentKey

Generates a comment key based on the provided ID.

Parameters

Collapse all

    The ID of the comment.

getCommentKeyId

Extracts the comment ID from a comment key.

Parameters

Collapse all

    The comment key.

getCommentKeys

Returns an array of comment keys present in the given node.

Parameters

Collapse all

    The node to check for comment keys.

getCommentNodeEntries

Returns an array of node entries for comment nodes in the editor.

Parameters

Collapse all

    The editor instance.

getCommentNodesById

Returns an array of node entries for comment nodes with a specific ID in the editor.

Parameters

Collapse all

    The editor instance.

    The ID of the comment nodes to retrieve.

getCommentPosition

Calculates the position of a comment node relative to the editor.

Parameters

Collapse all

    The editor instance.

    The comment node for which to calculate the position.

getCommentUrl

Generates a URL with a query parameter for a specific comment ID.

Parameters

Collapse all

    The ID of the comment.

getElementAbsolutePosition

Calculates the absolute position of an HTML element relative to the document.

Parameters

Collapse all

    The HTML element for which to calculate the absolute position.

isCommentKey

Checks if a given key is a comment key.

Parameters

Collapse all

    The key to check.

isCommentNodeById

Checks if a given node is a comment with the specified ID.

Parameters

Collapse all

    The node to check.

    The ID of the comment.

isCommentText

Checks if a given node is a comment text node.

Parameters

Collapse all

    The node to check.

Returns

Collapse all

    true if the node is a comment text node.

removeCommentMark

Removes the comment mark from the editor.

Parameters

Collapse all

    The editor instance.

unsetCommentNodesById

Unsets comment nodes with the specified ID from the editor.

Parameters

Collapse all

    The editor instance.

    The ID of the comment nodes to unset.

CommentUser

An interface representing a user who can make comments.

Parameters

Collapse all

    The unique ID of the user.

    The name of the user.

    The URL of the user's avatar.

TComment

Attributes

Collapse all

    A unique ID for the comment.

    The Slate value of the comment.

    Timestamp when the comment was created.

    • Default: Date.now()

    Id of the author of the comment.

    Id of the parent comment it replies to.

    Whether the comment is resolved.

TCommentText

Attributes

Collapse all

    Indicates whether this is a comment. Multiple comments can be present in a single text node.

API Components

CommentProvider

A jotai provider for comment data.

Props

Collapse all

    Extends CommentStoreState.

    The scope of the provider.

CommentDeleteButton

A button component for deleting a comment.

State

Collapse all

    The ID of the active comment.

    The editor instance.

    The ID of the comment.

    A function to call when the comment is deleted.

    A function to remove the comment.

    A function to set the active comment ID.

CommentEditButton

A button component for editing a comment.

State

Collapse all

    A function to set the menu open state.

    The comment object.

    A function to set the editing value.

CommentEditCancelButton

A button component for canceling the editing of a comment.

CommentEditSaveButton

A button component for saving the editing of a comment.

State

Collapse all

    The value of the editing value.

    A function to set the editing value.

    The ID of the comment.

    A function to call when the comment is updated.

    A function to update the comment.

    The value of the comment.

CommentEditTextarea

A textarea component for editing a comment.

State

Collapse all

    A function to set the editing value.

    The textarea ref.

    The value of the textarea.

CommentNewSubmitButton

A button component for submitting a new comment.

State

Collapse all

    The text of the comment being edited.

    A function to reset the new comment value.

    A function to add a comment.

    Whether the comment is a reply.

    The text of the submit button.

    A function to call when the comment is added.

    The ID of the active comment.

    The comment object.

    The value of the edited comment.

CommentNewTextarea

A textarea component for adding a new comment.

State

Collapse all

    The textarea ref.

    The placeholder of the textarea.

    The value of the textarea.

    A function to set the new value.

CommentResolveButton

A button component for resolving/unresolving a comment.

CommentUserName

A div component for displaying the name of a comment user.

CommentsPositioner

A div component for positioning comments in the editor.

State

Collapse all

    The ID for the active comment.

    An object representing the current position of the comment (top and left coordinates).

useActiveCommentNode

A custom hook that retrieves the active comment node based on the active comment ID.

Returns

    • If there is an active comment ID, it returns the corresponding comment node.

    • If there is no active comment ID or the comment node is not found, it returns null.

useCommentAddButton

A custom hook that provides functionality for adding a comment mark to the selected text and setting focus to the comment textarea.

Returns

Collapse all

useCommentItemContentState

A state hook for the comment item content component.

Returns

Collapse all

    The comment object.

    A boolean indicating whether the comment is a reply comment.

    The text content of the comment.

    The user associated with the comment.

    The ID of the current user.

    The value of the comment being edited.

    A boolean indicating whether the comment is authored by the current user.

useCommentLeaf

A behavior hook for the comment leaf component.

Parameters

Collapse all

    The function to set the active comment ID.

    The ID of the last comment in the leaf.

Returns

Collapse all

useCommentValue

A custom hook that focuses and selects the text inside a textarea.

Returns

Collapse all

    A ref to the textarea element.

useCommentsResolved

A custom hook that returns an array of resolved comments.

Returns

Collapse all

    An array of resolved comments.

useCommentsShowResolvedButton

A custom hook that returns the props for a button component used to show resolved comments.

Returns

Collapse all

ComboboxCursor Overlay