Skip to content

ezingme/easy-email

 
 

Repository files navigation

Easy email



Using TypeScript

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
Overview
Watch video overview:https://www.bilibili.com/video/BV1YQ4y167bb

Live Demo

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

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 } from 'easy-email-core';
import { EmailEditor, EmailEditorProvider } from 'easy-email-editor';
import { SimpleLayout } from 'easy-email-extensions';

import 'easy-email-editor/lib/style.css';
import 'easy-email-extensions/lib/style.css';
import '@arco-themes/react-easy-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 Easy-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/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


How does it work?


Development

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

License

The MIT License

About

DnD Email Editor based on React.js and MJML, made by @AfterShip FE team.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 85.5%
  • HTML 8.9%
  • SCSS 2.3%
  • CSS 1.9%
  • JavaScript 1.4%