Tiptap 中文文档

样式

BetaPilot program

Compare 会使用 CSS 类渲染默认差异 UI。在调用 compareDocuments 或 compareVersions 等命令时，可以通过 displayOptions 添加自己的类或属性。

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

比较文档指南包含可以直接用于 Compare 扩展默认建议的 CSS 样式表示例。

比较版本指南包含一个差异视图样式表，可根据作者使用不同颜色标记变化。

Custom suggestion rendering

renderDecorations 选项让你完全控制建议的渲染方式。它接收一个 DiffSuggestion 对象，并返回一组 ProseMirror 装饰。

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

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

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 节点视图 应用不同样式，请使用 getSuggestionNodeViewContext 工具。

该函数会返回建议的相关上下文。详情请参阅API 参考。

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>
      )
    })
  },
})
Previously类型