GrapesJS Preset Newsletter

The grapesjs-preset-newsletter is a plugin for GrapesJS designed for email template creation. You can initialize it by passing a PluginOptions object to the GrapesJS plugin configuration.

Key capabilities include:

• Block Management: Control which newsletter-specific blocks are loaded and customize their attributes.
• Email Optimization: Automatically inline CSS using juice during export.
• UI Customization: Customize modal titles, labels, and button text for import/export workflows.
• Styling: Set default styles for tables and table cells to ensure email compatibility.

import grapesjs from 'grapesjs';
import newsletterPreset from 'grapesjs-preset-newsletter';

grapesjs.init({
  // ... other GrapesJS config
  plugins: [newsletterPreset],
  pluginsOpts: {
    [newsletterPreset]: {
      blocks: ['button', 'text'], // Only load specific blocks
      inlineCss: true,            // Ensure CSS is inlined on export
      tableStyle: { width: '100%' },
    },
  },
});

The following table lists all available configuration options for the grapesjs-preset-newsletter plugin.

| Option | Description | Default |
| - | - | - |
| `blocks` | Which blocks to add | `All available blocks` |
|`block`| Add custom block options, based on block id|`(blockId) => ({})`|
|`cmdOpenImport`| Import command id |`gjs-open-import-template`|
|`cmdTglImages`| Toggle images command id |`gjs-toggle-images`|
|`cmdInlineHtml`| Get inlined HTML command id |`gjs-get-inlined-html`|
|`modalTitleImport`| Title for the import modal |`Import template`|
|`modalTitleExport`| Title for the export modal |`Export template`|
|`modalLabelExport`| Label for the export modal |`''`|
|`modalLabelImport`| Label for the import modal |`''`|
|`modalBtnImport`| Label for the import button |`Import`|
|`importPlaceholder`| Template as a placeholder inside import modal |`''`|
|`inlineCss`| If `true`, inlines CSS on export |`true`|
|`updateStyleManager`| Update Style Manager with more reliable style properties to use for newsletters |`true`|
|`showStylesOnChange`| Show the Style Manager on component change |`true`|
|`showBlocksOnLoad`| Show the Block Manager on load |`true`|
|`codeViewerTheme`| Code viewer theme |`hopscotch`|
|`juiceOpts`| Custom options for the `juice` HTML inliner |`{}`|
|`textCleanCanvas`| Confirm text before clearing the canvas |`Are you sure you want to clear the canvas?`|
|`useCustomTheme`| Load custom preset theme |`true`|
|`cellStyle`|  Default style used inside blocks `td`s |`{ padding: 0, margin: 0, 'vertical-align': 'top' }`|
|`tableStyle`| Default style used for blocks tables |`{ height: '150px', margin: '0 auto 10px auto', padding: '5px 5px 5px 5px', width: '100%' }`|

The PluginOptions interface allows you to customize the behavior and appearance of the newsletter preset. Below are the available configuration keys:

export interface PluginOptions {
  /** Which blocks to add. */
  blocks?: string[];

  /** Add custom block options, based on block id. */
  block?: (blockId: string) => ({});

  /** Custom style for table blocks. */
  tableStyle?: Record<string, string>;

  /** Custom style for table cell blocks. */
  cellStyle?: Record<string, string>;

  /** Import command id. @default 'gjs-open-import-template' */
  cmdOpenImport?: string;

  /** Toggle images command id. @default 'gjs-toggle-images' */
  cmdTglImages?: string;

  /** Get inlined HTML command id. @default 'gjs-get-inlined-html' */
  cmdInlineHtml?: string;

  /** Title for the import modal. @default 'Import template' */
  modalTitleImport?: string;

  /** Title for the export modal. @default 'Export template' */
  modalTitleExport?: string;

  /** Label for the export modal. @default '' */
  modalLabelExport?: string;

  /** Label for the import modal. @default '' */
  modalLabelImport?: string;

  /** Label for the import button. @default 'Import' */
  modalBtnImport?: string;

  /** Template as a placeholder inside import modal. @default '' */
  importPlaceholder?: string;

  /** If `true`, inlines CSS on export. @default true */
  inlineCss?: boolean;

  /** Update Style Manager with more reliable style properties to use for newsletters. @default true */
  updateStyleManager?: boolean;

  /** Show the Style Manager on component change. @default true */
  showStylesOnChange?: boolean;

  /** Show the Block Manager on load. @default true */
  showBlocksOnLoad?: boolean;

  /** Code viewer theme. @default 'hopscotch' */
  codeViewerTheme?: string;

  /** Custom options for `juice` HTML inliner. @default {} */
  juiceOpts?: juice.Options;

  /** Confirm text before clearing the canvas. @default 'Are you sure you want to clear the canvas?' */
  textCleanCanvas?: string;

  /** Load custom preset theme. @default true */
  useCustomTheme?: boolean;
}