TipTap Diff 建议扩展
TipTap 扩展用于将内容与建议的修订进行内在比较,包括交互式控制.
思想/目标
此扩展提供了一种在 TipTap 编辑器内可视化和与建议修改交互的方法. 它弥合了静态diff浏览器与可操作内容编辑之间的空隙,允许用户直接在编辑器中评价,接受或拒绝建议.
内容
使用大小写
- AI 授权书写援助: 显示和管理来自AI写作工具的建议.
- 协作内容审查: 为编辑建议和同行审查工作流程提供便利.
- 翻译和本地化:提出并综合翻译建议.
特征
- 📝 交互式 Diff 可视化: 与接受/拒绝控制进行内置比较
- 🎯 自定义动作: 从简单的按钮到复杂的审批工作流程
- 💬 背景评论: 在建议中添加解释和推理
- 🎨 无头设计:没有内置风格——从快速原型到完全有品牌的经验
- 🔧 可扩展工具栏: 自定义行动面板和互动要素
- 🎭 CSS 变量: 有暗模式支持的可主题样式系统
- 🚀 框架不可知论:放行TipTap的框架-不可知论架构
- 📦 类型脚本准备: 完整类型定义,以增进开发者的经验
- ⚡ 副作用钩: 与外部系统和工作流程相结合
HTML 结构
扩展生成以下 HTML 结构 :
<span data-diff-suggestion data-diff-suggestion-id="unique-id" data-diff-suggestion-comment="reason for suggestion">
<span data-diff-suggestion-old>Original text</span>
<span data-diff-suggestion-new>Suggested text</span>
</span>
安装
npm install @buddhima_a/tiptap-diff-suggestions
使用量
基本设置
import { Editor } from '@tiptap/core';
import { DiffSuggestion } from '@buddhima_a/tiptap-diff-suggestions';
const editor = new Editor({
extensions: [
DiffSuggestion,
// ... other extensions
],
});
无头建筑
遵循TipTap的无头建筑,这个扩展包括没有内置的造型. 对于快速原型,使用包含的样本CSS. 用于生产,杠杆CSS变量和自定义型号. 参考 样式 更多信息
插入 Diff 建议
editor.commands.insertDiffSuggestion({
id: 'unique-suggestion-123',
comment: 'Suggested improvement for clarity'
});
使用 Diff 建议 HTML 设置编辑器内容
editor.commands.setContent(`
<p> This is some random text before suggestion
<span data-diff-suggestion data-diff-suggestion-id="unique-suggestion-123" data-diff-suggestion-comment="Suggested improvement for clarity">
<span data-diff-suggestion-old>The old text</span>
<span data-diff-suggestion-new>The improved text</span>
</span> the text follows suggestions.
`);
有副作用的高级配置
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);
},
}),
],
});
自定义行为覆盖
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()- 拒绝文件中的所有建议
选项
interface DiffSuggestionOptions {
HTMLAttributes: Record<string, any>;
className?: string;
showButtons?: boolean;
buttons?: {
accept?: string;
reject?: string;
};
onAccept?: (meta: DiffSuggestionMeta) => void;
onReject?: (meta: DiffSuggestionMeta) => void;
handleAccept?: Command;
handleReject?: Command;
}
属性
interface DiffSuggestionAttributes {
id: string;
comment?: string;
}
Meta 对象
当使用副作用回调时,您会收到一个元对象:
interface DiffSuggestionMeta {
id: string;
comment?: string;
accepted: boolean;
originalText: string;
suggestedText: string;
}
样式
该扩展遵循了TipTap的无头方法 - 默认不包括样式,使您完全控制外观.
快速启动样本样式
关于快速原型化和发展:
<link rel="stylesheet" href="node_modules/@buddhima_a/tiptap-diff-suggestions/sample.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]- 拒绝按钮
自定义样式示例
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,您可以直接与之合作:
// Assuming you have diff HTML from your diff algorithm
const diffHTML = `
<span data-diff-suggestion data-diff-suggestion-id="123" data-diff-suggestion-comment="Grammar fix">
<span data-diff-suggestion-old>teh quick</span>
<span data-diff-suggestion-new>the quick</span>
</span>
`;
// Insert the HTML directly
editor.commands.insertContent(diffHTML);
程序建议创建
// Create suggestion programmatically
editor.commands.insertDiffSuggestion({
id: Date.now().toString(),
comment: 'AI suggested improvement'
});
关于额外的使用情景和执行样本,请参考存储库中的实例.
发展
大楼
npm run build
类型检查
npm run type-check
监视模式
npm run dev
许可证
麻省理工学院
捐款
欢迎捐款! 请随意提交拉力请求.