Skip to main content

Comments

The comments plugin enables support for adding comments to text as marks.

Installation#

npm install @udecode/plate
# or
npm install @udecode/plate-comments
npm install @udecode/plate-ui-comments

Usage#

  • Select text, then:
    • Click on the comment button to add a comment.
    • You can also 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>
  );
};

Options#

interface CommentsPlugin {
hotkey?: string;
}

Source Code#