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.
#
DemoTo 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> ); };
#
InstallationFollow these steps to integrate the comments plugin into your Plate editor:
- Install the required packages:
- npm
- Yarn
- Import the plugin and add it to your plugin list: