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

问题背景

在使用Milkdown编辑器时，开发者可能会遇到一个常见的错误提示："Context 'schema' not found, do you forget to inject it?"。这个问题通常出现在编辑器被多次挂载和卸载的场景中，特别是在React等前端框架中实现编辑器切换功能时。

问题分析

这个问题的核心在于Milkdown的上下文管理机制。当编辑器被多次初始化时，前一次的上下文可能没有被正确清理，导致后续的编辑器实例无法正确获取所需的上下文对象。

具体表现为：

1. 第一次加载编辑器时工作正常
2. 卸载编辑器后再次加载时出现上下文丢失错误
3. 错误通常发生在尝试获取schemaCtx时

技术原理

Milkdown使用上下文(Context)系统来管理编辑器的各种状态和配置。schemaCtx是存储编辑器Schema的重要上下文，正常情况下应该始终可用。但当编辑器实例被多次创建时，如果前一次的监听器和上下文没有被正确清理，就会导致新实例无法正确初始化。

解决方案

1. 实现清理方法

在自定义的SelectionManager类中添加destroy方法，用于清理所有监听器：

class SelectionManager {
  // ...原有代码...
  
  public destroy() {
    this.selectionListeners = [];
  }
}

2. 在编辑器初始化时调用清理

在编辑器配置阶段，确保每次初始化前都清理前一次的监听器：

.config((ctx) => {
  const selectionListener = ctx.get(selectionCtx.key);
  selectionListener.destroy(); // 清理前一次的监听器
  
  selectionListener.onSelection((selection) => {
    const schema = ctx.get(schemaCtx);
    // ...其他逻辑...
  });
})

最佳实践

1. 生命周期管理：在使用React等框架时，确保在组件卸载时正确清理所有编辑器资源
2. 单例模式：考虑将编辑器实例作为单例管理，避免重复初始化
3. 上下文检查：在获取关键上下文前，可以添加检查逻辑确保上下文已就绪
4. 错误处理：对可能出现的上下文获取错误进行捕获和处理

总结

Milkdown编辑器的上下文系统是其强大功能的基础，但也需要开发者注意正确的生命周期管理。通过实现适当的清理逻辑，可以避免多次初始化导致的上下文丢失问题，确保编辑器的稳定运行。这个问题也提醒我们，在使用任何富文本编辑器时，都需要特别注意资源管理和生命周期控制。