Appearance
Before Exit Modal for Unsaved Changes
The editor warns users who leave with unsaved changes. When a template has been edited but not saved, closing or reloading the tab triggers the browser's built-in "leave site?" confirmation, which gives the user a chance to go back and save.
INFO
This is the browser's native dialog, so its wording and appearance are controlled by the browser and cannot be styled. It also fires only on page unload, such as closing or reloading the tab. Navigating within a single-page application does not trigger it.
Disabling the default dialog
Set the following option to turn the warning off, which is the right choice when your application handles exit confirmation itself:
ts
showUnsavedDialogBeforeExit: false,With the option set to false, the editor stops warning about unsaved changes entirely. Tracking that state becomes your application's responsibility. Any other value, including leaving the option out, keeps the warning enabled.
Tracking unsaved changes
The onEdittedWithoutSaveChanged callback reports whether the template currently has unsaved changes. It fires on every transition in both directions, so it stays accurate as the user edits and saves:
ts
callbacks: {
onEdittedWithoutSaveChanged(changedTo: boolean) {
// true = user has made unsaved changes
// false = content is fully saved
}
}Storing changedTo in your application state (React state, a Vue store, or equivalent) is enough to drive a custom exit flow: block a route change while it is true, enable a save button, or show your own confirmation dialog in place of the browser's.
