4e:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 4f:T2c22,--- title: Comment docs: - route: https://pro.platejs.org/docs/examples/discussion title: Plus - route: /docs/components/comment-node title: Comment Leaf - route: /docs/components/comment-toolbar-button title: Comment Toolbar Button - route: /docs/components/block-discussion title: Block Discussion --- ## Features - **Text Comments:** Add comments as text marks with inline annotations - **Overlapping Comments:** Support multiple comments on the same text - **Draft Comments:** Create draft comments before finalizing - **State Tracking:** Track comment state and user interactions - **Discussion Integration:** Works with discussion plugin for complete collaboration ## Kit Usage ### Installation The fastest way to add comment functionality is with the `CommentKit`, which includes pre-configured `commentPlugin` and related components along with their [Plate UI](/docs/installation/plate-ui) components. - [`CommentLeaf`](/docs/components/comment-node): Renders comment text marks - [`BlockDiscussion`](/docs/components/block-discussion): Renders discussion UI with comments integration ### Add Kit ```tsx import { createPlateEditor } from 'platejs/react'; import { CommentKit } from '@/components/editor/plugins/comment-kit'; const editor = createPlateEditor({ plugins: [ // ...otherPlugins, ...CommentKit, ], }); ``` ## Manual Usage ### Installation ```bash npm install @platejs/comment ``` ### Extend Comment Plugin Create the comment plugin with extended configuration for state management: ```tsx import { type ExtendConfig, type Path, isSlateString } from 'platejs'; import { type BaseCommentConfig, BaseCommentPlugin, getDraftCommentKey, } from '@platejs/comment'; import { toTPlatePlugin } from 'platejs/react'; import { CommentLeaf } from '@/components/ui/comment-node'; type CommentConfig = ExtendConfig< BaseCommentConfig, { activeId: string | null; commentingBlock: Path | null; hoverId: string | null; } >; export const commentPlugin = toTPlatePlugin( BaseCommentPlugin, ({ editor }) => ({ options: { activeId: null, commentingBlock: null, hoverId: null, }, render: { node: CommentLeaf, }, }) ); ``` - `options.activeId`: Currently active comment ID for visual highlighting - `options.commentingBlock`: Path of the block currently being commented - `options.hoverId`: Currently hovered comment ID for hover effects - `render.node`: Assigns [`CommentLeaf`](/docs/components/comment-node) to render comment text marks ### Add Click Handler Add click handling to manage active comment state: ```tsx export const commentPlugin = toTPlatePlugin( BaseCommentPlugin, ({ editor }) => ({ handlers: { // Set active comment when clicking on comment marks onClick: ({ api, event, setOption, type }) => { let leaf = event.target as HTMLElement; let isSet = false; const unsetActiveComment = () => { setOption('activeId', null); isSet = true; }; if (!isSlateString(leaf)) unsetActiveComment(); while (leaf.parentElement) { if (leaf.classList.contains(`slate-${type}`)) { const commentsEntry = api.comment.node(); if (!commentsEntry) { unsetActiveComment(); break; } const id = api.comment.nodeId(commentsEntry[0]); setOption('activeId', id ?? null); isSet = true; break; } leaf = leaf.parentElement; } if (!isSet) unsetActiveComment(); }, }, // ... previous options and render }) ); ``` The click handler tracks which comment is currently active: - **Detects comment clicks**: Traverses DOM to find comment elements - **Sets active state**: Updates `activeId` when clicking on comments - **Clears state**: Unsets `activeId` when clicking outside comments - **Visual feedback**: Enables hover/active styling in comment components ### Extend Transforms Extend the `setDraft` transform for enhanced functionality: ```tsx export const commentPlugin = toTPlatePlugin( BaseCommentPlugin, ({ editor }) => ({ // ... previous configuration }) ) .extendTransforms( ({ editor, setOption, tf: { comment: { setDraft }, }, }) => ({ setDraft: () => { if (editor.api.isCollapsed()) { editor.tf.select(editor.api.block()![1]); } setDraft(); editor.tf.collapse(); setOption('activeId', getDraftCommentKey()); setOption('commentingBlock', editor.selection!.focus.path.slice(0, 1)); }, }) ) .configure({ node: { component: CommentLeaf }, shortcuts: { setDraft: { keys: 'mod+shift+m' }, }, }); ``` ### Add Toolbar Button You can add [`CommentToolbarButton`](/docs/components/comment-toolbar-button) to your [Toolbar](/docs/toolbar) to add comments on selected text. ### Add Plugins ```tsx import { createPlateEditor } from 'platejs/react'; const editor = createPlateEditor({ plugins: [ // ...otherPlugins, commentPlugin, ], }); ``` ### Discussion Integration The comment plugin works with the [discussion plugin](/docs/discussion) for complete collaboration: ```tsx import { discussionPlugin } from '@/components/editor/plugins/discussion-kit'; const editor = createPlateEditor({ plugins: [ // ...otherPlugins, discussionPlugin, commentPlugin, ], }); ``` ## Keyboard Shortcuts Add a comment on the selected text. ## Plate Plus ## Plugins ### `CommentPlugin` Plugin for creating and managing text comments with state tracking and discussion integration. Currently active comment ID for visual highlighting. Used internally to track state. Path of the block currently being commented on. Currently hovered comment ID for hover effects. ## API ### `api.comment.has` Checks if a comment with the given ID exists in the editor. Options containing the comment ID to check. Whether the comment exists. ### `api.comment.node` Gets a comment node entry. Options for finding the node. The comment node entry if found. ### `api.comment.nodeId` Gets the ID of a comment from a leaf node. The comment leaf node. The comment ID if found. ### `api.comment.nodes` Gets all comment node entries matching the options. Options for finding the nodes. Array of comment node entries. ## Transforms ### `tf.comment.removeMark` Removes the comment mark from the current selection or a specified location. ### `tf.comment.setDraft` Sets a draft comment mark at the current selection. Options for setting the draft comment. ### `tf.comment.unsetMark` Unsets comment nodes with the specified ID from the editor. Options for unsetting comment marks. The comment ID to unset. When true, removes all AI comments at once. - **Default:** `false` ## Utilities ### `getCommentCount` Gets the count of non-draft comments in a comment node. The comment node. The count of comments. ### `getCommentKey` Generates a comment key based on the provided ID. The ID of the comment. The generated comment key. ### `getCommentKeyId` Extracts the comment ID from a comment key. The comment key. The extracted comment ID. ### `getCommentKeys` Returns an array of comment keys present in the given node. The node to check for comment keys. Array of comment keys. ### `getDraftCommentKey` Gets the key used for draft comments. The draft comment key. ### `isCommentKey` Checks if a given key is a comment key. The key to check. Whether the key is a comment key. ### `isCommentNodeById` Checks if a given node is a comment with the specified ID. The node to check. The ID of the comment. Whether the node is a comment with the specified ID. ## Types ### `TCommentText` Text nodes that can contain comments. Whether this text node contains comments. Comment data keyed by comment ID. Multiple comments can exist in one text node. 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L4e",null,{"files":[{"path":"../../content/docs/(plugins)/(collaboration)/comment.mdx","content":"$4f","type":"registry:file","target":"content/docs/plate/(plugins)/(collaboration)/comment.mdx"}],"className":"h-[70svh] min-h-80"}]]}]