Top Bar Modification

The Top Bar in the Topol Plugin is the main control strip at the top of the editor interface. It includes essential functions like Save, Undo/Redo, Preview toggles, and more.

However, if you're building a fully branded or embedded experience, we allow you to completely customize or remove the Top Bar to match your own UI and workflow.

Remove Top Bar

If you plan to build your own interface, you can remove the entire default Top Bar with:

removeTopBar: true, // to display, set to false or skip

Once removed, it's up to your application to handle saving and closing actions using our APIs.

Hide or Show Specific Top Bar Elements

If you don’t want to remove the Top Bar entirely but want to customize what elements are shown, you can use the topBarOptions array to define which buttons should appear. Default value is [].

topBarOptions: [
  "undoRedo", // shows Undo/Redo button
  "save", // shows Save button
  "saveAndClose", // shows Save & Close button
  "changePreview", // shows Change preview button
  "previewSize", // shows Toggle mobile/desktop preview button
  "previewTestMail" // Shows Send test email button
],

If topBarOptions is not set or is an empty array [], all elements will be shown.

Additional Window Bar

In addition to the Top Bar, we also offer an optional Window Bar, which is enabled by the windowBar array:

• fullscreen – Toggles fullscreen mode for distraction-free editing

• close – Closes the editor and triggers the onClose callback

windowBar: [
    "fullscreen", // Toggles fullscreen mode for distraction-free editing
    "close" // Closes the editor and triggers the onClose callback
],

You must also define the appropriate callback to handle the close action:

callbacks: {
  onClose: () => {
    // Your custom logic for closing the editor
  }
}