Tiptap React 多实例扩展共享问题解析与解决方案

问题背景

在使用Tiptap编辑器时，开发者可能会遇到一个特殊的问题：当在React应用中创建多个编辑器实例时，不同实例之间会意外共享扩展配置。具体表现为，一个实例中注册的扩展会被自动应用到其他实例中，即使这些实例并没有显式地配置这些扩展。

问题本质

这个问题源于JavaScript数组的引用特性。在Tiptap的实现中，核心扩展(coreExtensions)是一个数组，当开发者直接对这个数组进行操作时，实际上是在修改原始数组的引用。这导致所有后续创建的编辑器实例都会继承之前实例对核心扩展数组的修改。

技术细节分析

在React组件中，当使用useEditor钩子创建多个编辑器实例时，每个实例都会接收一个扩展配置数组。如果开发者直接修改传入的扩展数组（如向核心扩展数组中添加新扩展），而不是创建新的数组副本，就会导致所有实例共享相同的扩展配置。

解决方案

正确的做法是在修改扩展配置前，先创建数组的浅拷贝。这样可以确保每个编辑器实例都有自己独立的扩展配置，不会相互影响。

// 错误做法：直接修改原始数组
const extensions = coreExtensions;

// 正确做法：创建数组副本
const extensions = [...coreExtensions];

最佳实践建议

1. 始终创建新数组：在修改任何扩展配置前，先创建数组副本
2. 使用不可变数据：考虑使用immer等库来帮助管理不可变状态
3. 组件隔离：确保每个编辑器组件都有自己独立的扩展配置
4. 测试验证：编写测试用例验证多实例的扩展隔离性

总结

理解JavaScript中引用类型的工作机制对于正确使用Tiptap这样的富文本编辑器至关重要。通过创建数组副本来隔离不同编辑器实例的扩展配置，可以避免意外的共享行为，确保每个编辑器实例都能按照预期工作。