评论功能

PreviousNext
评论标记组件评论工具栏按钮区块讨论
Files
components/demo.tsx
'use client';

import * as React from 'react';

import { Plate, usePlateEditor } from 'platejs/react';

import { EditorKit } from '@/components/editor/editor-kit';
import { Editor, EditorContainer } from '@/components/ui/editor';

import { DEMO_VALUES } from './values/demo-values';

export default function Demo({ id }: { id: string }) {
  const editor = usePlateEditor({
    plugins: EditorKit,
    value: DEMO_VALUES[id],
  });

  return (
    <Plate editor={editor}>
      <EditorContainer variant="demo">
        <Editor />
      </EditorContainer>
    </Plate>
  );
}
Adding and displaying comments within content.
discussion-demo
discussion-demo

功能特性

  • 以文本标记形式添加评论
  • 支持重叠评论
  • 支持撤销/恢复解决和删除操作

安装

pnpm add @platejs/comment

使用方法

import { commentPlugin } from '@/components/editor/plugins/comment-plugin';
import { discussionPlugin } from '@/components/editor/plugins/discussion-plugin';
 
const editor = createPlateEditor({
  plugins: [
    // ...其他插件
    discussionPlugin,
    commentPlugin,
  ],
});

评论插件需与讨论插件配合使用以提供完整的讨论系统。讨论插件负责管理讨论界面和用户交互层。示例中提供了两个插件的完整源码。

快捷键

KeyDescription
Cmd + Shift + M

为选中文本添加评论

示例

Plate UI

参考上方预览组件。

Plate Plus

comments
comments

插件

CommentPlugin

API接口

tf.comment.removeMark

从编辑器中移除评论标记。

tf.comment.setDraft

在当前选区设置草稿评论标记。

tf.comment.unsetMark

从编辑器中移除指定ID的评论节点。

Parameters

Collapse all

    要移除的评论节点ID

api.comment.has

检查指定ID的评论是否存在。

Parameters

Collapse all

    要检查的评论ID

Returnsboolean

Collapse all

    评论是否存在

api.comment.node

获取评论节点entry。

OptionsEditorNodesOptions & { id?: string; isDraft?: boolean }

Collapse all

    查找节点的配置选项

ReturnsNodeEntry<TCommentText> | undefined

Collapse all

    找到的评论节点entry（如存在）

api.comment.nodeId

从leaf节点获取评论ID。

Parameters

Collapse all

    评论leaf节点

Returnsstring | undefined

Collapse all

    找到的评论ID（如存在）

api.comment.nodes

获取所有匹配条件的评论节点entry。

OptionsEditorNodesOptions & { id?: string; isDraft?: boolean }

Collapse all

    查找节点的配置选项

ReturnsNodeEntry<TCommentText>[]

Collapse all

    评论节点entry数组

getCommentCount

获取评论节点中的非草稿评论数量。

Parameters

Collapse all

    评论节点

getCommentKey

根据ID生成评论key。

Parameters

Collapse all

    评论ID

getCommentKeyId

从评论key中提取评论ID。

Parameters

Collapse all

    评论key

getCommentKeys

返回节点中存在的所有评论key数组。

Parameters

Collapse all

    要检查的节点

getDraftCommentKey

获取草稿评论使用的key。

isCommentKey

检查给定key是否为评论key。

Parameters

Collapse all

    要检查的key

Returnsboolean

Collapse all

    是否为评论key

isCommentNodeById

检查给定节点是否为指定ID的评论。

Parameters

Collapse all

    要检查的节点

    评论ID

Returnsboolean

Collapse all

    是否为指定ID的评论节点

类型定义

TCommentText

可包含评论的文本节点接口。

Attributes

Collapse all

    是否为评论节点

    评论ID标识。单个文本节点可包含多个评论。

Comment讨论