富文本评论功能设计

前言

Open-Idea 的评论功能已经上线一个星期了，接下来给大家分享下我是如何设计以及实现文档的评论功能的，如果有问题欢迎大家交流探讨，目前评论支持的功能如下：创建评论，创建之后评论引用内容会自动高亮、一块内容支持创建多个评论、评论编辑功能、评论删除功能、评论回复功能。

做调研

在实现的过程中遇到的比较困难的就是如何实现同一块内容支持多个评论并且在选中这块内容或光标落在这块内容的时候需要选中这块内容所有的评论，我分别调研了飞书和 Tiptap 的官方插件 Comments，发现当同一块内容有多个评论时他们的处理方式也是不一样的。

Tiptap

可以看到 Tiptap 是使用嵌套的 span 标签来支持同一块内容有多个评论的，其中每个 span 标签都有一个 data-thread-id。

飞书

从下面的图例可以看出飞书对于同一块内容有多个评论是通过在 span 标签中添加多个comment-id 来实现的。

我的方案

这里我介绍下我的实现方式：当选中一块内容生成评论时，我们会先判断这块内容是否已经有 data-thread-id ，如果没有，我们会在这块内容上生成一个 data-thread-id ，那后续在这块内容再创建评论使用的 data-thread-id 还是之前生成的，不会重新创建，这样就可以实现选中内容快高亮所有评论了。而且还有一个好处就是在删除这块内容的时候，我们就可以删除这块内容的所有评论了。

下面是评论的类结构设计：

typescript 复制代码

export interface IdeaComment {  
    id: number;  
    pid: number;  
    docxId?: number;  
    threadId: string;  
    commentId: string;  
    user?: User;  
    quotedContent: string;  
    content: string;  
    replies: IdeaComment[];  
    createAt: string;  
    updatedAt?: string;  
}

其中，pid 如果不为 null，则说明该评论为回复，threadId 和 commentId 都是前端使用 uuid 生成的，threadId 的值即为 data-thread-id。

另外，在交互的过程中还有一些点需要注意：

一个评论的所有编辑状态取消时评论回复输入框才能显示，
多个评论之间编辑和回复不互斥，单个评论编辑和回复互斥
多个评论之间编辑和编辑不互斥，单个评论编辑和编辑不互斥，就同时可以对一个主评论下多个回复进行编辑

最后

Open-Idea 在线体验地址为 www.openbytecode.com/open-idea， Open-Idea 所有功能都是免费使用的，而且不限文档数量，感兴趣的朋友快来试试吧。