MDX-Editor 中 JSX 节点克隆问题的分析与解决

MDX-Editor 是一个基于 Lexical 框架构建的富文本编辑器，专门用于处理 MDX 格式的内容。在最新版本中，开发者报告了一个与 JSX 节点克隆相关的错误，本文将深入分析这个问题及其解决方案。

问题现象

当开发者在 MDX-Editor 中使用 JSX 功能时，控制台会抛出以下错误信息：

Error: $cloneWithProperties: LexicalJsxNode.clone(node) (with type 'jsx') did not return a node with the same key, make sure to specify node.__key as the last argument to the constructor

这个错误表明在克隆 JSX 节点时，系统无法保持节点的唯一标识符（key）一致性，导致编辑器无法正确处理 JSX 节点。

问题根源

经过代码审查，发现问题出在 LexicalJsxNode.tsx 文件的第 35 行。原始代码使用了 structuredClone 方法来深度复制节点的 __mdastNode 属性：

return new LexicalJsxNode(structuredClone(node.__mdastNode))

这种实现方式存在两个主要问题：

1. 深度克隆会创建一个全新的对象，丢失了原始节点的关键元数据
2. 没有传递节点的 __key 属性，导致克隆后的节点无法与原始节点保持标识一致性

解决方案

正确的做法应该是直接使用原始节点的 __mdastNode 和 __key 属性来创建新节点：

return new LexicalJsxNode(node.__mdastNode, node.__key)

这种修改确保了：

• 新节点与原始节点共享相同的 AST 结构
• 保持了节点的唯一标识符一致性
• 符合 Lexical 框架对节点克隆的预期行为

技术背景

在 Lexical 编辑框架中，每个节点都必须有一个唯一的 __key 标识符。这个标识符用于：

1. 虚拟 DOM 的高效比对和更新
2. 维护编辑器状态的一致性
3. 支持撤销/重做等历史操作

当节点被克隆时，必须确保新节点继承原始节点的关键属性，特别是 __key。否则会导致编辑器无法正确追踪节点变化，进而引发各种异常行为。

影响范围

这个问题主要影响以下场景：

• 在编辑器中使用自定义 JSX 组件
• 执行复制粘贴操作涉及 JSX 节点
• 使用撤销/重做功能时包含 JSX 节点修改

最佳实践

对于基于 Lexical 开发自定义节点的开发者，应当注意：

1. 在节点克隆时始终传递原始节点的 __key
2. 避免不必要的深度克隆，除非确实需要完全独立的副本
3. 确保自定义节点实现完整的序列化/反序列化逻辑
4. 在节点构造函数中正确处理所有必需的属性

总结

MDX-Editor 3.11.5 版本已经修复了这个 JSX 节点克隆问题。开发者现在可以正常使用 JSX 功能而不会遇到节点标识符错误。这个案例也提醒我们，在使用现代编辑器框架时，理解其内部节点管理系统的工作原理至关重要，特别是在处理自定义节点类型时。