Comments

Add comments to text as marks.

Comment LeafComment Toolbar ButtonComments Popover
Loading...
Files
components/demo.tsx
'use client';

import React from 'react';

import { Plate } from '@udecode/plate-common/react';

import { editorPlugins } from '@/components/editor/plugins/editor-plugins';
import { useCreateEditor } from '@/components/editor/use-create-editor';
import { Editor, EditorContainer } from '@/components/plate-ui/editor';

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

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

  return (
    <Plate editor={editor}>
      <EditorContainer variant="demo">
        <Editor />
      </EditorContainer>
    </Plate>
  );
}

功能

  • 将文本注释添加为标记。
  • 注释可以包含解释、建议、问题、笔记或内容改进的想法。
  • 通过选择文本并使用注释按钮或快捷键 Cmd+Shift+M 添加注释。

Installation

npm install @udecode/plate-comments

Usage

import { CommentsPlugin } from '@udecode/plate-comments/react';
 
const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    CommentsPlugin,
  ],
});

键盘快捷键

KeyDescription
Cmd + Shift + M

在选中的文本上添加注释。

插件

CommentsPlugin

Options

Collapse all

    新注释的文本。

    当前用户的信息。

    通过 ID 获取用户的函数。

    通过 ID 获取注释的函数。

    当前活动的注释。

API

editor.tf.insert.comment

插入新的注释标记。

editor.api.comment.updateComment

更新现有注释。

editor.api.comment.addRawComment

添加新的原始注释。

editor.api.comment.addComment

添加新注释。

editor.api.comment.removeComment

删除注释。

editor.api.comment.resetNewCommentValue

重置新注释的值。

CommentStoreState

State

Collapse all

    注释的唯一 ID。

    表示与此注释关联的菜单当前是否打开的标志。

    此注释当前正在编辑的值。如果没有正在进行的编辑，此值为 null。

findCommentNode

在编辑器中查找注释节点。

Parameters

Collapse all

    编辑器实例。

    查找节点的附加选项。

findCommentNodeById

通过 ID 在编辑器中查找注释节点。

Parameters

Collapse all

    编辑器实例。

    要查找的注释节点的 ID。

getCommentCount

获取注释节点中的注释数量。

Parameters

Collapse all

    注释节点。

getCommentKey

根据提供的 ID 生成注释键。

Parameters

Collapse all

    注释的 ID。

getCommentKeyId

从注释键中提取注释 ID。

Parameters

Collapse all

    注释键。

getCommentKeys

返回给定节点中存在的注释键数组。

Parameters

Collapse all

    要检查注释键的节点。

getCommentNodeEntries

返回编辑器中注释节点的节点entry数组。

Parameters

Collapse all

    编辑器实例。

getCommentNodesById

返回编辑器中具有特定 ID 的注释节点的节点entry数组。

Parameters

Collapse all

    编辑器实例。

    要检索的注释节点的 ID。

getCommentPosition

计算注释节点相对于编辑器的位置。

Parameters

Collapse all

    编辑器实例。

    要计算位置的注释节点。

getCommentUrl

生成带有特定注释 ID 查询参数的 URL。

Parameters

Collapse all

    注释的 ID。

getElementAbsolutePosition

计算 HTML 元素相对于文档的绝对位置。

Parameters

Collapse all

    要计算绝对位置的 HTML 元素。

isCommentKey

检查给定的键是否是注释键。

Parameters

Collapse all

    要检查的键。

isCommentNodeById

检查给定节点是否是具有指定 ID 的注释。

Parameters

Collapse all

    要检查的节点。

    注释的 ID。

isCommentText

检查给定节点是否是注释文本节点。

Parameters

Collapse all

    要检查的节点。

Returns

Collapse all

    如果节点是注释文本节点则返回 true。

removeCommentMark

从编辑器中删除注释标记。

Parameters

Collapse all

    编辑器实例。

unsetCommentNodesById

从编辑器中取消设置指定 ID 的注释节点。

Parameters

Collapse all

    编辑器实例。

    要取消设置的注释节点的 ID。

CommentUser

表示可以发表注释的用户的接口。

Parameters

Collapse all

    用户的唯一 ID。

    用户的名称。

    用户头像的 URL。

TComment

Attributes

Collapse all

    注释的唯一 ID。

    注释的 Slate 值。

    注释创建的时间戳。

    • 默认值： Date.now()

    注释作者的 ID。

    回复的父注释的 ID。

    注释是否已解决。

TCommentText

Attributes

Collapse all

    表示这是否是一个注释。单个文本节点中可以存在多个注释。

API 组件

CommentProvider

注释数据的 jotai 提供者。

Props

Collapse all

    扩展 CommentStoreState。

    提供者的作用域。

CommentDeleteButton

用于删除注释的按钮组件。

State

Collapse all

    活动注释的 ID。

    编辑器实例。

    注释的 ID。

    注释被删除时调用的函数。

    删除注释的函数。

    设置活动注释 ID 的函数。

CommentEditButton

用于编辑注释的按钮组件。

State

Collapse all

    设置菜单打开状态的函数。

    注释对象。

    设置编辑值的函数。

CommentEditCancelButton

用于取消编辑注释的按钮组件。

CommentEditSaveButton

用于保存编辑注释的按钮组件。

State

Collapse all

    编辑值的值。

    设置编辑值的函数。

    注释的 ID。

    注释更新时调用的函数。

    更新注释的函数。

    注释的值。

CommentEditTextarea

用于编辑注释的文本区域组件。

State

Collapse all

    设置编辑值的函数。

    文本区域的引用。

    文本区域的值。

CommentNewSubmitButton

用于提交新注释的按钮组件。

State

Collapse all

    正在编辑的注释文本。

    重置新注释值的函数。

    添加注释的函数。

    注释是否是回复。

    提交按钮的文本。

    注释添加时调用的函数。

    活动注释的 ID。

    注释对象。

    编辑的注释的值。

CommentNewTextarea

用于添加新注释的文本区域组件。

State

Collapse all

    文本区域的引用。

    文本区域的占位符。

    文本区域的值。

    设置新值的函数。

CommentResolveButton

用于解决/取消解决注释的按钮组件。

CommentUserName

用于显示注释用户名称的 div 组件。

CommentsPositioner

用于在编辑器中定位注释的 div 组件。

State

Collapse all

    活动注释的 ID。

    表示注释当前位置的对象（顶部和左侧坐标）。

useActiveCommentNode

基于活动注释 ID 检索活动注释节点的自定义钩子。

Returns

    • 如果存在活动注释 ID，则返回相应的注释节点。

    • 如果没有活动注释 ID 或找不到注释节点，则返回 null。

useCommentAddButton

提供向选定文本添加注释标记并将焦点设置到注释文本区域的功能的自定义钩子。

Returns

Collapse all

useCommentItemContentState

注释项内容组件的状态钩子。

Returns

Collapse all

    注释对象。

    表示注释是否是回复注释的布尔值。

    注释的文本内容。

    与注释关联的用户。

    当前用户的 ID。

    正在编辑的注释的值。

    表示注释是否由当前用户创作的布尔值。

useCommentLeaf

注释叶子组件的行为钩子。

Parameters

Collapse all

    设置活动注释 ID 的函数。

    叶子中最后一个注释的 ID。

Returns

Collapse all

useCommentValue

聚焦并选择文本区域内文本的自定义钩子。

Returns

Collapse all

    文本区域元素的引用。

useCommentsResolved

返回已解决注释数组的自定义钩子。

Returns

Collapse all

    已解决注释的数组。

useCommentsShowResolvedButton

返回用于显示已解决注释的按钮组件属性的自定义钩子。

Returns

Collapse all

ComboboxCursor Overlay