Custom Notifications in Editor

Topol Plugin comes with built-in notification support to inform users about key actions such as saving, previewing, or encountering errors. However, if you’re building a custom interface or need deeper control over how notifications are displayed, Topol allows you to disable the built-in alerts and implement your own custom notification system using callbacks and API functions.

Disabling Built-in Alerts

If you prefer to use your own notification component (e.g., a toast message from your design system), you can disable Topol’s default alerts by setting the disableAlerts flag in your TOPOL_OPTIONS:

disableAlerts: true,

Once this is set, editor will no longer show its native notifications, and instead, you can handle them manually using the onAlert callback.

Using the onAlert callback

When alerts are disabled, editor will trigger the onAlert callback every time it would normally display a notification. This allows you to intercept the notification and display it using your own logic or design system.

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

The notification object includes:

• title – A short heading for the alert

• text – A longer message or description

• type – "info", "success", or "error". Default notifiction type is "info".

This is also useful when you want to use the built in notifications.

Triggering a Custom Notification

You can also manually trigger a notification at any time—whether or not built-in alerts are disabled—using the TopolPlugin.createNotification() method:

TopolPlugin.createNotification({
  title: "Title of the notification",
  text: "Important message you want to display",
  type: "info", // info | error | success
  expectSideEffect: true | false, // set to true if the notification should wait for a backend confirmation (e.g., after saving a template)
  persistant: true | false, // set to true if you don't want the notification to auto-dismiss
});