---
title: "白板"
description: "在白板形状上显示跟踪更改的建议，并接受或拒绝它们。"
canonical_url: "https://tiptap.zhcndoc.com/editor/whiteboard/guides/tracked-changes"
---

# 白板

在白板形状上显示跟踪更改的建议，并接受或拒绝它们。

形状是节点，因此可以像 AI 代理建议的文档内容一样，携带[修订跟踪](https://tiptap.zhcndoc.com/tracked-changes/getting-started/overview.md)建议。白板会在形状上显示这些建议，并可通过修订跟踪命令审核它们。

> **独立产品:**
>
> [修订跟踪](https://tiptap.zhcndoc.com/tracked-changes/getting-started/overview.md) 是独立于 Whiteboard 的 Tiptap 产品，需单独购买。

## 设置编辑器

[安装跟踪更改](https://tiptap.zhcndoc.com/tracked-changes/getting-started/install.md)，并将其添加到白板的编辑器中。将跟踪更改中的 `getSuggestionHTMLAttributes` 作为 `WhiteboardKit` 的 `shapeElementAttributes` 选项传递：

```js
import { Editor } from '@tiptap/core'
import { getSuggestionHTMLAttributes, TrackedChanges } from '@tiptap-pro/extension-tracked-changes'
import { WhiteboardKit } from '@tiptap-pro/extension-whiteboard'

const editor = new Editor({
  element: viewport,
  extensions: [
    WhiteboardKit.configure({ shapeElementAttributes: getSuggestionHTMLAttributes }),
    TrackedChanges,
  ],
})
```

在 React 中，请在组件外部创建配置好的扩展，或使用 `useMemo` 保证只创建一次。参见 [React 白板设置指南](https://tiptap.zhcndoc.com/editor/whiteboard/guides/react.md)。

`shapeElementAttributes` 从形状的节点向每个形状的元素添加属性。使用 `getSuggestionHTMLAttributes`，建议更改的形状元素将获得 `data-suggestion-*` 属性，例如 `data-suggestion-type` 和 `data-suggestion-user`。

跟踪更改以 `enabled: false` 开头。然后直接应用白板上的编辑，并且板会显示形状所带来的建议。

## 显示建议

设置建议根据其元素上的属性更改的形状的样式：

```css
/* A shape that a suggestion adds */
[data-shape][data-suggestion-type='add'] {
  outline: calc(2px / var(--zoom, 1)) dashed #2b9a66;
}

/* A shape that a suggestion deletes */
[data-shape][data-suggestion-type='delete'] {
  opacity: 0.5;
}

/* A shape that a suggestion moves or changes */
[data-shape][data-suggestion-type='attributeChange'] {
  outline: calc(2px / var(--zoom, 1)) dashed #0d74ce;
}
```

接受或拒绝建议后，这些属性会消失。形状文本中的建议与其他文档中的显示方式相同。完整属性列表请参阅[样式](https://tiptap.zhcndoc.com/tracked-changes/api-reference/styling.md)。

## 查看建议

使用 `findSuggestions` 查找建议，并通过 ID 接受或拒绝它们：

```js
import { findSuggestions } from '@tiptap-pro/extension-tracked-changes'

const [suggestion] = findSuggestions(editor)

if (suggestion) {
  editor.commands.acceptSuggestion({ id: suggestion.id })
}
```

添加形状的建议会在 `insertedNodes` 中列出这些形状，例如 `{ type: 'stickyNote' }`。一项建议可以添加多个形状，例如 AI 工具调用一次添加的所有便签；使用同一个 ID 即可接受或拒绝全部形状。

| 建议    | 接受    | 拒绝    |
| ----- | ----- | ----- |
| 添加形状  | 保留形状  | 删除形状  |
| 删除形状  | 删除形状  | 保留形状  |
| 移动形状  | 保留新位置 | 放回形状  |
| 更改其文本 | 保留新文本 | 返回旧文本 |

当被拒绝的建议删除形状时，连接该形状的箭头将保留自由端。评论在协作白板上也有效：所有用户都会看到建议，并且评论适用于任何地方。

## 后续步骤

- 查看[修订跟踪的所有命令](https://tiptap.zhcndoc.com/tracked-changes/api-reference/commands.md)
- 让 AI 代理使用 [Server AI Toolkit](https://tiptap.zhcndoc.com/ai/ai-toolkit/agents/whiteboard.md)
- 了解如何通过 [`shapeElementAttributes`](https://tiptap.zhcndoc.com/editor/whiteboard/api-reference/extensions.md#whiteboardkit) 提交更改建议