保存白板场景、标题与预览。编辑、重命名、选中动作和重新渲染各由宿主显式接入。
@quirekit/extension-whiteboard · AGPL-3.0-only
编辑器适用范围
层次：共享文档能力
| 编辑器 | 状态 | 所需装配与边界 |
|---|---|---|
| Classic | 需适配 | ClassicWhiteboard — 共享扩展只定义内容与宿主端口。使用下列 Classic 适配入口接入工作区和产品交互，不要同时安装共享扩展与其同名适配实现。 |
| Block | 直接支持 | createBlockEditorPreset — createBlockEditor 默认预设已装配此能力。通过 preset 中对应子项配置；图形编辑使用预设注入的工作区，宿主仍负责保存和资源。不要重复安装同名扩展。 |
“直接支持”指已有上述产品装配；具体交互、宿主服务和格式支持仍有各自条件。状态与接入规则。许可独立显示。
接入
pnpm add @quirekit/extension-whiteboard@alpha
在创建 Editor 时放入 extensions。挂载容器、视图和保存由宿主提供，见快速开始。
import { Whiteboard } from '@quirekit/extension-whiteboard'
安装时按包声明选择兼容版本，外部可用版本以分发源为准。本站使用工作区 Alpha；许可标签来自入口所属包，使用条件见支持与许可。
按编辑器接入
以下片段沿用已挂载的宿主元素 element，宿主负责容器尺寸与保存；退出页面时调用 instance.destroy()。已有预设装配的能力不要再重复追加；需要宿主端口的入口应先完成下方配置。
Classic · 需适配
共享扩展只定义内容与宿主端口。使用下列 Classic 适配入口接入工作区和产品交互，不要同时安装共享扩展与其同名适配实现。
ClassicWhiteboardimport { createClassicEditor } from '@quirekit/classic-editor'
import '@quirekit/classic-editor/styles.css'
import { ClassicWhiteboard } from '@quirekit/classic-whiteboard'
const instance = createClassicEditor({
element,
extensions: [ClassicWhiteboard],
})Block · 直接支持
createBlockEditor 默认预设已装配此能力。通过 preset 中对应子项配置；图形编辑使用预设注入的工作区，宿主仍负责保存和资源。不要重复安装同名扩展。
createBlockEditorPresetimport { createBlockEditor } from '@quirekit/block-editor'
import '@quirekit/block-editor/styles.css'
const instance = createBlockEditor({
element,
content: { type: 'doc', content: [{ type: 'paragraph' }] },
})配置
下面是扩展自身的默认选项。预设可以覆盖这些值；它们不等于当前文档属性。配置方法见配置插件。
open
打开捕获目标的编辑工作区，返回可释放的界面任务。异步提交时仍需校验原目标。
类型：((request: WhiteboardEditRequest, editor: QuireEditor) => { close(): void; }) | null
默认：null
rename
为捕获的白板目标打开重命名界面，并返回可释放任务。
类型：((request: WhiteboardEditRequest, editor: QuireEditor) => { close(): void; }) | null
默认：undefined
mountActions
为当前选中的白板挂载动作界面，返回对应释放句柄。
类型：(container: HTMLElement, actions: WhiteboardPreviewActions): WhiteboardActionsHandle
默认：undefined
renderScene
把白板场景渲染为预览，并返回规范化场景与匹配预览。
类型：((scene: WhiteboardScene, editor: QuireEditor) => ReturnType<WhiteboardSceneRenderer>) | null
默认：undefined
命令与运行方式
以下命令由此扩展直接提供，均在当前 Editor 上调用。命令是否可用由已安装 schema、当前选区与保护策略决定；可以先用 editor.can() 查询。
| 命令 | 参数签名 |
|---|---|
insertWhiteboard | insertWhiteboard(request: WhiteboardInsertion) |
updateWhiteboard | updateWhiteboard(request: WhiteboardUpdate) |
这里只展示参数签名。接界面时见命令与控件，正文变更继续经过同一事务与历史。