Comments

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

import React from 'react';

import { Plate } from '@udecode/plate/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.

Transforms

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.

Store State

CommentStoreState

State

Collapse all

    The unique ID of the comment.

    Whether the menu associated with this comment is open.

    The value currently being edited, or null if no editing in progress.

Utils

findCommentNode

Parameters

Collapse all

    The editor instance.

    Additional options for finding the node.

findCommentNodeById

Parameters

Collapse all

    The editor instance.

    The ID of the comment node to find.

getCommentCount

Parameters

Collapse all

    The comment node.

getCommentKey

Parameters

Collapse all

    The ID of the comment.

getCommentKeyId

Parameters

Collapse all

    The comment key.

getCommentKeys

Parameters

Collapse all

    The node to check for comment keys.

getCommentNodeEntries

Parameters

Collapse all

    The editor instance.

getCommentNodesById

Parameters

Collapse all

    The editor instance.

    The ID of the comment nodes to retrieve.

getCommentPosition

Parameters

Collapse all

    The editor instance.

    The comment node for which to calculate the position.

getCommentUrl

Parameters

Collapse all

    The ID of the comment.

getElementAbsolutePosition

Parameters

Collapse all

    The HTML element for which to calculate the absolute position.

isCommentKey

Parameters

Collapse all

    The key to check.

Returnsboolean

    Whether the key is a comment key.

isCommentNodeById

Parameters

Collapse all

    The node to check.

    The ID of the comment.

Returnsboolean

    Whether the node is a comment with the specified ID.

isCommentText

Parameters

Collapse all

    The node to check.

Returnsboolean

    Whether the node is a comment text node.

removeCommentMark

Parameters

Collapse all

    The editor instance.

unsetCommentNodesById

Parameters

Collapse all

    The editor instance.

    The ID of the comment nodes to unset.

Components

<CommentProvider>

Props

Collapse all

    Base state type.

    The scope of the provider.

<CommentDeleteButton>

State

Collapse all

    The ID of the active comment.

    The editor instance.

    The ID of the comment.

    Callback when comment is deleted.

    Function to remove the comment.

    Function to set the active comment ID.

<CommentEditButton>

State

Collapse all

    Function to set the menu open state.

    The comment object.

    Function to set the editing value.

<CommentEditCancelButton>

Button component for canceling comment edits.

<CommentEditSaveButton>

State

Collapse all

    The current editing value.

    Function to set the editing value.

    The ID of the comment.

    Callback when comment is updated.

    Function to update the comment.

    The comment value.

<CommentEditTextarea>

State

Collapse all

    Function to set the editing value.

    Reference to the textarea element.

    The textarea value.

<CommentNewSubmitButton>

State

Collapse all

    The text being edited.

    Function to reset the new comment value.

    Function to add a comment.

    Whether this is a reply comment.

    Text for the submit button.

    Callback when comment is added.

    The ID of the active comment.

    The comment object.

    The new comment value.

<CommentNewTextarea>

State

Collapse all

    Reference to the textarea element.

    Placeholder text.

    The textarea value.

    Function to set the new value.

<CommentResolveButton>

Button component for resolving/unresolving comments.

<CommentUserName>

Component for displaying a comment user's name.

<CommentsPositioner>

State

Collapse all

    The ID of the active comment.

    Position coordinates (top and left).

Hooks

useActiveCommentNode

ReturnsTCommentText | null

    The active comment node, or null if none found.

useCommentAddButton

Returns{ props: { onClick: () => void } }

    Props for the comment add button.

useCommentItemContentState

Returnsobject

Collapse all

    The comment object.

    Whether this is a reply comment.

    The comment text content.

    The comment author.

    Current user's ID.

    Current editing value.

    Whether current user is the author.

useCommentLeaf

Parameters

Collapse all

    Function to set active comment ID.

    ID of the last comment in the leaf.

Returns{ props: { onClick: () => void } }

    Props for the comment leaf.

useCommentValue

Returns{ textareaRef: React.Ref }

    Reference to the textarea element.

useCommentsResolved

ReturnsTComment[]

    Array of resolved comments.

useCommentsShowResolvedButton

Returns{ props: { pressed: boolean; onClick: () => void } }

    Props for the show resolved comments button.