用户体验与宿主集成
通知与 Sonner
基于 sonner 的错误提示、builtinToaster 与宿主布局的配合,以及 onNotify 回调。
通知与 Sonner
SVeditor 将常见失败场景(图片/附件上传、初始拉取、正文保存、元数据保存)统一为 Sonner 的 toast.error 提示。SDK 已依赖 sonner,样式随 @wztlink1013/sveditor/style.css(构建产物中的 sv-editor-sdk.css)一并提供,接入方无需额外安装样式包。
内置条目标题为固定英文(如 Image upload failed、Could not load document 等)。若需要中文或其它展示文案,请使用 onNotify 在宿主侧自行渲染或二次提示,或关闭 enabled 后完全走自有 UI。
何时会提示
| 场景 | 说明 |
|---|---|
| 图片上传失败 | 工具栏上传、粘贴/拖拽图片等,只要 onUpload 抛出异常 |
| 附件上传失败 | 同上,附件 onUpload 抛出异常 |
| 初始内容拉取失败 | 配置了 extensionsOptions.autoSave.onFetch 且请求失败或超时 |
| 正文保存失败 | onSaveContent 抛出异常 |
| 元数据保存失败 | extensionsOptions.meta.onSaveMeta 抛出异常 |
成功路径不会弹 toast。若你在业务侧自行 catch 并吞掉错误,SDK 可能无法感知,需自行提示。
extensionsOptions.notifications
位于 extensionsOptions 内,类型为 SveditorNotificationsOptions:
extensionsOptions?: {
notifications?: {
/** 是否在编辑器内再挂一个 Sonner Toaster。未设置视为 true。 */
builtinToaster?: boolean;
/** 是否调用 sonner 展示错误。未设置视为 true。为 false 时仅触发 onNotify(若提供)。 */
enabled?: boolean;
/** 与 toast 并存:埋点、同步到自有通知系统等 */
onNotify?: (event: {
type: "error";
title: string;
description?: string;
}) => void;
};
};builtinToaster:避免两个 Toaster
- 默认(未设置):编辑器内部会渲染 Sonner 的 Toaster(如
position="bottom-right"),独立页面可直接看到提示。 - 宿主根布局已挂载 Toaster(例如 Next.js 根布局里已有 Sonner):应设
builtinToaster: false,只保留toast.error()调用,由全局那一个 Toaster 负责展示。 - 宿主根布局已挂载 Toaster(例如 Next.js 根布局):设
builtinToaster: false,由全局 Toaster 负责展示。
enabled 与 onNotify
- 需要完全关掉 Sonner、只走自有渠道:设
enabled: false并(可选)提供onNotify。 - 需要同时打点和弹窗:保留默认
enabled,并实现onNotify(每次错误会先触发onNotify,再按需toast)。若只要自有中文提示,可enabled: false仅在onNotify里用中文文案展示。
完整示例
独立页面(自带 Toaster):
import { SVeditor } from "@wztlink1013/sveditor";
import "@wztlink1013/sveditor/style.css";
SVeditor.create({
el: "#editor",
extensionsOptions: {
autoSave: {
onFetch: loadDoc,
onSaveContent: saveDoc,
},
image: {
onUpload: uploadImage,
},
},
});宿主已有全局 Toaster:
SVeditor.create({
el: "#editor",
extensionsOptions: {
notifications: {
builtinToaster: false,
},
/* ... */
},
});进阶 API(可选)
包内还导出 notifySveditorError、notifySveditorErrorWithLabel,供你在自定义扩展或封装层手动触发与 SDK 一致的固定标题。一般业务只需配置 extensionsOptions.notifications。
另见
- EditorOptions — 配置项一览
- Playground — 在线通知默认行为