Tiptap Based Richtext Diff

基于 Tiptap 的富文本差异对比工具，支持文本内容和格式变化的可视化对比，以及文档评注功能。

功能特性

文档对比

• 三种差异类型显示：
  • 🟢 新增内容（绿色下划线）
  • 🔴 删除内容（红色删除线）
  • 🟡 格式变化（黄色下划线）
• 字符级别对比：精确到每个字符的差异检测
• 格式保留：对比结果保留原有的文本格式（加粗、斜体、下划线）
• 空段落支持：正确处理和显示空行

评注功能

• 在版本1文档中选中文本添加评注
• 评注文本以蓝色高亮显示
• 右侧评注列表管理
• 点击评注可定位到对应文本
• 评注不影响文档对比结果

技术栈

• Tiptap - 现代化的富文本编辑器框架
• Vite - 快速的前端构建工具
• 原生 JavaScript - 无额外框架依赖

快速开始

安装依赖

npm install

启动开发服务器

npm run dev

访问 http://localhost:5174 查看应用

构建生产版本

npm run build

使用说明

1. 版本1标签页：显示原始文档（只读），支持添加评注
2. 版本2标签页：可编辑的文档副本
3. 对比标签页：显示两个版本的差异

添加评注

1. 在版本1中选中要评注的文本
2. 点击出现的"添加评注"按钮
3. 在右侧输入评注内容
4. 点击"确认"保存

查看差异

1. 在版本2中编辑文档
2. 点击"对比"标签查看差异
3. 差异会以不同颜色高亮显示

项目结构

TiptapDemo/
├── index.html        # 主页面
├── main.js          # 主逻辑和编辑器初始化
├── diff.js          # 差异算法实现
├── comment.js       # 评注系统实现
├── case_exp.md      # 测试用例文档
└── requirements.md  # 需求文档

算法说明

文档展平

将 Tiptap 的 JSON 文档结构展平为字符数组，每个字符携带格式信息。

差异检测

1. 使用最长公共子序列（LCS）算法进行基础差异检测
2. 识别连续的删除和新增操作，判断是否为格式变化
3. 生成包含差异类型的结果数组

渲染策略

• 保持原有文档结构（段落）
• 在字符级别应用差异标记
• 使用 CSS 类实现不同的高亮效果

限制说明

• 目前只支持段落（paragraph）节点的对比
• 不支持列表、表格等复杂结构
• 评注功能仅在版本1中可用

开发者

该项目由 Claude 和用户共同开发。

🤖 Generated with Claude Code

Co-Authored-By: Claude noreply@anthropic.com