Lexical编辑器垂直文本模式下光标移动异常问题解析

在富文本编辑器开发领域，Facebook开源的Lexical项目因其模块化设计和出色的性能表现而备受关注。近期在Lexical v0.28.0版本中发现了一个涉及垂直文本排版时光标行为异常的技术问题，这个问题特别影响东亚语系尤其是日语用户的编辑体验。

问题现象

当编辑器设置为垂直书写模式（writing-mode: vertical-rl）时，在空白段落（仅包含换行符的段落）中进行光标移动操作会出现方向相反的现象。具体表现为：

• 按下右箭头键时，光标向左移动
• 按下左箭头键时，光标反而向右移动

这个异常行为仅出现在空白段落中，当段落包含实际文本内容时，光标移动方向表现正常。值得注意的是，在原生contenteditable元素中不会出现这种现象，说明这是Lexical特有的处理逻辑问题。

技术背景

垂直书写模式是CSS3引入的重要排版特性，特别适用于东亚文字的传统竖排方式。在writing-mode: vertical-rl模式下：

1. 文本从上到下排列
2. 行从右向左排列
3. 默认的inline前进方向变为垂直方向
4. 原本的水平方向概念需要重新映射

Lexical作为现代编辑器框架，其光标控制逻辑需要正确处理这种特殊排版场景下的方向映射关系。

问题根源分析

通过代码追踪发现，问题出在Lexical对空白段落的光标位置计算逻辑上：

1. 对于空白段落，Lexical会生成<p><br></p>这样的DOM结构
2. 在垂直模式下，系统对<br>元素的光标位置判断存在方向映射错误
3. 事件处理层没有针对垂直排版模式做特殊的方向校正
4. 内容存在时的正确处理是因为文本节点提供了明确的位置参照

解决方案设计

要彻底解决这个问题，需要在以下几个层面进行改进：

1. 方向映射层：建立垂直模式下的方向转换矩阵，将物理按键方向正确映射到逻辑移动方向
2. 空白段落处理：对仅含换行符的段落特殊处理，建立虚拟位置参照点
3. 选择范围计算：增强getBoundingClientRect等位置计算API在垂直模式下的兼容性
4. 事件处理优化：在键盘事件处理流程中加入writing-mode状态判断

实现建议

具体到代码层面，建议的修复方案包括：

// 在Selection模块增加方向判断
function getDirectionAwareMovement(editor, isBackward) {
  const writingMode = editor.getRootElement().style.writingMode;
  if (writingMode === 'vertical-rl') {
    return !isBackward; // 方向反转
  }
  return isBackward;
}

// 在DOM转换层处理空白节点
function handleEmptyParagraph(node) {
  if (isVerticalMode) {
    node.setAttribute('data-vertical-empty', 'true');
  }
}

影响评估

该修复将显著改善以下场景的用户体验：

1. 日语文档编辑：传统日文排版大量使用垂直书写
2. 中文古籍数字化：部分古籍需要保持竖排格式
3. 多语言混合编辑：同时包含横排和竖排内容的文档

最佳实践建议

对于开发者处理类似文本方向问题时，建议：

1. 始终在测试用例中包含writing-mode的各种组合
2. 对空白内容状态进行专门测试
3. 考虑使用CSS Logical Properties代替物理方向属性
4. 在编辑器初始化时检测根元素的排版模式

该问题的修复体现了现代编辑器框架对全球化排版需求的支持重要性，也为处理其他文字方向相关的交互问题提供了参考模式。