Lexical 编辑器中的文本节点合并问题解析

在开发基于 Lexical 富文本编辑器的应用时，我们可能会遇到一个典型问题：当启用编辑状态并设置光标位置后，用户输入时会产生大量不必要的 span 元素，而不是在现有文本节点中继续编辑。本文将深入分析这一问题的成因及解决方案。

问题现象

当开发者通过 setEditable(true) 启用编辑状态，并使用 selectEnd() 方法将光标定位到文本末尾后，用户输入时会出现以下异常行为：

• 每个输入字符都会创建一个新的 span 元素
• 文本节点无法正常合并
• 列表项编号显示异常

根本原因分析

经过深入排查，发现问题主要源于自定义文本节点的实现方式：

1. isSimpleText 方法缺失
   自定义文本节点类（如 ExtendedTextNode）继承自 TextNode 时，默认不会继承 isSimpleText() 方法的简单文本判断逻辑。Lexical 内部使用此方法判断节点是否可合并。

2. 文本节点转换逻辑缺陷
   自定义的节点转换（transform）逻辑可能干扰了 Lexical 默认的文本规范化过程，特别是在处理样式应用时。

3. 列表节点实现不完整
   对于有序列表项，若未正确处理编号计算逻辑，会导致列表序号显示异常。

解决方案

1. 完善自定义文本节点实现

对于继承 TextNode 的自定义类，必须显式实现 isSimpleText() 方法：

isSimpleText() {
  return this.__type === 'text' && this.__mode === 0;
}

2. 优化节点转换逻辑

检查并修正自定义的节点转换逻辑，确保：

• 不破坏 Lexical 的默认文本合并机制
• 样式应用不影响节点规范化过程

3. 完整实现列表节点

对于自定义列表项节点，需要：

• 正确计算和更新序号
• 实现必要的节点转换方法
• 处理列表缩进和嵌套逻辑

最佳实践建议

1. 谨慎扩展核心节点
   除非必要，尽量使用 Lexical 提供的原生节点类型。必须扩展时，要完整测试所有相关方法。

2. 充分测试编辑行为
   特别测试以下场景：

• 连续输入
• 复制粘贴
• 列表操作
• 撤销/重做

3. 监控节点规范化
   使用 Lexical 的开发工具观察节点变化，确保规范化过程符合预期。

通过以上分析和解决方案，开发者可以避免 Lexical 编辑器中的文本节点合并问题，构建更稳定可靠的富文本编辑体验。