Milkdown编辑器中的上下文注入问题分析与解决方案

问题背景

在使用Milkdown编辑器时，开发者遇到了一个典型的上下文注入问题。当尝试在编辑器实例被多次挂载和卸载的场景下，调用ctx.get(schemaCtx)时系统报错提示"Context 'schema' not found"。这个问题特别出现在React组件中多次切换编辑器实例的情况下。

问题分析

该问题的核心在于Milkdown的上下文管理机制。当编辑器实例被销毁后，某些上下文资源没有被正确清理，导致后续实例运行时出现冲突。具体表现为：

1. 第一次加载编辑器工作正常
2. 卸载编辑器后再次加载时出现上下文缺失错误
3. 错误指向schema上下文无法获取

深入分析发现，问题源于自定义的SelectionManager插件保留了旧编辑器实例的监听器引用，这些监听器仍尝试访问已被销毁的上下文资源。

解决方案

针对这个问题，我们采取了以下解决方案：

1. 完善资源清理机制：在SelectionManager类中添加destroy方法，用于清理所有监听器

public destroy() {
  this.selectionListeners = [];
}

2. 在编辑器初始化时执行清理：在编辑器配置阶段主动调用清理方法

.config((ctx) => {
  const selectionListener = ctx.get(selectionCtx.key);
  selectionListener.destroy();
  // 其他配置...
})

技术原理

Milkdown基于ProseMirror构建，采用上下文注入模式管理编辑器状态和插件。当编辑器实例被销毁时，必须确保：

1. 所有插件资源被正确释放
2. 不再保留对旧编辑器上下文的引用
3. 新实例能够获得干净的上下文环境

在React组件中，由于组件可能被多次挂载卸载，这种清理工作尤为重要。SelectionManager保留的监听器会持续尝试访问已销毁的上下文，导致运行时错误。

最佳实践建议

基于此案例，我们总结出以下Milkdown开发最佳实践：

1. 始终实现资源清理：自定义插件必须提供清理方法
2. 注意React生命周期：在组件卸载时确保编辑器资源释放
3. 避免跨实例引用：不要在不同编辑器实例间共享状态
4. 合理使用上下文：只在确保上下文存在时访问它

总结

Milkdown作为一款优秀的编辑器框架，其上下文机制提供了强大的扩展能力，但也要求开发者遵循正确的资源管理规范。通过本案例的分析和解决，我们深入理解了Milkdown的上下文管理机制，并掌握了在多实例场景下的正确使用方法。这对于构建复杂、动态的编辑器应用具有重要意义。