---
title: "样式"
description: "设置 Tiptap Compare 扩展渲染的差异建议样式。"
canonical_url: "https://tiptap.zhcndoc.com/compare/api-reference/styling"
---

# 样式

设置 Tiptap Compare 扩展渲染的差异建议样式。

Compare 会使用 CSS 类渲染默认差异 UI。在调用 [`compareDocuments`](https://tiptap.zhcndoc.com/compare/api-reference/commands.md#comparedocuments) 或 [`compareVersions`](https://tiptap.zhcndoc.com/compare/api-reference/commands.md#compareversions) 等命令时，可以通过 `displayOptions` 添加自己的类或属性。

```ts
editor.commands.compareDocuments({
  docA,
  docB,
  displayOptions: {
    attributes: { class: 'my-added-content' },
    replacementAttributes: { class: 'my-removed-content' },
  },
})
```

## Default CSS classes

每条差异建议都会渲染当前文档内容和建议的替换内容。以下类会应用到这些元素。

### Current content

- `.diff-suggestion` — applied to every current-content element.
- `.diff-suggestion--selected` — applied when the suggestion is selected.
- `.diff-suggestion--change-group` — applied when the suggestion contains grouped inline changes.

如果建议来自变更组并包含子变更，子变更会包含以下类：

- `.diff-suggestion-sub-change` — applied to each individual change within a group.
- `.diff-suggestion-sub-change--selected` — applied to a current-content sub-change when its suggestion is selected.

嵌套变更会显示在审阅界面的当前内容一侧，并包含以下类：

- `.diff-suggestion-nested-change` — applied to every nested change.
- `.diff-suggestion-nested-change--inline` — applied when the nested change covers inline content.
- `.diff-suggestion-nested-change--block` — applied when the nested change covers block content.
- `.diff-suggestion-nested-change--selected` — applied when the parent suggestion is selected.

使用 `displayOptions.getNestedChangeAttributes` 为嵌套变更添加属性。返回的 `class` 会追加到这些默认类上。

### Suggested content

- `.diff-suggestion-diff` — applied to every suggested-content element.
- `.diff-suggestion-diff--selected` — applied when the suggestion is selected.
- `.diff-suggestion-diff--change-group` — applied when the suggestion contains grouped inline changes.

If the suggestion is created from a change group and it has sub-changes, the sub-changes contain these classes:

- `.diff-suggestion-diff-sub-change` — applied to each individual suggested-content change within a group.
- `.diff-suggestion-diff-sub-change--selected` — applied to a suggested-content sub-change when its suggestion is selected.

## Example CSS styles

[比较文档指南](https://tiptap.zhcndoc.com/compare/guides/compare-documents.md#style-the-changes)包含可以直接用于 Compare 扩展默认建议的 CSS 样式表示例。

[比较版本指南](https://tiptap.zhcndoc.com/compare/guides/compare-versions.md#style-the-changes)包含一个差异视图样式表，可根据作者使用不同颜色标记变化。

## Custom suggestion rendering

[`renderDecorations`](https://tiptap.zhcndoc.com/compare/api-reference/types.md#custom-decoration-rendering) 选项让你完全控制建议的渲染方式。它接收一个 [DiffSuggestion 对象](https://tiptap.zhcndoc.com/compare/api-reference/types.md#diffsuggestion)，并返回一组 [ProseMirror 装饰](https://prosemirror.net/docs/ref/#view.Decorations)。

```ts
editor.commands.compareDocuments({
  docA,
  docB,
  displayOptions: {
    renderDecorations({ suggestion }) {
      return [
        Decoration.inline(suggestion.range.from, suggestion.range.to, {
          class: 'custom-decoration',
        }),
      ]
    },
  },
})
```

要将自定义装饰与 Compare 扩展显示的默认装饰结合起来，请使用 `defaultRenderDecorations` 选项：

```ts
editor.commands.compareDocuments({
  docA,
  docB,
  displayOptions: {
    renderDecorations({ suggestion, isSelected, defaultRenderDecorations }) {
      return [
        Decoration.inline(suggestion.range.from, suggestion.range.to, {
          class: 'custom-decoration',
        }),
        ...defaultRenderDecorations({
          attributes: isSelected
            ? {
                class: 'custom-selected-class',
              }
            : {},
        }),
      ]
    },
  },
})
```

## Render custom Node Views

如果要为差异建议中的 [Tiptap 节点视图](https://tiptap.zhcndoc.com/editor/extensions/custom-extensions/node-views.md) 应用不同样式，请使用 [`getSuggestionNodeViewContext` 工具](https://tiptap.zhcndoc.com/compare/api-reference/utilities.md#getsuggestionnodeviewcontext)。

该函数会返回建议的相关上下文。详情请参阅[API 参考](https://tiptap.zhcndoc.com/compare/api-reference/utilities.md#getsuggestionnodeviewcontext)。

```tsx
import { getSuggestionNodeViewContext } from '@tiptap-pro/compare'
import Heading from '@tiptap/extension-heading'
import { NodeViewWrapper, ReactNodeViewRenderer } from '@tiptap/react'

const CustomHeading = Heading.extend({
  addNodeView() {
    return ReactNodeViewRenderer(({ decorations }) => {
      const { suggestion, isSelected, isReplacement } = getSuggestionNodeViewContext(decorations)

      return (
        <NodeViewWrapper style={{ position: 'relative' }}>
          {suggestion && (
            <span>
              Suggestion {suggestion.id} is {isSelected ? 'selected' : 'not selected'} and rendered
              in the {isReplacement ? 'replacement' : 'document'}.
            </span>
          )}
        </NodeViewWrapper>
      )
    })
  },
})
```