# @buddhima\_a/tiptap-diff-suggestions 中文文档
规范地址：https://npmcn.com/package/%40buddhima_a/tiptap-diff-suggestions/
版本：0\.1\.0-beta
npm 元数据更新时间：2025-07-13T01:01:52.217Z
中文译文更新时间：2026-11-08T18:15:10.584Z
软件包许可：MIT
本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。
原始 npm 页面：https://www.npmjs.com/package/%40buddhima_a/tiptap-diff-suggestions
原文对照：https://npmcn.com/package/%40buddhima_a/tiptap-diff-suggestions/?lang=original
项目主页：https://github.com/bsachinthana/tiptap-diff-suggestions#readme
源码仓库：https://github.com/bsachinthana/tiptap-diff-suggestions
## 关键信息（来自 npm 元数据）
- 包体积（解压后）：82.5 kB，18 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：@tiptap/core ^2\.0\.0，@tiptap/pm ^2\.0\.0
- 首次发布：2025-07-13T01:01:51.694Z
- 最新版本发布：2025-07-13T01:01:51.957Z
- 近 30 天下载量：9176（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：1（近 12 个月 0 个）
## 中文简介
TipTap 可操作内含内容建议、比较和diff审查工作流程的扩展
## 安装
```sh
npm install @buddhima_a/tiptap-diff-suggestions
```
也可以使用：`pnpm add @buddhima_a/tiptap-diff-suggestions`、`yarn add @buddhima_a/tiptap-diff-suggestions`、`bun add @buddhima_a/tiptap-diff-suggestions`
## README
# TipTap Diff 建议扩展
TipTap 扩展用于将内容与建议的修订进行内在比较,包括交互式控制.
## 思想/目标
此扩展提供了一种在 TipTap 编辑器内可视化和与建议修改交互的方法. 它弥合了静态diff浏览器与可操作内容编辑之间的空隙,允许用户直接在编辑器中评价,接受或拒绝建议.
> ## 内容
>
> - [使用大小写](https://npmcn.com/package/%40buddhima_a/tiptap-diff-suggestions/#readme-use-cases)
>
> - [特征](https://npmcn.com/package/%40buddhima_a/tiptap-diff-suggestions/#readme-features)
>
> - [HTML 元素结构](https://npmcn.com/package/%40buddhima_a/tiptap-diff-suggestions/#readme-html-structure)
>
> - [安装](https://npmcn.com/package/%40buddhima_a/tiptap-diff-suggestions/#readme-installation)
>
> - [使用量](https://npmcn.com/package/%40buddhima_a/tiptap-diff-suggestions/#readme-usage)
>
> - [基本设置](https://npmcn.com/package/%40buddhima_a/tiptap-diff-suggestions/#readme-basic-setup)
> - [插入 diff 建议](https://npmcn.com/package/%40buddhima_a/tiptap-diff-suggestions/#readme-inserting-diff-suggestions)
> - [设置带有 diff 建议的编辑器内容](https://npmcn.com/package/%40buddhima_a/tiptap-diff-suggestions/#readme-setting-editor-content-with-diff-suggestion-html)
> - [有副作用的高级配置](https://npmcn.com/package/%40buddhima_a/tiptap-diff-suggestions/#readme-advanced-configuration-with-side-effects)
> - [自定义动作覆盖](https://npmcn.com/package/%40buddhima_a/tiptap-diff-suggestions/#readme-custom-behavior-override)
> - [API 参考](https://npmcn.com/package/%40buddhima_a/tiptap-diff-suggestions/#readme-api-reference)
>
> - [样式](https://npmcn.com/package/%40buddhima_a/tiptap-diff-suggestions/#readme-styling)
>
> - [实例](https://npmcn.com/package/%40buddhima_a/tiptap-diff-suggestions/#readme-examples)
>
> - [发展](https://npmcn.com/package/%40buddhima_a/tiptap-diff-suggestions/#readme-development)
>
> - [捐款](https://npmcn.com/package/%40buddhima_a/tiptap-diff-suggestions/#readme-contributing)
>
## 使用大小写
- **AI 授权书写援助**: 显示和管理来自AI写作工具的建议.
- **协作内容审查**: 为编辑建议和同行审查工作流程提供便利.
- **翻译和本地化**:提出并综合翻译建议.
## 特征
- 📝 **交互式 Diff 可视化**: 与接受/拒绝控制进行内置比较
- 🎯 **自定义动作**: 从简单的按钮到复杂的审批工作流程
- 💬 **背景评论**: 在建议中添加解释和推理
- 🎨 **无头设计**:没有内置风格——从快速原型到完全有品牌的经验
- 🔧 **可扩展工具栏**: 自定义行动面板和互动要素
- 🎭 **CSS 变量**: 有暗模式支持的可主题样式系统
- 🚀 **框架不可知论**:放行TipTap的框架-不可知论架构
- 📦 **类型脚本准备**: 完整类型定义,以增进开发者的经验
- ⚡ **副作用钩**: 与外部系统和工作流程相结合
## HTML 结构
扩展生成以下 HTML 结构 :
```html
Original text
Suggested text
```
## 安装
```bash
npm install @buddhima_a/tiptap-diff-suggestions
```
## 使用量
### 基本设置
```typescript
import { Editor } from '@tiptap/core';
import { DiffSuggestion } from '@buddhima_a/tiptap-diff-suggestions';
const editor = new Editor({
extensions: [
DiffSuggestion,
// ... other extensions
],
});
```
> #### 无头建筑
>
> 遵循TipTap的无头建筑,这个扩展包括没有内置的造型. 对于快速原型,使用包含的样本CSS. 用于生产,杠杆CSS变量和自定义型号. 参考 [样式](https://npmcn.com/package/%40buddhima_a/tiptap-diff-suggestions/#readme-styling) 更多信息
### 插入 Diff 建议
```typescript
editor.commands.insertDiffSuggestion({
id: 'unique-suggestion-123',
comment: 'Suggested improvement for clarity'
});
```
### 使用 Diff 建议 HTML 设置编辑器内容
```typescript
editor.commands.setContent(`
This is some random text before suggestion
The old text
The improved text
the text follows suggestions.
`);
```
### 有副作用的高级配置
```typescript
import { DiffSuggestion } from '@buddhima_a/tiptap-diff-suggestions';
const editor = new Editor({
extensions: [
DiffSuggestion.configure({
HTMLAttributes: {
class: 'my-custom-diff',
},
className: 'custom-diff-wrapper',
showButtons: true,
buttons: {
accept: 'Accept',
reject: 'Reject',
},
// Side-effect callbacks
onAccept: (meta) => {
console.log('Accepted suggestion:', meta);
sidebar.highlight(meta.id);
},
onReject: (meta) => {
console.log('Rejected suggestion:', meta);
sidebar.remove(meta.id);
},
}),
],
});
```
### 自定义行为覆盖
```typescript
DiffSuggestion.configure({
// Full logic override
handleAccept: ({ tr, dispatch }) => {
dispatch(tr.insertText("Custom Accept Logic"));
return true;
},
handleReject: ({ tr, dispatch }) => {
dispatch(tr.insertText("Custom Reject Logic"));
return true;
},
});
```
## API 参考
### 图标
- `insertDiffSuggestion(options)` - 插入diff建议
- `acceptDiffSuggestion(id?)` - 接受具体的建议(或目前的选择)
- `rejectDiffSuggestion(id?)` - 拒绝具体的建议(或目前的选择)
- `acceptAllDiffSuggestions()` - 接受文件中的所有建议
- `rejectAllDiffSuggestions()` - 拒绝文件中的所有建议
### 选项
```typescript
interface DiffSuggestionOptions {
HTMLAttributes: Record;
className?: string;
showButtons?: boolean;
buttons?: {
accept?: string;
reject?: string;
};
onAccept?: (meta: DiffSuggestionMeta) => void;
onReject?: (meta: DiffSuggestionMeta) => void;
handleAccept?: Command;
handleReject?: Command;
}
```
### 属性
```typescript
interface DiffSuggestionAttributes {
id: string;
comment?: string;
}
```
### Meta 对象
当使用副作用回调时,您会收到一个元对象:
```typescript
interface DiffSuggestionMeta {
id: string;
comment?: string;
accepted: boolean;
originalText: string;
suggestedText: string;
}
```
## 样式
该扩展遵循了TipTap的无头方法 - 默认不包括样式,使您完全控制外观.
### 快速启动样本样式
关于快速原型化和发展:
```html
```
### CSS 变量
样本CSS包括CSS变量以方便主题:
```css
:root {
--diff-suggestion-border: #3b82f6;
--diff-suggestion-bg: rgba(59, 130, 246, 0.1);
--diff-old-bg: rgba(239, 68, 68, 0.2);
--diff-new-bg: rgba(34, 197, 94, 0.2);
--diff-accept-btn: #10b981;
--diff-reject-btn: #ef4444;
--diff-toolbar-bg: white;
--diff-toolbar-shadow: rgba(0, 0, 0, 0.1);
}
/* Dark mode variables are also included */
[data-theme="dark"] {
--diff-toolbar-bg: #1f2937;
--diff-toolbar-shadow: rgba(0, 0, 0, 0.3);
/* ... more dark mode variables */
}
```
### CSS 密钥选择器
瞄准这些选择器用于自定义样式 :
- `span[data-diff-suggestion]` - 主要集装箱
- `span[data-diff-suggestion-old]` - 原文样式
- `span[data-diff-suggestion-new]` - 建议的文本格式
- `.diff-suggestion-action-container` - 动作按钮容器
- `[data-diff-suggestion-toolbar-accept]` - 接受按钮
- `[data-diff-suggestion-toolbar-reject]` - 拒绝按钮
### 自定义样式示例
```css
span[data-diff-suggestion] {
border: 2px solid var(--diff-suggestion-border, #3b82f6);
border-radius: 8px;
padding: 4px 8px;
background: var(--diff-suggestion-bg, rgba(59, 130, 246, 0.1));
}
[data-diff-suggestion-toolbar-accept] {
background-color: var(--diff-accept-btn, #10b981);
color: white;
padding: 4px 8px;
border-radius: 4px;
border: none;
cursor: pointer;
}
```
## 实例
### 使用 Raw HTML 工作
由于扩展期望在指定结构中HTML,您可以直接与之合作:
```typescript
// Assuming you have diff HTML from your diff algorithm
const diffHTML = `
teh quick
the quick
`;
// Insert the HTML directly
editor.commands.insertContent(diffHTML);
```
### 程序建议创建
```typescript
// Create suggestion programmatically
editor.commands.insertDiffSuggestion({
id: Date.now().toString(),
comment: 'AI suggested improvement'
});
```
关于额外的使用情景和执行样本,请参考存储库中的实例.
## 发展
### 大楼
```bash
npm run build
```
### 类型检查
```bash
npm run type-check
```
### 监视模式
```bash
npm run dev
```
## 许可证
麻省理工学院
## 捐款
欢迎捐款! 请随意提交拉力请求.
## 常见问题
### @buddhima\_a/tiptap-diff-suggestions 是什么？
TipTap 可操作内含内容建议、比较和diff审查工作流程的扩展
### 如何安装 @buddhima\_a/tiptap-diff-suggestions？
在项目目录运行 npm install @buddhima\_a/tiptap-diff-suggestions，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@tiptap/core（^2\.0\.0）、@tiptap/pm（^2\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。
### @buddhima\_a/tiptap-diff-suggestions 支持 TypeScript 吗？
支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。
### @buddhima\_a/tiptap-diff-suggestions 支持 ESM 还是 CommonJS？
以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。
### @buddhima\_a/tiptap-diff-suggestions 可以商用吗？
@buddhima\_a/tiptap-diff-suggestions 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。
### @buddhima\_a/tiptap-diff-suggestions 的下载量有多少？
根据 npm 官方下载统计，@buddhima\_a/tiptap-diff-suggestions 在 2026/10/09 – 2026/11/07 这 30 天内被下载 9,176 次，日均约 306 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。
### @buddhima\_a/tiptap-diff-suggestions 还在维护吗？
最新版本 0\.1\.0-beta 发布于 2025/07/13（1\.3 年前）；至今共发布 1 个版本，其中过去 12 个月发布了 0 个；首次发布于 2025/07/13。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。