Skip to main content

Comments

The Comments plugin allows users to add comments to text as marks. These comments can include explanations of what the author or editor did or suggests, such as questions about unclear statements, notes on facts or continuity errors, common mistakes, or ideas for expanding a paragraph.

Demo#

To add a comment, select the text and:

  • Click on the comment button to add a comment
  • Alternatively, use the hotkey ⌘+⇧+M
import React from 'react';
import {
  createCommentsPlugin,
  MARK_COMMENT,
  Plate,
  PlateCommentLeaf,
  PlateFloatingComments,
  PlateProvider,
} from '@udecode/plate';
import { basicNodesPlugins } from './basic-nodes/basicNodesPlugins';
import { CommentBalloonToolbar } from './comments/CommentBalloonToolbar';
import { commentsValue } from './comments/constants';
import { MyCommentsProvider } from './comments/MyCommentsProvider';
import { editableProps } from './common/editableProps';
import { plateUI } from './common/plateUI';
import { createMyPlugins, MyValue } from './typescript/plateTypes';

const plugins = createMyPlugins(
  [...basicNodesPlugins, createCommentsPlugin()],
  {
    components: {
      ...plateUI,
      [MARK_COMMENT]: PlateCommentLeaf,
    },
  }
);

export default () => {
  return (
    <PlateProvider plugins={plugins} initialValue={commentsValue}>
      <MyCommentsProvider>
        <Plate<MyValue> editableProps={editableProps}>
          <CommentBalloonToolbar />
        </Plate>

        <PlateFloatingComments />
      </MyCommentsProvider>
    </PlateProvider>
  );
};

Installation#

Follow these steps to integrate the comments plugin into your Plate editor:

  1. Install the required packages:
npm install @udecode/plate
# or
npm install @udecode/plate-comments
npm install @udecode/plate-ui-comments
  1. Import the plugin and add it to your plugin list:
import { createCommentsPlugin, MARK_COMMENT, PlateCommentLeaf } from '@udecode/plate';
const plugins = createPlugins([
// ...otherPlugins,
createCommentsPlugin(),
], {
components: {
...createPlateUI(),
[MARK_COMMENT]: PlateCommentLeaf,
},
});

Options#

interface CommentsPlugin {
hotkey?: string;
}

Source Code#

Edit this page