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";
}
>;