Callable functions on Topol Plugin

The TopolPlugin global exposes methods for driving the editor from the host application, covering everything from saving and undo/redo to language management and dark mode. Each method is called on the window.TopolPlugin global:

window.TopolPlugin.save();

Methods Reference

changeEmailToDesktop() => void

Switches the editing canvas back to desktop view. Learn more

changeEmailToMobile() => void

Switches the editing canvas to mobile view. Learn more

chooseFile(url: string) => void

Returns the selected file URL to the editor (for custom file manager). Learn more

createLanguage(lang: string) => void

Creates a new language mutation for the given language code and fires onLanguageCreated. Learn more

createNotification(notification: INotification) => void

Displays a custom notification in the editor. Always shown, even with disableAlerts enabled. Learn more

deleteLanguage(lang: string) => void

Deletes a language mutation, after the editor shows a confirmation modal. Learn more

destroy() => void

Tears down the editor: removes the iframe and empties the container element it was mounted into.

getMutations() => void

Requests the current list of language mutations; the editor returns it through the onGetMutations callback without modifying any state. Learn more

init(topolOptions: ITopolOptions) => void

Initializes the editor: creates the editor iframe inside the element from options.id and applies the passed options. Learn more

load(json: JSON) => void

Loads a template into the editor; accepts a JSON string or a parsed object. Learn more

openPremadeTemplatesSelection() => void

Opens the premade templates picker dialog. Learn more

redo() => void

Redoes the last undone change and fires onRedoChange. Learn more

refreshComments(key: string) => void

Refreshes the comment list; if key matches an open conversation, its detail refreshes too. Pass "" to refresh only the list. Learn more

refreshSyncedSections() => void

Refreshes synced sections listing and reloads placed sections with the latest changes. Learn more

save(options?: { lang?: string }) => void

Renders the current template server-side, then triggers the onSave(json, html, mutations, syncedSections) callback. The optional lang selects which language mutation's HTML is returned. Learn more

selectLanguage(lang: string) => void

Switches the active editing language and fires onLanguageSelected. Learn more

setActiveMembers(activeMembers: string[]) => void

Replaces the presence list shown in the top bar — a display indicator, not co-editing. Learn more

setMergeTags(mergeTags: Array<unknown>) => void

Replaces the entire merge tag list at runtime. Call it after onInit fires — earlier calls are dropped. Learn more

setPreviewHTML(html: string | null) => void

Overrides the HTML shown in the preview pane — used with the onPreview callback to preview server-rendered output. Pass null to clear the override.

setPrimaryLanguage(lang: string) => void

Makes the given language the primary mutation, creating it first if it does not exist yet. Learn more

setSavedBlocks(savedBlocks: ISavedBlock[]) => void

Replaces the saved blocks list — call it after your application handles a block save, edit, or delete. Learn more

setTemplateName(newName: string) => void

Sets the template name shown in the editor. Does not re-fire onTemplateRename, so it is safe to call from that callback. Learn more

toggleAutosaves() => void

Opens or closes the autosave history panel. Learn more

toggleBlocksAndStructuresVisibility() => void

Blurs or unblurs elements hidden by mobile-first visibility settings in the current view. Learn more

toggleChatAI() => void

Opens or closes the AI chat panel. Learn more

toggleComments() => void

Opens or closes the comments sidebar. Learn more

toggleControlPanel() => void

Shows or hides the right-side control panel. Learn more

toggleDarkMode() => void

Toggles dark mode rendering of the preview — for host applications with their own theme switch. Learn more

togglePreview() => void

Enters or leaves preview mode; leaving fires onPreviewClose. Learn more

togglePreviewSize() => void

Toggles the preview viewport between mobile (375 px) and desktop width. Learn more

translateAllLanguages() => void

AI-translates every non-primary language from the primary in one pass, overwriting existing translations. Learn more

translateLanguage(lang: string, sourceLang?: string) => void

AI-translates a single language mutation, sourcing from the primary language unless sourceLang is given. Learn more

undo() => void

Undoes the last change and fires onUndoChange. Learn more

updateApiAuthorizationHeader(newAuthHeader: string | Record<string, string>) => void

Updates the authorization header for all subsequent API calls — for refreshed or expired tokens. Learn more

updateCustomBlockContent(content: string) => void

Writes new HTML content into the currently selected custom block. Learn more

updateOptions(options: Partial<ITopolOptions>) => void

Reconfigures a running editor with a partial options object. Learn more

updateTemplate(json: JSON, options?: IUpdateTemplateOptions) => void

Replaces the whole template in a running editor and fires onTemplateUpdated; pass skipSnapshot: true to skip the undo snapshot. Learn more

Example Usage

// Load a template
window.TopolPlugin.load(templateJson);

// Trigger save
window.TopolPlugin.save();

// Save a specific language mutation
window.TopolPlugin.save({ lang: "en" });

// Update authorization header
window.TopolPlugin.updateApiAuthorizationHeader("Bearer new_token");

// Reconfigure a running editor
window.TopolPlugin.updateOptions({ language: "de" });

// Tear down the editor
window.TopolPlugin.destroy();

TypeScript Interface

export default interface ITopolPlugin {
  changeEmailToDesktop: () => void;
  changeEmailToMobile: () => void;
  chooseFile: (url: string) => void;
  createLanguage: (lang: string) => void;
  createNotification: (notification: INotification) => void;
  deleteLanguage: (lang: string) => void;
  destroy: () => void;
  getMutations: () => void;
  init: (topolOptions: ITopolOptions) => void;
  load: (json: JSON) => void;
  openPremadeTemplatesSelection: () => void;
  redo: () => void;
  refreshComments(key: string): void;
  refreshSyncedSections: () => void;
  save: (options?: { lang?: string }) => void;
  selectLanguage: (lang: string) => void;
  setActiveMembers: (activeMembers: string[]) => void;
  setMergeTags(mergeTags: Array<unknown>): void;
  setPreviewHTML: (html: string | null) => void;
  setPrimaryLanguage: (lang: string) => void;
  setSavedBlocks: (savedBlocks: ISavedBlock[]) => void;
  setTemplateName(newName: string): void;
  toggleAutosaves: () => void;
  toggleBlocksAndStructuresVisibility: () => void;
  toggleChatAI: () => void;
  toggleControlPanel: () => void;
  toggleComments: () => void;
  toggleDarkMode: () => void;
  togglePreview: () => void;
  togglePreviewSize: () => void;
  translateAllLanguages: () => void;
  translateLanguage: (lang: string, sourceLang?: string) => void;
  undo: () => void;
  updateApiAuthorizationHeader: (
    newAuthHeader: string | Record<string, string>
  ) => void;
  updateCustomBlockContent(content: string): void;
  updateOptions: (options: Partial<ITopolOptions>) => void;
  updateTemplate: (json: JSON, options?: IUpdateTemplateOptions) => void;
}

interface IUpdateTemplateOptions {
  skipSnapshot?: boolean;
}