Plugin callbacks

Communication with editor is done by using props down and callbacks up. To be able to hook to events coming from editor the editor we use callbacks inside TOPOL_OPTIONS to achieve this.

For example:

const TOPOL_OPTIONS = {
  //...
  callbacks: {
    onSave(json, html) {
      // do something with json and html
    },
  },
  //...
};

On save

Called when "save" button is clicked in Top Bar or when saving is triggered programmatically using TopolPlugin.save() function.

const TOPOL_OPTIONS = {
  callbacks: {
    onSave(json, html) {
      // save json and html on your infrastructure
    },
  },
};

On save and close

Called when "save and close" button is clicked in Top Bar.

const TOPOL_OPTIONS = {
  callbacks: {
    onSaveAndClose(json, html) {
      // save json and html on your infrastructure and close the editor
    },
  },
};

On test email send

Called when send test email button is clicked in editor preview.

When testingEmails is set to true email is always array of emails.

const TOPOL_OPTIONS = {
  callbacks: {
    onTestSend(email, json, html) {
      // send an testing email using your sender of choice
    },
  },
};

On file manager open

Called when the user clicks on Choose a file (e.g. as a property of an image). You can read more about the feature here.

const TOPOL_OPTIONS = {
  callbacks: {
    onOpenFileManager() {
      // open your custom filemanager dialog
    },
  },
};

On init

Called when the editor is initialized, (e.g. for custom loading integration)

const TOPOL_OPTIONS = {
  callbacks: {
    onInit(json, html) {
      // hide the loader or track the usage
    },
  },
};

On loaded

Called when template loading is finished after calling TopolPlugin.load(YOUR_TEMPLATE)

const TOPOL_OPTIONS = {
  callbacks: {
    onLoaded(json, html) {
      // hide the loader
    },
  },
};

On block save

Called when user creates new saved block. You can read more here.

const TOPOL_OPTIONS = {
  callbacks: {
    onBlockSave(block) {
      // save the block on your infrastructure
    },
  },
};

On block remove

Called when user removes saved block. You can read more here.

const TOPOL_OPTIONS = {
  callbacks: {
    onBlockRemove(blockId) {
      // remove the block on your infrastructure
    },
  },
};

On block edit

Called when user edits saved block. You can read more here.

const TOPOL_OPTIONS = {
  callbacks: {
    onBlockEdit(blockId) {
      // edit the block on your infrastructure
    },
  },
};

On undo change

Called when user clicks undo button

const TOPOL_OPTIONS = {
  callbacks: {
    onUndoChange(count) {},
  },
};

On redo change

Called when user clicks redo button

const TOPOL_OPTIONS = {
  callbacks: {
    onRedoChange(count) {},
  },
};

On preview

Called when user want to navigate to preview

const TOPOL_OPTIONS = {
  callbacks: {
    onPreview(html) {},
  },
};

On alert

Called when alerts are explicitly disabled. You read more about the custom alerts here

const TOPOL_OPTIONS = {
  callbacks: {
    onAlert(notification) {
      //use your own notification, or create proxy for built-in notifications
    },
  },
};

OnError

Called when an error that cannot be handled happened in the editor. There are 3 types of errros.

• templateLoad Indicates that the JSON of the template is not correct and editor cannot read it correctly.
• network Indicates that network issue happened during internal or external (endpoints given in API property in TOPOL_OPTIONS) Fetch/XHR calls.
• authorize Invalid API key or wrong unverified domain

const TOPOL_OPTIONS = {
  callbacks: {
    onError(type, message) {
      if (type === "network") {
        console.log(message);
      }
    },
  },
};