Skip to content

Latest commit

 

History

History
185 lines (134 loc) · 9 KB

readme.md

File metadata and controls

185 lines (134 loc) · 9 KB
Raw

Easy email



Using TypeScript

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 through MJML
  • Defined custom block
  • Dynamic rendering
  • Easily customize UI when you need
  • Theme configuration
Video Overview
Overview

Live Demo

Check out the live demo here: https://email.maocanhua.cn

Custom Services

For customized features or paid consultation services, please contact [email protected].

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

Vite: https://github.com/m-Ryan/easy-email-demo

Nextjs: https://github.com/m-Ryan/easy-email-nextjs-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

How does it work?


Packages


Development

$ git clone [email protected]:zalify/easy-email.git
$ cd easy-email


$ yarn  
$ yarn install-all
$ yarn dev

If you need some new features, we always welcome you to submit a PR.

License

The MIT License