Yoopta-Editor在Safari浏览器中的工具栏下拉菜单问题解析

问题背景

Yoopta-Editor是一款开源的富文本编辑器组件，近期用户反馈在Safari浏览器中存在一个严重影响使用体验的缺陷：工具栏的所有下拉菜单功能都无法正常工作。具体表现为当用户尝试编辑链接、修改标题样式或执行其他需要下拉菜单的操作时，浮动工具栏会立即关闭，导致编辑功能完全不可用。

问题根源分析

经过技术团队深入调查，发现这个问题与Safari浏览器对事件传播机制的特殊处理有关。具体来说：

1. Safari浏览器在处理e.stopPropagation()方法时与其他浏览器存在差异
2. 当用户点击工具栏下拉菜单时，Safari未能正确阻止事件冒泡
3. 这导致编辑器错误地认为用户点击了编辑器外部区域，从而触发了工具栏的自动关闭机制

解决方案探索

技术社区提出了几种可能的解决方案：

方案一：事件处理优化

建议将原有的e.stopPropagation()替换为更全面的事件处理逻辑：

onClick={(e) => {
  // 确保在焦点变化前捕获选择状态
  e.preventDefault();
  const selected = editor.path.selected;
  const current = editor.path.current;
  editor.setPath({ current: current, selected: selected });
  (e.target as HTMLInputElement).focus();
}}

这种方法通过显式保存和恢复编辑器状态，避免了Safari特殊事件处理机制带来的问题。

方案二：DOM选择状态管理

另一个有效的解决方案是通过维护DOM选择状态来解决：

const [currDomSelection, setDomSelection] = useState<Selection | null>(null);

// 在事件处理中添加工具栏点击检查
const toolbarElement = refs.floating.current;
if (toolbarElement && toolbarElement.contains(document.activeElement)) {
  return;
}

const domSelection = window.getSelection();
if (domSelection?.anchorNode === null && currDomSelection?.anchorNode !== null) {
  return;
}

setDomSelection(domSelection);

这种方法通过显式管理选择状态，确保工具栏在Safari中能保持打开状态。

技术实现建议

对于开发者来说，解决这类浏览器兼容性问题时，建议：

1. 避免过度依赖stopPropagation，特别是在Safari环境中
2. 考虑使用更明确的状态管理来控制UI元素的显示/隐藏
3. 对于富文本编辑器这类复杂组件，维护DOM选择状态是必要的
4. 在Safari中测试时，特别注意事件冒泡和捕获阶段的差异

总结

浏览器兼容性问题是前端开发中的常见挑战，特别是在处理富文本编辑等复杂交互场景时。通过理解不同浏览器的事件处理机制差异，并采用适当的状态管理策略，可以有效解决这类问题。Yoopta-Editor团队通过社区协作，快速定位并解决了Safari中的工具栏问题，为开发者提供了宝贵的经验参考。