Easy email

Introduction

Easy email is developed based on the MJML and has very good compatibility. At the same time, it can generate code through drag-and-drop editing.

Features:

• Drag and drop editor
• Can be converted into MJML, or generated through MJML
• Defined custom block
• Dynamic rendering
• Easily customize UI when you need
• Theme configuration

| Video Overview | | :-----------------------------------------------------------------------------------------------------------------: | | | | Watch video overview:https://www.bilibili.com/video/BV1YQ4y167bb |

Live Demo

Check out the live demo here: http://anteros-email-m-ryan.vercel.app

Getting started

$ npm install --save anteros-email-core anteros-email-editor anteros-email-extensions react-final-form

or

$ yarn add anteros-email-core anteros-email-editor anteros-email-extensions react-final-form

import React from 'react';
import { BlockManager, BasicType } from 'anteros-email-core';
import { EmailEditor, EmailEditorProvider } from 'anteros-email-editor';
import { SimpleLayout } from 'anteros-email-extensions';

import 'anteros-email-editor/lib/style.css';
import 'anteros-email-extensions/lib/style.css';
import '@arco-themes/react-anteros-email-theme/css/arco.css'; // theme, If you need to change the theme, you can make a duplicate in https://arco.design/themes/design/1799/setting/base/Color

const initialValues = {
  subject: 'Welcome to anteros-email',
  subTitle: 'Nice to meet you!',
  content: BlockManager.getBlockByType(BasicType.PAGE)!.create({}),
};

function App() {
  return (
    <EmailEditorProvider
      data={initialValues}
      height={'calc(100vh - 72px)'}
      autoComplete
      dashed={false}
    >
      {({ values }) => {
        return (
          <SimpleLayout>
            <EmailEditor />
          </SimpleLayout>
        );
      }}
    </EmailEditorProvider>
  );
}

export default App;

Examples

Please see https://github.com/m-Ryan/anteros-email-demo

Configuration

| property | Type | Description | | ------------------ | -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | | height | string / number | Set the height of the container | | data | interface IEmailTemplate { content: IPage; subject: string; subTitle: string; } | Source data | | children | ( props: FormState,helper: FormApi<IEmailTemplate, Partial>) => React.ReactNode | ReactNode | | onSubmit | Config<IEmailTemplate, Partial>['onSubmit']; | Called when the commit is triggered manually | | fontList | { value: string; label: string; }[]; | Default font list. | | interactiveStyle | { hoverColor?: string; selectedColor?: string;} | Interactive prompt color | | onUploadImage | (data: Blob) => Promise; | Triggered when an image is pasted or uploaded | | onAddCollection | (payload: CollectedBlock) => void; | Add to collection list | | onRemoveCollection | (payload: { id: string; }) => void; | Remove from collection list | | dashed | boolean | Show dashed | | autoComplete | boolean | Automatically complete missing blocks. For example, Text => Section, will generate Text=>Column=>Section | | mergeTags | Object | 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 | | previewInjectData | Object | Dynamic data for preview, it will overwrite mergeTags. | | onBeforePreview | (html: string, mergeTags: PropsProviderProps['mergeTags']) => string | Promise You can replace mergeTags when previewing. |

Hotkeys

| hotkey | Description | | ----------------- | ------------------------------------------------------------------------------------------------- | | mod+z | undo | | mod+y | redo | | delete/backspace | delete block | | tab / shift + tab | fast select block, if block is focusing,tab select next block & shift + tab select prev block |

Packages

• anteros-email-core

• anteros-email-editor

• anteros-email-extensions

How does it work?

Development

$ git clone [email protected]:arco-design/anteros-email.git
$ cd anteros-email
$ yarn install-all
$ yarn dev

License

The MIT License