Yopta-Editor在Safari浏览器中的工具栏下拉菜单问题分析与解决方案

问题背景

在富文本编辑器Yopta-Editor的使用过程中，开发团队发现了一个特定于Safari浏览器的严重问题。当用户在Safari中使用编辑器时，工具栏的所有下拉菜单功能都无法正常工作。具体表现为：虽然可以选择文本，但尝试编辑链接、更改文本为标题或执行其他操作时，浮动工具栏会立即关闭，导致编辑器在Safari中基本无法使用。

问题分析

这个问题主要源于Safari浏览器对事件处理机制的特殊实现方式。经过开发团队的深入分析，发现以下几个关键点：

1. 事件传播机制差异：Safari在处理事件传播（event propagation）时与其他浏览器有细微但重要的区别，特别是在处理e.stopPropagation()方法时表现不同。

2. 焦点管理问题：当用户点击工具栏下拉菜单时，Safari的焦点管理行为导致工具栏意外关闭。

3. 选择状态保持：在操作过程中，编辑器的选择状态未能正确保持，这也是导致工具栏关闭的原因之一。

解决方案探索

开发团队和社区贡献者提出了几种可能的解决方案：

1. 事件处理改进：建议将简单的e.stopPropagation()替换为更全面的事件处理逻辑，包括显式地保持当前选择状态和手动管理焦点。

2. 选择状态跟踪：通过引入状态管理来跟踪当前的DOM选择状态，可以更可靠地在各种浏览器中保持编辑上下文。

3. 焦点控制优化：添加对工具栏元素焦点的显式检查，防止因焦点变化导致工具栏意外关闭。

最终解决方案

经过多次尝试和验证，最终确定的解决方案结合了选择状态跟踪和焦点控制优化。核心代码如下：

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

// 获取当前DOM选择
const domSelection = window.getSelection();

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

// 检查选择状态变化
if (domSelection?.anchorNode === null && currDomSelection?.anchorNode !== null) {
  return;
}

setDomSelection(domSelection);

这个解决方案的关键在于：

1. 显式跟踪DOM选择状态的变化
2. 在工具栏获得焦点时防止意外关闭
3. 正确处理选择状态为空的情况

经验总结

这个案例为我们提供了宝贵的跨浏览器开发经验：

1. 浏览器兼容性测试：即使是现代浏览器，在事件处理和DOM操作方面也可能存在细微但重要的差异。

2. 状态管理的重要性：在复杂的UI组件中，显式管理状态比依赖隐式行为更可靠。

3. 社区协作的价值：开源社区的集体智慧往往能提供意想不到的解决方案。

对于开发者来说，这个案例也提醒我们，在处理富文本编辑等复杂交互时，需要特别注意不同浏览器在事件处理和焦点管理方面的差异，通过更健壮的状态管理和显式的控制逻辑来确保跨浏览器的一致性。