事件与资源释放
示例中的SkyNoteEditor类型从@skynote/editor导入,宿主提供已经创建的实例与自己的UI回调。
所有下列订阅都返回() => void解绑函数。宿主在卸载、切换Editor实例或关闭相应功能时调用,不依赖垃圾回收解除闭包引用。
常用事件
| 方法 | 回调载荷 | 适合的用途 |
|---|---|---|
onSelectionChange | 无参数;回调中读选区 | 更新选区工具栏,整体/主题选择意图变化也会通知 |
onHistoryChange | 包含canUndo/canRedo的历史状态 | 启用撤销重做按钮 |
onDocumentChange | DocumentChangeSet | 按几何、数据、增删等受影响集合刷新UI |
onCommit | patches, record | 事务提交顺序的正向补丁与操作记录,含撤销/重做/导入 |
onViewportChange | 无参数;读取viewport/viewportSize | 更新导航信息或与视口相关的宿主几何 |
onToolChange | 无参数 | 更新工具按钮状态 |
onReadOnlyChange | boolean | 更新只读入口 |
onLayoutChange | 无参数 | 布局能力变化后的展示刷新 |
onImageLoadChange | 无参数 | 查询图片加载、失败与重试状态 |
onAssetTaskEvent | AssetTaskEvent | 上传/替换/粘贴的开始、结束或拒绝反馈 |
onConnectorDropOnBlank | ConnectorDropEvent | 连线落在空白处后,由宿主提供下一步创建入口 |
ts
export function observeEditor(
editor: SkyNoteEditor<HTMLElement>,
renderSelection: (ids: string[]) => void
): () => void {
const stopSelection = editor.onSelectionChange(() => renderSelection([...editor.selectedNodeIds]));
const stopHistory = editor.onHistoryChange(({ canUndo, canRedo }) => {
console.info('历史可用状态', { canUndo, canRedo });
});
const stopDocument = editor.onDocumentChange((changes) => {
console.info('文档是否整体替换', changes.contentReplaced);
});
return () => {
stopSelection();
stopHistory();
stopDocument();
};
}示例中的日志只说明载荷用途;实际应用把它们替换为自己的渲染、状态更新或持久化调度。
增量变化与整份快照
onDocumentChange按实体类型提供受影响集合,并用contentReplaced表示整份内容替换。订阅者只刷新自己关心的内容。持续编辑时不要每次都调用getNodes()、exportDocument()再深度比较整份文档。
onCommit提供提交补丁和记录,适合追加日志;它不是远程协作或自动保存服务本身。宿主仍需决定写入顺序、失败重试、关闭页面的排空和多标签页协调。
回调的边界
这些事件通知已经发生的变化。不要在文档通知中同步提交新文档命令形成级联;需要派生UI状态时只更新宿主状态,需要另一次用户命令时通过明确的命令入口提交。
异步订阅任务应带取消或代次标记。订阅解绑后,已发出的请求仍可能完成;宿主必须避免旧Editor结果覆盖新页面。
释放清单
- 解绑宿主注册的事件和输入作用域。
- 取消持久化、请求、动画帧或计时器。
- 释放宿主创建的对象URL、临时预览和插件自有资源。
- 调用
editor.destroy()完成最终销毁;暂时转移渲染容器才使用unmount()。