Skip to content

事件与资源释放 ​

示例中的SkyNoteEditor类型从@skynote/editor导入,宿主提供已经创建的实例与自己的UI回调。

所有下列订阅都返回() => void解绑函数。宿主在卸载、切换Editor实例或关闭相应功能时调用,不依赖垃圾回收解除闭包引用。

常用事件 ​

方法回调载荷适合的用途
onSelectionChange无参数;回调中读选区更新选区工具栏,整体/主题选择意图变化也会通知
onHistoryChange包含canUndo/canRedo的历史状态启用撤销重做按钮
onDocumentChangeDocumentChangeSet按几何、数据、增删等受影响集合刷新UI
onCommitpatches, record事务提交顺序的正向补丁与操作记录,含撤销/重做/导入
onViewportChange无参数;读取viewport/viewportSize更新导航信息或与视口相关的宿主几何
onToolChange无参数更新工具按钮状态
onReadOnlyChangeboolean更新只读入口
onLayoutChange无参数布局能力变化后的展示刷新
onImageLoadChange无参数查询图片加载、失败与重试状态
onAssetTaskEventAssetTaskEvent上传/替换/粘贴的开始、结束或拒绝反馈
onConnectorDropOnBlankConnectorDropEvent连线落在空白处后,由宿主提供下一步创建入口
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结果覆盖新页面。

释放清单 ​

  1. 解绑宿主注册的事件和输入作用域。
  2. 取消持久化、请求、动画帧或计时器。
  3. 释放宿主创建的对象URL、临时预览和插件自有资源。
  4. 调用editor.destroy()完成最终销毁;暂时转移渲染容器才使用unmount()。

可组合的画布能力,从一个想法开始。