Skip to main content

Easy Email Pro-theme

The theme system in Easy Email Pro provides a comprehensive set of hooks and components that allow you to customize the editor's appearance and behavior to match your application's needs.

Hooks​

These hooks give you access to the editor's state and functionality.

useEditorContext​

const useEditorContext: () => {
  values: EmailTemplate;
  pageDataVariables: Record<string, any>;
  inited: boolean;
  mergetagsData: Record<string, any>;
  setMergetagsData: React.Dispatch<React.SetStateAction<Record<string, any>>>;
  submit: () => void;
  dirty: boolean;
  initialValues: EmailTemplate;
  initialValuesRef: React.MutableRefObject<EmailTemplate>;
  getFieldValue: (path: Path | null, name: string) => any;
  setFieldValue: (path: Path | null, name: string, value: any) => void;
  getFieldDirty: (path: Path | null, name: string) => boolean;
  reset: (values: EmailTemplate) => void;
  valid: boolean;
};

This hook provides access to the editor's form state, including the current template values, merge tag data, and methods to manipulate the form.

useSelectedNode​

const useSelectedNode: <T extends Element>() => {
  selectedNode: T | undefined;
  selectedNodePath: Path | null;
  setSelectedNodePath: (path?: Path | null | undefined) => void;
};

useMergeTagsData​

const useMergeTagsData: () => {
  mergetagsData: Record<string, any>;
  setMergetagsData: React.Dispatch<React.SetStateAction<Record<string, any>>>;
};

useEditorThemeState​

const useEditorThemeState: () => {
  isPreview: boolean;
  zoom: number;
  setIsPreview: React.Dispatch<React.SetStateAction<boolean>>;
  togglePreview: () => void;
  setZoom: React.Dispatch<React.SetStateAction<number>>;
};

This hook gives you access to the editor's theme state, including preview mode and zoom level.

useElementDefault​

const useElementDefault: <T extends Element>({
  path,
  type,
}: {
  path: Path | null;
  type: Element["type"] | null;
}) => {
  attributes: T["attributes"];
  mobileAttributes: Partial<T["attributes"]>;
};

This hook provides the default attributes for a specific element type.

useUniversalContent​

const useUniversalContent: () => {
  open: (element: Element) => void;
  setElement: React.Dispatch<React.SetStateAction<Element | undefined>>;
};

This hook allows you to work with universal content elements.

useElementInteract​

const useElementInteract: () => {
  copyBlock: (path: Path) => void;
  deleteBlock: (path: Path) => void;
  clearCanvas: () => void;
  isChanged: boolean;
  resetSelectedNode: () => void;
  moveUp: (path: Path) => Path | undefined;
  moveDown: (path: Path) => Path | undefined;
};

This hook provides methods for interacting with elements, such as copying, deleting, and moving them.

useDragging​

const useDragging: ({
  element,
  nodeElement,
  action,
  cloneGhost,
}: {
  element: Element;
  nodeElement?: HTMLElement | null | undefined;
  action: "move" | "copy";
  cloneGhost?: boolean | undefined;
}) => {
  dragHandle: {
    onDragStart: (e: any) => void;
    onPointerDown(event: import("react").PointerEvent<any>): void;
    onDragEnd(): void;
    draggable: boolean;
  };
};

This hook provides drag-and-drop functionality for elements.

useFontFamily​

const useFontFamily: () => {
  fontList: {
    value: string;
    label: React.JSX.Element;
    href: string | undefined;
  }[];
};

This hook provides a list of available font families.

Components​

Easy Email Pro provides a rich set of components that you can use to build your own custom UI or override existing components.

import { BlockSideBar } from "./BlockSideBar";
import { ColumnLayout } from "./ColumnLayout";
import { ConfigurationDrawer } from "./ConfigurationDrawer";

import { ConfigurationPanel } from "./ConfigurationPanel";
import { Controller } from "./Controller";
import { EditorTabs } from "./EditorTabs";
import { Hotkeys } from "./Hotkeys";
import { UniversalElementEditorDrawer } from "./UniversalElementEditorDrawer";
import { PreviewEmail } from "./EditorTabs/components/PreviewEmail";
import { PreviewEmailDrawer } from "./EditorTabs/components/PreviewEmailDrawer";
import { FullHeightOverlayScrollbars } from "./FullHeightOverlayScrollbars";
import { HoveringToolbar } from "./HoveringToolbar";
import { RichTextBar } from "./HoveringToolbar/RichTextBar";
import { UnsplashImages } from "./UnsplashImages";
import { AttributePanel } from "./ConfigurationPanel/components/AttributePanel";
import { ConfigurationSideBar } from "./ConfigurationSideBar";
import {
  WidgetConfigPanel,
  WidgetTypeOptions,
} from "./ConfigurationPanel/components/WidgetConfigPanel";
import {
  BlockList,
  UniversalList,
  UniversalListItem,
} from "./BlockSideBar/BlockList";
import { MergeTagComponent } from "./MergeTagComponent";
import { ImageAction } from "@easy-email-pro-theme/themes/Minimalist/components/ImageAction";
import { UnsplashImagesDrawer } from "./UnsplashImagesDrawer";
import { EditorTopBar } from "@easy-email-pro-theme/themes/Minimalist/components/EditorTopBar";
import { ConfigurationToolbar } from "./ConfigurationToolbar";
import { DesktopEmailPreview } from "./EditorTabs/components/PreviewEmail/components/DesktopEmailPreview";
import { MobilePreview } from "./EditorTabs/components/PreviewEmail/components/MobilePreview";
import { CollapseWrapper } from "./ConfigurationPanel/components/CollapseWrapper/CollapseWrapper";
import { TextHTMLEditor } from "./ConfigurationPanel/Elements/Text/TextHTMLEditor";
import { AIPromptModal } from "./HoveringToolbar/componens/AIAssistant/AIPromptModal";
import { AIAssistant } from "./HoveringToolbar/componens/AIAssistant";
import { SourceCodePanel } from "./ConfigurationPanel/components/SourceCodePanel";

export { enhancer } from "./Form";
export * from "./Providers";

export const SharedComponents = {
  PreviewEmailDrawer: PreviewEmailDrawer,
  PreviewEmail: PreviewEmail,
  BlockSideBar: BlockSideBar,
  ConfigurationSideBar: ConfigurationSideBar,
  AttributePanel: AttributePanel,
  ColumnLayout: ColumnLayout,
  ConfigurationDrawer: ConfigurationDrawer,
  ConfigurationPanel: ConfigurationPanel,
  CollapseWrapper: CollapseWrapper,
  EditorTabs: EditorTabs,
  UniversalElementEditorDrawer: UniversalElementEditorDrawer,
  RichTextBar: RichTextBar,
  HoveringToolbar: HoveringToolbar,
  TextHTMLEditor: TextHTMLEditor,
  Hotkeys: Hotkeys,
  Controller: Controller,
  UnsplashImages: UnsplashImages,
  UnsplashImagesDrawer: UnsplashImagesDrawer,
  WidgetConfigPanel: WidgetConfigPanel,
  FullHeightOverlayScrollbars: FullHeightOverlayScrollbars,
  BlockList: BlockList,
  UniversalListItem: UniversalListItem,
  UniversalList: UniversalList,
  MergeTagComponent: MergeTagComponent,
  ImageAction: ImageAction,
  DesktopEmailPreview: DesktopEmailPreview,
  MobilePreview: MobilePreview,
  MinimalistEditorTopBar: EditorTopBar,
  ConfigurationToolbar: ConfigurationToolbar,
  AIAssistant: AIAssistant,
  AIPromptModal: AIPromptModal,
  SourceCodePanel: SourceCodePanel,
};

export { CollapseWrapper } from "./ConfigurationPanel/components/CollapseWrapper";
export { AttributesPanelWrapper } from "./ConfigurationPanel/components/AttributesPanelWrapper";
export { AttributeField } from "./ConfigurationPanel/components/AttributeField";
export { ConfigPanelsMap } from "./ConfigurationPanel/Elements";
export { WidgetTypeOptions };

export {
  ResponsiveField,
  ResponsiveTabs,
} from "./ConfigurationPanel/components/ResponsiveTabs";

export { IconFont } from "./IconFont";

Customizing the Theme​

You can customize the theme by:

  1. Overriding specific components
  2. Creating a custom theme from scratch
  3. Extending the existing theme with your own styles