Notifications (Sonner)

SVeditor surfaces common failures (image/attachment upload, initial fetch, body save, metadata save) as Sonner toast.error calls. The SDK depends on sonner, and styles ship with @wztlink1013/sveditor/style.css (the sv-editor-sdk.css build artifact), so hosts do not need a separate CSS package for toasts.

Built-in titles are fixed English strings (e.g. Image upload failed, Could not load document). For localized copy, use onNotify to render your own UI, or set enabled: false and handle everything in onNotify.

When toasts appear

Success paths do not show toasts. If you catch and swallow errors in app code, the SDK may not see them—handle UX yourself.

extensionsOptions.notifications

Nested under extensionsOptions, type SveditorNotificationsOptions:

extensionsOptions?: {
  notifications?: {
  /** Mount Sonner Toaster inside the editor. Defaults to true when omitted. */
  builtinToaster?: boolean;
  /** Call sonner for errors. Defaults to true. If false, only onNotify runs (if provided). */
  enabled?: boolean;
  /** Runs alongside toast: analytics, custom UI, etc. */
  onNotify?: (event: {
    type: "error";
    title: string;
    description?: string;
  }) => void;
  };
};

builtinToaster and duplicate Toaster components

• Default (omitted): the editor mounts Sonner’s Toaster so standalone pages work out of the box.
• Host already mounts a root Toaster (e.g. in a Next.js layout): set builtinToaster: false and keep using global toast.error()—only the global Toaster should mount.
• Host already mounts a root Toaster (e.g. in a Next.js layout): set builtinToaster: false and keep using global toast.error() — only one Toaster instance should be mounted.

enabled vs onNotify

• Sonner off, custom only: set enabled: false and optionally implement onNotify.
• Analytics + toast: keep default enabled and add onNotify (it fires before toast).

Examples

Standalone page (SDK-mounted Toaster):

import { SVeditor } from "@wztlink1013/sveditor";
import "@wztlink1013/sveditor/style.css";

SVeditor.create({
  el: "#editor",
  extensionsOptions: {
    autoSave: { onFetch: loadDoc, onSaveContent: saveDoc },
    image: { onUpload: uploadImage },
  },
});

Host provides the Toaster:

SVeditor.create({
  el: "#editor",
  extensionsOptions: {
    notifications: { builtinToaster: false },
    /* ... */
  },
});

Advanced exports (optional)

The package also exports notifySveditorError and notifySveditorErrorWithLabel for custom layers. Most apps only need extensionsOptions.notifications on create().

See also

• EditorOptions — full option list
• Playground — live notification defaults