ProseMirror 编辑器在 Android 上的文本换行问题解析

问题现象

在使用 ProseMirror 构建的富文本编辑器中，当文本同时应用了删除线（line-through）和下划线（underline）样式时，在 Android 设备上会出现一个特殊的文本换行问题：用户在这些文本之间按下回车键时，文本无法正常换行。这个问题在 PC 浏览器和 iOS 设备上表现正常，仅在 Android 设备上出现。

问题根源分析

经过深入排查，发现问题的根源与 CSS 样式设置有关。当开发者为删除线标签（通常是 <s> 或 <del>）设置了 display: inline-flex 样式时，如果该标签内部还包含其他内联元素（如下划线标签 <u>），Android 浏览器的内容可编辑处理机制就会出现异常，导致换行功能失效。

这种问题在以下情况下尤为明显：

1. 文本同时应用了删除线和下划线样式
2. 删除线元素被设置为 inline-flex 显示模式
3. 在 Android 系统的 Chrome 浏览器中使用内置虚拟键盘

技术背景

在 Web 内容可编辑（contentEditable）的实现中，不同浏览器对复杂嵌套内联元素的处理方式存在差异。Android 的 WebView 和 Chrome 浏览器在处理 inline-flex 容器内的文本编辑操作时，与标准桌面浏览器有以下不同：

1. 布局计算差异：inline-flex 在 Android 上可能导致布局计算不准确
2. 光标定位问题：嵌套的格式化标签可能干扰虚拟键盘的光标定位
3. 事件处理机制：Android 对键盘事件的处理与桌面环境不同

解决方案

针对这个问题，推荐以下几种解决方案：

1. 避免使用 inline-flex 布局： 修改删除线元素的 CSS，使用标准的 display: inline 而非 inline-flex。这是最直接有效的解决方案。

2. 自定义键盘事件处理： 为编辑器实现自定义的 Enter 键处理逻辑，覆盖浏览器的默认行为。这可以通过 ProseMirror 的 keymap 插件实现。

3. 样式重构： 考虑使用 CSS 伪元素或文本装饰属性（text-decoration）来实现删除线效果，而不是依赖额外的 HTML 标签。

4. 全面键盘事件绑定： 除了 Enter 键外，还应该为 Backspace 和 Delete 键绑定适当的处理命令，确保编辑行为的连贯性。

最佳实践建议

在开发基于 ProseMirror 的跨平台富文本编辑器时，建议遵循以下原则：

1. 谨慎使用非标准布局：在可编辑内容中避免使用 flex、grid 等现代布局方式
2. 完整的事件处理：为所有关键编辑操作实现自定义命令处理
3. 平台兼容性测试：特别关注移动设备，尤其是 Android 平台的特殊行为
4. 语义化标记：优先使用标准的文本装饰属性而非复杂的 HTML 结构

总结

这个案例展示了 Web 内容可编辑功能在不同平台上的微妙差异。通过理解底层机制并采用适当的解决方案，开发者可以构建出在各种环境下表现一致的富文本编辑体验。对于 ProseMirror 这样的专业编辑器框架，合理配置键盘事件处理和样式策略是确保跨平台兼容性的关键。