Topol Documentation

Appearance

Before Exit Modal for Unsaved Changes ​

To help prevent users from accidentally losing their work, the Topol Plugin includes a default pop-up modal that appears when a user attempts to exit the editor while there are unsaved changes.

This modal serves as a warning and confirmation dialog, helping ensure that important edits are not discarded unintentionally.

Disabling the Default Modal ​

If you prefer to manage this logic yourself — for example, with a custom exit flow or integrated modal in your own UI — you can disable Topol’s built-in exit confirmation dialog by setting the following option:

ts
showUnsavedDialogBeforeExit: false,

When this option is set to false, editor will not show any warning when the user tries to leave the editor with unsaved changes. It becomes your responsibility to track and manage that state externally.

Tracking Unsaved Changes ​

To monitor whether a user has unsaved changes in the editor, the editor triggers the onEdittedWithoutSaveChanged callback each time the state of unsaved changes transitions from true to false and vice versa.

ts
callbacks: {
  onEdittedWithoutSaveChanged(changedTo: boolean) {
    // true = user has made unsaved changes
    // false = content is fully saved
  }
}

You can store this changedTo value in your app state (e.g., in React state, Vue store, etc.) and use it to conditionally trigger custom exit logic.