@sambegin/easy-email
v1.0.5
Published
<br> <p align="center"> <a aria-label="Easy email logo" href="https://email.maocanhua.cn/?utm_source=github"> <img src="./logo_text.svg" width="300"> </a> </p> <br>
Downloads
28
Readme
Easy email
Join Our Community
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 throughMJML
- Defined custom block
- Dynamic rendering
- Easily customize UI when you need
- Theme configuration
| Video Overview | | :----------------------------------------------: | | |
Live Demo
Check out the live demo here: https://email.maocanhua.cn
How does it work?
Roadmap
- Localization in progress.
- Awesome responsive, support mobile and desktop display different styles (without any compatibility issues)
- Replace shadow dom with iframe, support firefox/safari browsers.
- Improve documentation and add more usage examples
Donation
If you like this project, please consider donating.
Getting started
$ npm install --save easy-email-core easy-email-editor easy-email-extensions react-final-form
or
$ yarn add easy-email-core easy-email-editor easy-email-extensions react-final-form
import React from 'react';
import { BlockManager, BasicType, AdvancedType } from 'easy-email-core';
import { EmailEditor, EmailEditorProvider } from 'easy-email-editor';
import { ExtensionProps, StandardLayout } from 'easy-email-extensions';
import { useWindowSize } from 'react-use';
import 'easy-email-editor/lib/style.css';
import 'easy-email-extensions/lib/style.css';
// theme, If you need to change the theme, you can make a duplicate in https://arco.design/themes/design/1799/setting/base/Color
import '@arco-themes/react-easy-email-theme/css/arco.css';
const initialValues = {
subject: 'Welcome to Easy-email',
subTitle: 'Nice to meet you!',
content: BlockManager.getBlockByType(BasicType.PAGE)!.create({}),
};
export default function App() {
const { width } = useWindowSize();
const smallScene = width < 1400;
return (
<EmailEditorProvider
data={initialValues}
height={'calc(100vh - 72px)'}
autoComplete
dashed={false}
>
{({ values }) => {
return (
<StandardLayout
compact={!smallScene}
showSourceCode={true}
>
<EmailEditor />
</StandardLayout>
);
}}
</EmailEditorProvider>
);
}
Examples
Please see https://github.com/m-Ryan/easy-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
Development
$ git clone [email protected]:zalify/easy-email.git
$ cd easy-email
$ yarn
$ yarn install-all
$ yarn dev
License
The MIT License