Custom Notifications in Editor

The editor shows its own notifications for saving, previewing, and errors. Applications with their own toast component can take these over instead: turning the built-in alerts off routes every message to a callback, leaving the presentation to you.

Disabling built-in alerts

Set the disableAlerts flag in your TOPOL_OPTIONS to stop the editor rendering its own notifications:

disableAlerts: true,

Every message the editor would have shown then goes to the onAlert callback.

Using the onAlert callback

The onAlert callback receives each notification in place of the built-in toast:

callbacks: {
  onAlert: (notification) => {
    // Use your custom UI here
    // Example: showToast(notification.title, notification.text)
  }
}

WARNING

The two paths are mutually exclusive. onAlert fires only while disableAlerts is true, and with alerts enabled the editor renders its own toast and the callback is never called. There is no configuration where both happen.

The notification object includes:

• text: The message. Required.

• type: "info", "success", or "error". Required.

• title: An optional short heading for the alert.

• persistent: Whether the notification stays until dismissed.

Triggering a custom notification

The TopolPlugin.createNotification() method displays a notification from your application:

TopolPlugin.createNotification({
  title: "Title of the notification",
  text: "Important message you want to display",
  type: "info", // info | error | success
  persistent: true | false, // set to true if you don't want the notification to auto-dismiss
});

Notifications dismiss themselves after three seconds unless persistent is true.

INFO

createNotification() always renders the editor's built-in notification, even when disableAlerts is true, and such calls do not reach onAlert. An application that owns its notification UI should use its own toast component directly rather than this method.