Features

You can enable or disable certain features of the MailUi editor. Most of these are enabled by default but can be turned off using the following configuration.

Default Features #

mailui.init({
  features: {
    preview: true,
    imageEditor: {
      enabled: true,
    },
    userUploads: {
      enabled: true,
    },
    stockImages: {
      enabled: true,
      safeSearch: true,
    },
    stockBlocks: {
      enabled: true,
      safeFilter: true,
    },
    saveToBlock: {
      enabled: true,
    },
    undoRedo: true,
    textEditor: {
      spellChecker: true,
      cleanPaste: false,
      inlineFontControls: true,
      inlineColorControls: true,
    },
    sendTestEmail: true,
    aiGenerative: {
      enabled: true,
      magicHeading: true,
      magicText: true,
      magicButton: true,
      additionalMagicArea: true,
    },
    displayCondition: {
      enabled: false,
    },
  },
});

Live Preview #

You can show or hide the editor's default preview button and control the preview manually.

mailui.init({
  features: {
    preview: false
  }
})

Programmatically #

You can show or hide this preview programmatically as well.

// Show the preview
mailui.showPreview();

// Hide the preview
mailui.hidePreview();

Preview Listener #

You can also listen the preview changes as well.

mailui.addEventListener("preview:changed", function (data: { preview: boolean }) {
      // Save the changes
});

User Uploads #

userUploads provides a drag-and-drop upload option along with a list of uploaded files.

mailui.init({
  features: {
    userUploads: {
      enabled: true,
      authAlert: false,
    },
  }
})

Upload Listener #

The upload listener is triggered when a user uploads files.

mailui.registerProvider("userUploads", async (params: { page: number, perPage: number }, done: Function) => {
    var page = params.page || 1;
    var lastPage = 5;
    var perPage = params.perPage || 20;
    var total = 100;

    console.log("params", params);

    /**
     * Load images for page X from your server here...
     */

    const images: any[] = [];

    done(images, {page, lastPage, perPage, total});
});

Stock Images #

We have a built-in stock image library featuring millions of images from Unsplash, with more sources to be added in the future. This feature is enabled by default, but you can disable it if desired. Additionally, you have the option to adjust the safe search settings.

mailui.init({
  features: {
    stockImages: {
      enabled: true,
      safeSearch: true,
    },
  }
})

Stock Blocks #

We have a built-in stock block libraries, with more blocks to be added in the future. This feature is enabled by default, but you can disable it if desired. Additionally, you have the option to adjust the safe filter settings.

mailui.init({
  features: {
    stockBlocks: {
      enabled: true,
      safeFilter: true,
    }
  }
})

Save To Block #

The "Save to Block" feature allows you to store your custom templates, designs, and assets for easy access and reuse. By saving your work to the library, you can quickly retrieve and apply your favorite elements across different projects, ensuring consistency and saving time. This feature supports organizing your saved items, making it effortless to manage and find your content when needed.

mailui.init({
  features: {
    saveToBlock: {
      enabled: true,
    }
  }
})

Undo / Redo #

You can choose to hide the undo/redo buttons from the actions box at the bottom. If you opt to hide these buttons, consider enabling the delete confirmation setting for added security.

mailui.init({
  features: {
    undoRedo: false
  }
})

Custom Events #

The undo and redo functions can also be called programmatically using the following code:

// Undo last action
mailui.undo()

// Redo last action
mailui.redo()

// Any action in queue to undo?
mailui.canUndo()

// Any action in queue to redo?
mailui.canRedo()

Text Editor #

This setup allows for a streamlined and customizable text editing experience.

mailui.init({
  textEditor: {
    // Enables spell-checking functionality within the text editor. 
    // When set to `true`, the text editor will automatically highlight 
    // any misspelled words, providing real-time spell-check assistance to users.
    spellChecker: true,
    
    // Controls the behavior for pasting content in the text editor. 
    // If `cleanPaste` is set to `true`, the editor will strip out 
    // any external formatting (e.g., fonts, colors, and styles) from 
    // pasted content, converting it to plain text. When `false`, 
    // pasted content will retain its original formatting.
    cleanPaste: false,
    
    // Enables inline font controls directly in the text editor, 
    // allowing users to change font family, font size
    inlineFontControls: true,
    
    // Activates inline color controls within the text editor. When 
    // `true`, users can change font color and background color for text 
    // directly in the editor. This option is useful for allowing quick 
    // and customizable color styling.
    inlineColorControls: true,
  }
})

Send Test Email #

Preview how your email will look to recipients before sending to ensure it appears as expected.

mailui.init({
  features: {
    smartLinks: true
  }
})

Ai Generative #

The aiGenerative options configure AI-powered content generation for different content types in the editor, providing users with intelligent suggestions.

This setup makes creating content easier and faster by integrating AI suggestions across various components.

mailui.init({
  aiGenerative: {
    // Enables or disables AI generative features within the editor.
    // If `enabled` is set to `true`, AI-driven content generation 
    // options like Magic Heading, Magic Text, and Magic Button 
    // will be available to users.
    enabled: true,  

    // Activates AI assistance specifically for headings.
    // When `magicHeading` is set to `true`, users can use AI 
    // to automatically generate or suggest heading content, 
    // making it easier to quickly create engaging titles.
    magicHeading: true,  

    // Enables AI content generation for standard text fields.
    // Setting `magicText` to `true` allows the AI to suggest 
    // or auto-generate body content, helping users create 
    // paragraphs or other text areas with AI-generated ideas.
    magicText: true,  

    // Enables AI functionality for button text.
    // When `magicButton` is `true`, AI suggestions for button 
    // labels will be provided, offering creative ideas for calls 
    // to action or other button-related text based on context.
    magicButton: true,  

    // Allows AI generative features for additional customizable 
    // areas within the editor beyond standard text fields, 
    // headings, and buttons. If `additionalMagicArea` is set to `true`, 
    // AI content suggestions can be applied to other specified fields 
    // or sections in the editor.
    additionalMagicArea: true, 
  }
})

Display Conditons #

The Display Conditions feature enables end-users to control the visibility of specific email content by setting customizable conditions.

mailui.init({
  features: {
    displayCondition: {
      enabled: false,
    }
  }
})