SVeditor 文档
用户体验与宿主集成

通知与 Sonner

基于 sonner 的错误提示、builtinToaster 与宿主布局的配合,以及 onNotify 回调。

通知与 Sonner

SVeditor 将常见失败场景(图片/附件上传、初始拉取、正文保存、元数据保存)统一为 Sonnertoast.error 提示。SDK 已依赖 sonner,样式随 @wztlink1013/sveditor/style.css(构建产物中的 sv-editor-sdk.css)一并提供,接入方无需额外安装样式包。

内置条目标题为固定英文(如 Image upload failedCould 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 负责展示。

enabledonNotify

  • 需要完全关掉 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(可选)

包内还导出 notifySveditorErrornotifySveditorErrorWithLabel,供你在自定义扩展或封装层手动触发与 SDK 一致的固定标题。一般业务只需配置 extensionsOptions.notifications

另见