LiveBlocks与Lexical编辑器集成中的评论解析样式问题分析

问题背景

在将LiveBlocks与Lexical富文本编辑器集成的过程中，开发人员发现了一个关于评论解析后样式残留的问题。当用户解析(Resolve)一个评论时，虽然评论内容被正确解析，但编辑器中的评论高亮样式却仍然保留，直到页面刷新才会消失。这种不一致的行为影响了用户体验，需要从技术层面进行深入分析。

技术原理分析

LiveBlocks为Lexical编辑器提供了实时协作功能，其中评论系统是其重要组成部分。当集成LiveBlocks时，开发者通常会在Lexical编辑器中使用以下组件结构：

<RoomProvider id="dev-123">
  <LiveblocksPlugin>
    <ClientSideSuspense fallback={null}>
      <ThreadsOverlay />
    </ClientSideSuspense>
  </LiveblocksPlugin>
</RoomProvider>

在底层实现上，LiveBlocks维护了一个线程缓存系统。当使用useThreads钩子获取线程时，这些线程会被缓存在内存中。LiveblocksPlugin组件只渲染缓存中存在线程的标记和注释。

问题根源

问题的核心在于线程缓存的管理机制：

1. 当线程被删除时，会从缓存中完全移除
2. 但当线程被解析(Resolve)时，缓存中的线程不会被删除，只是更新了线程的resolved属性状态
3. 编辑器继续显示这些已解析线程的高亮标记，因为它们在缓存中仍然存在

这种设计导致了视觉上的不一致性：虽然业务逻辑上线程已被解析，但UI表现上仍然保留了评论标记。

解决方案演进

开发团队考虑了多种解决方案：

1. 数据属性标记方案：为已解析的线程添加data-resolved属性，允许通过CSS控制其显示样式

   .lb-lexical-thread-mark[data-resolved] {
     all: unset; 
   }
   

   这种方案保持了API的简洁性，开发者可以灵活控制解析后线程的显示方式。

2. 线程属性控制方案：通过向LiveblocksPlugin传递threads属性，明确指定哪些线程应该显示标记，将显示逻辑的控制权完全交给开发者。

3. 显式配置方案：添加showResolved属性，让开发者能够配置是否显示已解析线程的标记。

经过深入讨论和参考主流产品(如Notion、Google Docs)的处理方式，团队最终决定采用最符合用户预期的方案：默认隐藏已解析线程的标记。

最终实现

在LiveBlocks 2.7.1版本中，团队修复了这个问题，实现了以下行为：

1. 已解析的线程默认不会在编辑器中显示标记
2. 这一行为适用于LiveblocksPlugin及其相关的FloatingThreads和AnchoredThreads组件
3. 保持了API的简洁性，开发者无需额外配置

这种处理方式符合大多数协作编辑场景的用户预期，与主流产品的行为保持一致。未来版本可能会考虑增加配置选项，允许开发者根据需要调整这一行为。

开发者建议

对于使用LiveBlocks与Lexical集成的开发者，建议：

1. 升级到2.7.1或更高版本以获得此修复
2. 了解默认行为变更：已解析线程将不再显示标记
3. 如有特殊需求，可以关注后续版本可能提供的配置选项

这个问题修复展示了LiveBlocks团队对用户体验细节的关注，也体现了在实时协作编辑器中处理评论状态的技术考量。通过合理的缓存管理和UI渲染策略，确保了功能逻辑与视觉表现的一致性。