Skip to content

Options configurable in Topol Options

Topol options is the configuration object passed to TopolPlugin.init(), enabling or disabling editor features and registering the callbacks the editor fires back to the host. The full interface:

ts
export default interface IPluginOptions {
  authorize: {
    apiKey: string;
    userId: string | number;
  };
  api?: IAPI;
  apiAuthorizationHeader?: IAuthHeaderConfig | string;
  apiBlocks?: Record<string, IAPIBlockProperties>;
  autosaveInterval?: number;
  betaFeatures?: {
    carousel?: boolean;
    loop?: boolean;
    rating?: boolean;
  };
  chatAI?: boolean;
  colors?: Array<string>;
  contentBlocks?: IContentBlockOptions;
  currentUser?: IOptionsUser;
  customBlocks?: CustomBlockData[];
  customFileManager?: boolean;
  customFonts?: {
    override?: boolean;
    fonts: Array<IFont>;
  };
  defaultTemplateSettings?: {
    emailWidth?: number;
    emailBackgroundColor?: string;
    blockBackgroundColor?: string;
    buttonsBackgroundColor?: string;
    hyperlinkColor?: string;
    h1?: {
      [key in TopolTagAttribute]?: string;
    };
    h2?: {
      [key in TopolTagAttribute]?: string;
    };
    h3?: {
      [key in TopolTagAttribute]?: string;
    };
    p?: {
      [key in TopolTagAttribute]?: string;
    };
    button?: {
      [key in TopolTagAttribute]?: string;
    };
    "line-height"?: number;
    "structure-margin"?: string;
  };
  disableAiAssistant?: boolean;
  disableAlerts?: boolean;
  disableExtendedComparators?: boolean;
  emailServiceProvider?: "mailchimp" | "sparkpost";
  enableAutosaves?: boolean;
  enableComments?: boolean;
  enableFileManagerInGif?: boolean;
  enableImageToTextRatio?: boolean;
  enableMergeTagPreview?: boolean;
  enableSectionVariants?: boolean;
  fontSizes?: Array<number>;
  googleApiKey?: string;
  helpdesk?: IHelpdesk;
  hideSettingsTab?: boolean;
  htmlMinified?: boolean;
  imageCompressionOptions?: {
    qualityJpeg?: number;
    qualityPng?: number;
    enableAutoResize?: boolean;
    enableCompression?: boolean;
  };
  imageEditor?: boolean;
  imageMaxSize?: number;
  language?: string;
  languageMergeTag?: string;
  light?: boolean;
  logicalOperatorsInsideVariant?: boolean;
  mainMenuAlign?: "left" | "right";
  mergeTags?: Array<IMergeTagGroup | IMergeTag>;
  mobileFirstEnabled?: boolean;
  premadeBlocks?: Object | boolean;
  premadeTemplates?: boolean;
  role?: "manager" | "editor" | "reader";
  permissions?: {
    canLockBlocks?: boolean;
    canLockSections?: boolean;
    canEditLockedSections?: boolean;
    canEditLockedBlocks?: boolean;
    canRemoveFiles?: boolean;
  };
  savedBlocks?: Array<ISavedBlock> | boolean;
  syncedSectionsEnabled?: boolean;
  showUnsavedDialogBeforeExit?: boolean;
  smartMergeTags?: {
    enabled: boolean;
    patterns?: Record<string, SmartMergeTagPattern>;
    syntax?: {
      start: string;
      end: string;
    };
  };
  teamUsers?: IOptionsUser[];
  templateId?: number | string;
  testingEmails?: boolean | string[];
  theme?: ITheme;
  tinyConfig?: unknown;
  title?: string;
  topBarOptions?: Array<string>;
  renameTemplate?: boolean;
  removeTopBar?: boolean;
  windowBar?: Array<string>;
  callbacks: {
    onSave?(
      json: JSON,
      html: HTMLDocument,
      mutations: { lang: string; primary: boolean }[],
      syncedSections: number[]
    ): void;
    onSaveAndClose?(
      json: JSON,
      html: HTMLDocument,
      mutations: { lang: string; primary: boolean }[],
      syncedSections: number[]
    ): void;
    onTestSend?(email: string | string[], json: JSON, html: HTMLDocument): void;
    onOpenFileManager?(): void;
    onImageDelete?(items: IDeletedItem[]): void;
    onLoaded?(): void;
    onBlockSave?(block: ISavedBlock): void;
    onBlockRemove?(blockId: Number): void;
    onBlockEdit?(blockId: Number): void;
    onInit?(): void;
    onUndoChange?(count: Number): void;
    onRedoChange?(count: Number): void;
    onPreview?(html: HTMLDocument): void;
    onAlert?(notification: INotification): void;
    onClose?(): void;
    onEdittedWithoutSaveChanged?(hasUnsavedChanges: boolean): void;
    onOpenCustomBlockDialog?(customBLock: unknown): void;
    onTemplateRename?(title: string): void;
    updateTestingEmailAddresses?(emails: string[]): void;
    onError?(type: string, message: string, responseBody?: unknown): void;
    onLanguageCreated?(
      lang: string,
      mutations: { lang: string; primary: boolean }[]
    ): void;
    onLanguageDeleted?(
      lang: string,
      mutations: { lang: string; primary: boolean }[]
    ): void;
    onLanguageSelected?(lang: string): void;
    onPrimaryLanguageChanged?(
      lang: string,
      mutations: { lang: string; primary: boolean }[]
    ): void;
    onGetMutations?(mutations: { lang: string; primary: boolean }[]): void;
  };
}

The onImageDelete callback receives an array of IDeletedItem entries, one per deleted file or folder:

ts
interface IDeletedItem {
  name: string;
  type: "file" | "folder";
  path: string;
  url?: string;
  key: string | null;
}

See the Callbacks guide for a description of each field.