Simple Example

The Simple example demonstrates the most basic implementation of Easy Email Pro editor with essential features enabled.

Overview

This example shows how to:

• Set up a basic email editor
• Configure block categories
• Handle file uploads
• Save email templates

Code Example

import { useMemo } from "react";
import { EmailEditorProvider, EmailTemplate } from "easy-email-pro-editor";
import { IconFont, Retro, ThemeConfigProps } from "easy-email-pro-theme";
import "easy-email-pro-theme/lib/style.css";
import "@arco-themes/react-easy-email-pro/css/arco.css";
import { ElementType, t } from "easy-email-pro-core";
import { Layout } from "@arco-design/web-react";

const categories: ThemeConfigProps["categories"] = [
  {
    get label() {
      return t("Content");
    },
    active: true,
    displayType: "grid",
    blocks: [
      {
        type: ElementType.STANDARD_PARAGRAPH,
        icon: (
          <IconFont
            className={"block-list-grid-item-icon"}
            iconName="icon-text"
          />
        ),
      },
      {
        type: ElementType.STANDARD_IMAGE,
        payload: {},
        icon: (
          <IconFont
            className={"block-list-grid-item-icon"}
            iconName="icon-img"
          />
        ),
      },
      {
        type: ElementType.STANDARD_BUTTON,
        icon: (
          <IconFont
            className={"block-list-grid-item-icon"}
            iconName="icon-button"
          />
        ),
      },
      // ... more blocks
    ],
  },
  {
    get label() {
      return t("Layout");
    },
    active: true,
    displayType: "column",
    blocks: [
      {
        get title() {
          return t("1 column");
        },
        payload: [["100%"]],
      },
      {
        get title() {
          return t("2 column");
        },
        payload: [
          ["50%", "50%"],
          ["33%", "67%"],
          // ... more layouts
        ],
      },
    ],
  },
];

export default function MyEditor() {
  const initialValues: EmailTemplate | null = useMemo(() => {
    return {
      subject: "Welcome Email",
      content: {
        type: "page",
        data: {},
        attributes: {},
        children: [],
      },
    };
  }, []);

  const onUpload = (file: Blob): Promise<string> => {
    // Upload file to your server
    return Promise.resolve("https://example.com/image.png");
  };

  const onSubmit = async (values: EmailTemplate) => {
    console.log("Email template:", values);
    // Save to your backend
  };

  const config = Retro.useCreateConfig({
    height: "calc(100vh - 66px)",
    onUpload,
    initialValues: initialValues,
    onSubmit: onSubmit,
    categories,
    showSourceCode: true,
    showLayer: true,
    showPreview: true,
    showSidebar: true,
  });

  return (
    <EmailEditorProvider {...config}>
      <Layout.Content>
        <Retro.Layout></Retro.Layout>
      </Layout.Content>
    </EmailEditorProvider>
  );
}

Key Features

• Basic Configuration: Minimal setup with essential editor features
• Block Categories: Content and layout blocks organized in categories
• File Upload: Simple file upload handler
• Template Saving: Basic submit handler for saving templates

Configuration Options

The example uses these configuration options:

• height: Editor height
• onUpload: File upload handler
• initialValues: Initial email template
• onSubmit: Submit handler
• categories: Block categories configuration
• showSourceCode: Enable source code view
• showLayer: Enable layer panel
• showPreview: Enable preview panel
• showSidebar: Enable sidebar

Next Steps

After understanding the basic setup, you can:

• Add more block types
• Customize the theme
• Integrate with your backend API
• Add custom blocks
• Enable advanced features