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

Finds the comment node in the editor.

OptionsEditorNodesOptions

    Additional options for finding the node.

findCommentNodeById

Finds the comment node in the editor by its ID.

Parameters

Collapse all

    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.

getCommentNodesById

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

Parameters

Collapse all

    The ID of the comment nodes to retrieve.

getCommentPosition

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

Parameters

Collapse all

    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.

Returnsboolean

    Whether the key is a comment key.

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.

Returnsboolean

    Whether the node is a comment with the specified ID.

isCommentText

Checks if a given node is a comment text node.

Parameters

Collapse all

    The node to check.

Returnsboolean

    Whether the node is a comment text node.

removeCommentMark

Removes the comment mark from the editor.

unsetCommentNodesById

Unsets comment nodes with the specified ID from the editor.

Parameters

Collapse all

    The ID of the comment nodes to unset.

Components

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

Interface for comment data.

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

Interface for text nodes that can contain comments.

Attributes

Collapse all

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

<CommentProvider>

A jotai provider for comment data.

Props

Collapse all

    Base state type.

    The scope of the provider.

<CommentDeleteButton>

A button component for deleting a comment.

State

Collapse all

    The ID of the active comment.

    The ID of the comment.

    Callback when comment is deleted.

    Function to remove the comment.

    Function to set the active comment ID.

<CommentEditButton>

A button component for editing a comment.

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>

A textarea component for editing a comment.

State

Collapse all

    Function to set the editing value.

    Reference to the textarea element.

    The textarea value.

<CommentNewSubmitButton>

A button component for submitting a new comment.

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>

A textarea component for adding a new comment.

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

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

ReturnsTCommentText | null

    The active comment node, or null if none found.

useCommentAddButton

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

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

    Props for the comment add button.

useCommentItemContentState

A state hook for the comment item content component.

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

A behavior hook for the comment leaf component.

Parameters

Collapse all

    Function to set active comment ID.

    ID of the last comment in the leaf.

Returnsobject

Collapse all

    Props for the comment leaf.

    Click event handler.

useCommentValue

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

ReturnsReact.Ref

    Reference to the textarea element.

useCommentsResolved

A custom hook that returns an array of resolved comments.

ReturnsTComment[]

    Array of resolved comments.

useCommentsShowResolvedButton

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

Returnsobject

Collapse all

    A boolean indicating whether the button is pressed.

    A function to call when the button is clicked.