Excalidraw评论功能优化：防止草稿内容丢失的技术实现

在图形协作工具Excalidraw中，用户反馈了一个影响体验的核心问题：当用户在评论框中输入内容时，若不小心点击画布区域，已输入的评论草稿会立即消失且无法恢复。本文将深入分析该问题的技术背景及解决方案。

问题本质分析

该问题属于典型的"非预期状态丢失"场景，主要涉及两个技术层面：

1. UI状态管理：评论框的显示/隐藏状态与内容未建立持久化关联
2. 事件冒泡处理：画布点击事件未考虑文本输入中的特殊情况

在原始实现中，系统采用简单的"点击即关闭"逻辑，没有区分以下情况：

• 空评论框的点击关闭
• 已输入内容的意外关闭

技术解决方案

优化后的实现引入了以下关键机制：

1. 草稿自动保存

采用React的useRef Hook创建评论内容的引用保存：

const draftComment = useRef(null);

在评论框的onChange事件中实时更新引用值，确保内存中始终保存最新内容。

2. 智能关闭判断

改造关闭逻辑为条件判断：

const handleCanvasClick = () => {
  if (draftComment.current && draftComment.current.trim()) {
    // 显示保存提示或保持打开状态
    return;
  }
  // 执行常规关闭
};

3. 状态恢复机制

当重新打开同一元素的评论框时，系统会执行：

useEffect(() => {
  if (isCommentOpen) {
    setCommentText(draftComment.current || '');
  }
}, [isCommentOpen]);

用户体验优化

该改进带来了三个层面的提升：

1. 容错性：防止用户误操作导致内容丢失
2. 可恢复性：支持临时离开后继续编辑
3. 符合直觉：更贴近主流文档工具的交互模式

技术启示

这个案例典型展示了：

• 状态管理需要考虑用户实际场景
• 简单的UI交互可能隐藏复杂的边缘情况
• 引用保存(ref)在临时状态存储中的巧妙应用

Excalidraw团队在发现问题后48小时内即完成修复，体现了对用户体验细节的重视。这种"防错设计"思维值得所有前端开发者借鉴。