Configuration

property	Type	Description
instanceRef	React.MutableRefObject<EditorContextProps>;	Editor context ref => ReturnType<typeof useEditorContext> (Added in v1.43.0)
initialValues	EmailTemplate	Source data
height	string	Editor height
onSubmit	(values: EmailTemplate, editor: CustomSlateEditor) => void;	Called when the commit is triggered manually
onChange	(values: EmailTemplate, editor: CustomSlateEditor) => void;	Called when the values changed
onUpload	(blob: Blob) => Promise<string>	Methods for uploading images to your server/CDN
fontList	Array<{value: string;label: string; href?: string}>	Default font list. web font need href
mergetags	MergetagItem	A merge tag is a bit of specific code that allows you to insert dynamic data into emails. Like {{user.name}}, and used for preview
mergetagsData	Record<string, any>;	Dynamic data, it will replace mergetags when preview.
newLineWithBr	boolean	When the user presses enter in the editor, it inserts a new block or a line break (br) by default. The default is true.
categories	Categories	Configure the elements of the left sidebar.
Retro Theme
controller	boolean	Zoom in / Zoom out controller
showLayer	boolean	Show layer in side bar
showPreview	boolean	Show MJML render preview
showLogic	boolean	show loop/condition configuration
showBlockPaths	boolean
showPreviousLevelIcon	boolean
compact	boolean	single side bar / double side bar
localeData	Record<string, string>;	Localized translation data
showSourceCode	boolean	Show block JSON source code
showTextHTMLMode	boolean	Allow text block editing of HTML.
showGenerateBlockImage	boolean	Displays a button to download a screenshot of the block in the block panel. This is useful when you need to generate a block image.
enabledGradientImage	boolean	Blocks that support background-url can generate gradient background images.
enabledButtonIcon	boolean	Icons can be configured on both the left and right sides of button text.
sourceCodeEditable	boolean	Whether to allow modification of JSON source code
emptyPageElement	PageElement	When the user clears the canvas, set it to emptyPageElement
quantityLimitCheck	(params: { element: Element; pageData: PageElement; }) => boolean;	The callback when the user adds a block. If false, the addition will be prevented.
universalElementSetting	check here	A "Universal block" is a way to save basic elements for reuse
AIAssistant	check here
unsplash	{clientId: string;presetList?: Array<{query: string;label: string;image: string; }> }	Unsplash image library

For all configuration options, refer to the EmailEditorProps interface below.

export interface EmailEditorProps {
  onUpload?: (blob: Blob) => Promise<string>;
  onSubmit: (values: EmailTemplate) => void;
  fontList?: {
    value: string;
    label: string;
  }[];
  localeData?: Record<string, string>;
  initialValues: EmailTemplate;
  children: React.ReactNode;
  loading?: React.ReactNode;
  editor: CustomSlateEditor;
  footer?: React.ReactNode;
  ElementPlaceholder?: React.FC<{
    element: Element;
    isSelected: boolean;
    isHover: boolean;
    nodeElement: HTMLElement;
    path: Path;
  }>;
  ElementHover?: React.FC<{
    element: Element;
    isSelected: boolean;
    nodeElement: HTMLElement;
    path: Path;
  }>;
  ElementSelected?: React.FC<{
    element: Element;
    isHover: boolean;
    nodeElement: HTMLElement;
    path: Path;
  }>;
  MergetagPopover?: React.FC<{
    element: MergetagElement;
    onSave: (val?: string) => void;
  }>;
  interactiveStyle?: {
    hoverColor?: string;
    selectedColor?: string;
    dragColor?: string;
  };
  withEnhanceEditor?: (
    editor: CustomSlateEditor,
    props: EmailEditorProps
  ) => CustomSlateEditor;
  hoveringToolbar?: {
    prefix?: React.ReactNode;
    list?: (params: {
      isCollapsed?: boolean;
      isFocus?: boolean;
      selection: BaseSelection;
    }) => Array<TextFormat | React.FC>;
    subfix?: React.ReactNode;
    fixed?: boolean;
    follow?: "selection" | "container" | "page";
    iconSize?: number;
  };
  // TextFormat.AI_ASSISTANT needs to be configured in hoveringBar
  AIAssistant?: {
    onGenerate: (
      messages: Array<{ role: string; content: string }>
    ) => Promise<{ role: string; content: string }>;
  };
  categories?: Categories;
  showSourceCode?: boolean;
  universalElementSetting?: {
    elements: Record<string, Element>;
    list: Array<{
      label: string;
      elements: Array<{
        element: Element;
        thumbnail: string;
      }>;
    }>;
    onAddElement: (params: {
      name: string;
      element: Element;
      thumbnail: Blob;
    }) => Promise<Element>;
    onUpdateElement: (params: {
      uid: string;
      element: Element;
      thumbnail: Blob;
    }) => Promise<any>;
  };
  quantityLimitCheck?: (params: {
    element: Element;
    pageData: PageElement;
  }) => boolean;
  controller?: boolean;
  showPreview?: boolean;
  showSidebar?: boolean;
  showLogic?: boolean;
  showLayer?: boolean;
  compact?: boolean;
  height: string;
  unsplash?: {
    clientId: string;
    presetList?: Array<{
      query: string;
      label: string;
      image: string;
    }>;
  };
}

export interface MergetagItem {
  label: string;
  value: string;
  children?: MergetagItem[];
  selectable?: boolean;
  type?: "text" | "image" | "link";
}

export interface CategoryGridItem<T extends keyof ElementMap = any> {
  label: string;
  active?: boolean;
  blocks: Array<{
    type: Element["type"];
    payload?: Partial<ElementMap[T]>;
    title?: string | undefined;
    icon?: React.ReactNode;
  }>;
  displayType?: "grid";
}

export type Categories = Array<
  | CategoryGridItem
  | {
      label: string;
      active?: boolean;
      blocks: Array<{
        payload: string[][];
        title: string | undefined;
      }>;
      displayType: "column";
    }
  | {
      label: string;
      active?: boolean;
      blocks: Array<{
        payload?: Partial<Element>;
      }>;
      displayType: "widget";
    }
  | {
      label: string;
      active?: boolean;
      blocks: Array<React.ReactNode>;
      displayType: "custom";
    }
>;