Lexical编辑器中的只读属性赋值错误分析与解决方案

问题背景

在使用Lexical编辑器(v0.20.0版本)时，开发者在启用自动补全功能后，进行文本格式设置、输入和撤销操作时遇到了一个运行时错误。错误信息显示系统尝试修改一个只读属性_cachedNodes，这属于JavaScript中的TypeError。

错误现象

当用户按照以下步骤操作时会出现问题：

1. 在编辑器中启用自动补全功能
2. 选择文本格式(如加粗)
3. 输入"test"并接受自动补全建议
4. 执行撤销操作

此时控制台会抛出错误：

Uncaught TypeError: Cannot assign to read only property '_cachedNodes' of object '#<RangeSelection>'

技术分析

这个错误的根本原因是Lexical编辑器在内部状态管理时，尝试修改一个已经被冻结(frozen)的RangeSelection对象。在JavaScript中，当对象被冻结后，其所有属性都会变为只读状态，任何修改尝试都会导致TypeError。

具体来说，错误发生在撤销操作时，编辑器尝试更新选择状态，但传入的RangeSelection对象是从前一个状态中获取的，而这个对象已经被冻结。正确的做法应该是先创建该选择对象的副本，然后再进行修改。

解决方案

根据Lexical核心开发者的建议，正确的处理方式应该是：

1. 在需要修改选择状态时，不要直接使用从历史状态中获取的RangeSelection对象
2. 使用selection.clone()方法创建选择对象的可写副本
3. 对副本进行必要的修改
4. 最后使用$setSelection()方法更新编辑器的选择状态

这种模式确保了不会尝试修改冻结对象，同时也保持了状态管理的正确性。

最佳实践

对于Lexical插件开发者来说，在处理编辑器状态时应该注意：

• 始终假设从历史状态中获取的对象可能是冻结的
• 在修改任何从状态中获取的对象前，先创建其副本
• 特别注意选择(RangeSelection)等核心对象的状态管理
• 在插件开发中，对可能涉及状态修改的操作进行防御性编程

总结

这个错误揭示了Lexical编辑器内部状态管理的一个重要原则：历史状态中的对象可能被冻结，直接修改它们会导致运行时错误。通过创建对象副本再进行修改，可以避免这类问题，确保编辑器的稳定运行。对于开发者来说，理解这一机制有助于编写更健壮的Lexical插件和应用。