比较文档版本

npm install @tiptap-pro/extension-snapshot-compare

const provider = new TiptapCollabProvider({
  // ...
  user: 'your user identifier' // 必填！我们使用用户标识符来优化 diffs，因此提供它非常重要。
})

const editor = new Editor({
  // ...
  extensions: [
    // ...
    SnapshotCompare.configure({
      provider,
    }),
  ],
})

SnapshotCompare.configure({
  mapDiffToDecorations: ({ diff, tr, editor, defaultMapDiffToDecorations }) => {
    if (diff.type === 'inline-insert') {
      // 返回 ProseMirror 装饰或 null
      return Decoration.inline(
        diff.from,
        diff.to,
        {
          class: 'diff',
          style: {
            backgroundColor: diff.attribution.color.backgroundColor,
          },
        },
        // 将 diff 作为装饰的规格传递，这对于 `extractAttributeChanges` 是必需的
        { diff },
      )
    }

    // 回退到默认映射
    return defaultMapDiffToDecorations({
      diff,
      tr,
      editor,
      attributes: {
        // 为装饰添加自定义属性
        'data-tiptap-user-id': myUserIdMapping[diff.attribution.userId],
      },
    })
  },
})

if (editor.storage.snapshotCompare.isPreviewing) {
  // diff 视图当前处于激活状态
}

editor.storage.snapshotCompare.diffs

editor.chain().compareVersions({
  fromVersion: 1,
})

const colorMapping = new Map([
  ['user-1', '#ff0000'],
  ['user-2', '#00ff00'],
  ['user-3', '#0000ff'],
])

editor.chain().compareVersions({
  fromVersion: 1,
  toVersion: 3,
  hydrateUserData: ({ userId }) => {
    return {
      color: {
        backgroundColor: colorMapping.get(userId),
      },
    }
  },
})

editor.storage.snapshotCompare.diffs[0].attribution.color.backgroundColor // '#ff0000'

editor.chain().compareVersions({
  fromVersion: 1,
  toVersion: 3,
  onCompare: (ctx) => {
    if (ctx.error) {
      // 处理 diff 过程中的错误
      console.error(ctx.error)
      return
    }

    // 过滤 diffs 以仅显示特定用户的更改
    const diffsToDisplay = ctx.diffSet.filter((diff) => diff.attribution.userId === 'user-1')

    editor.commands.showDiff(ctx.tr, { diffs: diffsToDisplay })
  },
})

// 这将显示在编辑器中记录的更改跟踪变换的变更
editor.commands.showDiff(tr)

// 这将仅显示由 ID 为 'user-1' 的用户所做的 diffs
const diffsToDisplay = tr.toDiff().filter((diff) => diff.attribution.userId === 'user-1')

editor.commands.showDiff(tr, { diffs: diffsToDisplay })

// 这将隐藏 diff 视图并恢复之前的内容
editor.commands.hideDiff()

/* 当没有用户信息时，退回到红色和绿色的颜色 */

/* 样式插入的文本 */
[data-diff-type='inline-insert'],
[data-diff-type='inline-update'],
[data-diff-type='block-insert'] {
  background-color: green;
}

/* 样式删除的文本 */
[data-diff-type='inline-delete'],
[data-diff-type='block-delete'] {
  background-color: red;
  text-decoration: line-through;
}

/* 为删除内容重置粗体/strong 样式 */
strong {
  [data-diff-type='inline-delete'],
  [data-diff-type='block-delete'] {
    font-weight: normal;
  }
}

/* 为删除内容重置斜体/em 样式 */
em {
  [data-diff-type='inline-delete'],
  [data-diff-type='block-delete'] {
    font-style: normal;
  }
}

/* 为删除内容重置代码/code 样式 */
code {
  [data-diff-type='inline-delete'],
  [data-diff-type='block-delete'] {
    font-family: sans-serif;
  }
}

/* 确保删除内容内的标记样式正常工作 */
[data-diff-type='inline-delete'],
[data-diff-type='block-delete'] {
  strong {
    font-weight: bold;
  }
  em {
    font-style: italic;
  }
  code {
    font-family: monospace;
  }
}

/* 带用户归属的 diffs 样式 */
[data-diff-user-id] {
  position: relative;
}

/* 用于显示用户名的提示信息 */
[data-diff-user-id]::before {
  content: attr(data-diff-user-id);
  position: absolute;
  visibility: hidden;
}

[data-diff-user-id]:hover::before {
  visibility: visible;
}

import { extractAttributeChanges } from '@tiptap-pro/extension-snapshot-compare'

const Heading = BaseHeading.extend({
  addNodeView() {
    return ReactNodeViewRenderer(({ node, decorations }) => {
      const { before, after, isDiffing } = extractAttributeChanges(decorations)

      return (
        <NodeViewWrapper style={{ position: 'relative' }}>
          {isDiffing && before.level !== after.level && (
            <span
              style={{
                position: 'absolute',
                right: '100%',
                fontSize: '14px',
                color: '#999',
                backgroundColor: '#f0f0f070',
              }}
              // 显示级别属性的变化
            >
              #<s>{before.level}</s>
              {after.level}
            </span>
          )}
          <NodeViewContent as={`h${node.attrs.level ?? 1}`} />
        </NodeViewWrapper>
      )
    })
  },
})

const diffsToDisplay = diffSet.filter((diff) => diff.attribution.userId === 'user-1')

// 在编辑器中显示过滤后的 diffs
editor.commands.showDiff(tr, { diffs: diffsToDisplay })

declare module '@tiptap-pro/extension-snapshot-compare' {
  interface Attribution {
    userName: string
  }
}

declare module '@tiptap/core' {
  interface Commands<ReturnType> {
    snapshotCompare: {
      /**
       * 给定更改跟踪变换，在编辑器内显示 diff
       */
      showDiff: (tr: ChangeTrackingTransform, options?: { diffs?: DiffSet }) => ReturnType
      /**
       * 隐藏 diff 并恢复之前的内容
       */
      hideDiff: () => ReturnType
      /**
       * 比较两个版本并将 diff 渲染到编辑器中
       */
      compareVersions: <
        T extends Pick<Attribution, 'color'> & Record<string, any> = Pick<Attribution, 'color'> &
          Record<string, any>,
      >(options: {
        /**
         * 开始 diff 的版本
         */
        fromVersion: number
        /**
         * 结束 diff 的版本
         * 如果未提供，将使用最新快照
         */
        toVersion?: number
        /**
         * 允许为每个用户的更改添加上下文数据
         */
        hydrateUserData?: (context: {
          /**
           * 事件的类型
           */
          type: 'added' | 'removed'
          /**
           * 操作此内容的 userId
           */
          userId: string | undefined
          /**
           * 内容的 yjs 标识符
           */
          id?: y.ID
        }) => T
        /**
         * 如果提供，允许自定义渲染 diffs 到编辑器的行为。
         * @note 默认行为是立即显示 diff。
         */
        onCompare?: (
          context:
            | {
                error?: undefined
                /**
                 * 编辑器实例
                 */
                editor: Editor
                /**
                 * 带有归属元数据的变换所有更改
                 */
                tr: ChangeTrackingTransform<Attribution & T>
                /**
                 * 作为 diffs 数组表示的更改
                 */
                diffSet: DiffSet<Attribution & T>
              }
            | {
                error: Error
              },
        ) => void
        /**
         * 详细记录 diffing 过程以帮助追踪错误
         */
        enableDebugging?: boolean
      }) => ReturnType
    }
  }
}

export type SnapshotCompareOptions = {
  /**
   * tiptap 提供者实例。这对于扩展示计算 diffs 是必需的，但不是必需的以显示它们。
   * 也可以传递 TiptapCollabProvider 实例。
   */
  provider: TiptapCollabProvider | null
  /**
   * 这允许你控制将 diff 映射到装饰以显示该 diff 内容的方式
   */
  mapDiffToDecorations?: (options: {
    /**
     * 要映射到装饰的 diff
     */
    diff: Diff
    /**
     * 编辑器实例
     */
    editor: Editor
    /**
     * 更改跟踪变换
     */
    tr: ChangeTrackingTransform
    /**
     * 将 diff 映射到装饰的默认实现
     */
    defaultMapDiffToDecorations: typeof defaultMapDiffToDecorations
  }) => ReturnType<typeof defaultMapDiffToDecorations>
}

export type SnapshotCompareStorageInactive = {
  /**
   * diff 视图当前是否处于激活状态
   */
  isPreviewing: false
  /**
   * diff 视图应用之前的内容
   */
  previousContent: null
  /**
   * 已应用的更改跟踪变换
   * 因为 diff 视图没有激活，它当前是空的
   */
  diffs: DiffSet
  /**
   * 已应用的更改跟踪变换
   */
  tr: null
}

export type SnapshotCompareStorageActive = {
  /**
   * diff 视图当前是否处于激活状态
   */
  isPreviewing: true
  /**
   * diff 视图应用之前的内容
   */
  previousContent: JSONContent
  /**
   * 已应用的更改跟踪变换
   */
  diffs: DiffSet
  /**
   * 已应用的更改跟踪变换
   */
  tr: ChangeTrackingTransform
}

export type SnapshotCompareStorage = SnapshotCompareStorageInactive | SnapshotCompareStorageActive