Blocksuite项目中使用AffineEditorContainer的正确方式

Blocksuite是一个开源的协作式编辑器框架，AffineEditorContainer作为其核心组件之一，在使用过程中需要注意一些关键点以避免常见错误。

常见错误分析

在Blocksuite项目中使用AffineEditorContainer时，开发者可能会遇到两种典型错误：

1. 非法构造函数错误：当直接实例化AffineEditorContainer而不进行必要初始化时，会抛出"Illegal constructor"错误。

2. 属性访问错误：当组件未正确初始化文档模型时，尝试访问slots或root属性会导致"Cannot read properties of undefined"错误。

解决方案

要正确使用AffineEditorContainer，必须遵循以下步骤：

1. 初始化效果系统：在创建编辑器实例前，必须先加载并初始化Blocksuite的效果系统。

2. 创建文档模型：必须为编辑器提供有效的文档模型实例。

3. 正确挂载组件：确保编辑器被正确添加到DOM中。

完整示例代码

import {
  AffineEditorContainer,
  createEmptyDoc
} from "@blocksuite/presets";
import { effects as blocksEffects } from "@blocksuite/blocks/effects";
import { effects as presetsEffects } from "@blocksuite/presets/effects";

// 初始化效果系统
blocksEffects();
presetsEffects();

// 创建编辑器实例
const editor = new AffineEditorContainer();

// 创建并初始化文档模型
const doc = createEmptyDoc().init();

// 为编辑器设置文档
editor.doc = doc;

// 将编辑器添加到DOM
document.body.appendChild(editor);

关键点说明

1. 效果系统初始化：Blocksuite的效果系统提供了编辑器运行所需的各种功能模块，必须在创建编辑器实例前初始化。

2. 文档模型：文档模型(doc)是编辑器的核心数据层，负责管理文档内容、协作状态等。createEmptyDoc()创建的是一个空文档模板，init()方法完成实际初始化。

3. 生命周期管理：确保在组件挂载到DOM前完成所有必要的初始化工作，避免出现属性访问错误。

最佳实践

1. 建议将编辑器初始化逻辑封装成独立函数或类，便于复用和管理。

2. 对于复杂应用，考虑使用状态管理工具来管理编辑器实例和文档模型。

3. 在生产环境中，应该添加错误处理逻辑，优雅地处理初始化失败等情况。

通过遵循上述指导原则，开发者可以避免Blocksuite编辑器初始化过程中的常见问题，构建稳定可靠的协作编辑应用。