Skip to content

EswaramoorthyKarthikeyan/dnde

 
 

Repository files navigation



Drag and Drop E-mail Editor

release npm license

screens / live demo here

Installation

# Yarn
yarn add dnd-email-editor

# NPM
npm install dnd-email-editor

What's included

Props that can be passed to the component:

Prop Type Default Optional Description
preview boolean true true show/hide the inbuilt preview button.
showUndoRedo boolean true true show/hide the inbuilt undo/redo button.

You can create your own undoredo functionality with undoredo from api methods below

Editor exposes these api methods

  • getHtml - export the design as html content
  • getJson - export as json string, this string can then be used with loadJson
  • loadJson - load an existing design from json string
  • undoredo - undo and redo actions

Usage

  • Importing
import Editor from 'dnd-email-editor';

return <Editor />;
  • Setup a ref using useRef and pass it to editor
const ref = React.useRef(null);

return <Editor ref={ref} />;
  • Using getHtml(), getJson(), loadJson(), undoredo
const logValues = () => {
  if (ref.current) {
    const html = ref.current.getHtml();
    const json = ref.current.getJson();
    console.log(html, json);
  }
};

const loadJson = (json: string) => {
  if (ref.current) {
    ref.current.loadJson(json);
  }
};

const performUndoAction = () => {
  if (ref.current) {
    ref.current.undoActionCallback();

    // to check if undo is possible
    console.log('is undo empty: ', ref.current.isUndoEmpty());
  }
};

const performRedoAction = () => {
  if (ref.current) {
    ref.current.redoActionCallback();

    // to check if redo is possible
    console.log('is redo empty: ', ref.current.isRedoEmpty());
  }
};
  • Typescript

Inorder to use typescript and get cool definitions, just pass the type to the ref

import Editor from 'dnd-email-editor';

const ExampleComponent = () => {

- const ref = useRef(null);
+ const ref = useRef<Editor>(null);

  return (
    <Editor ref={ref}/>
  );

}

Purpose

There are soo many drag and drop editors that helps in creating website but not mails, because mails differ a lot from a normal html webpage

  • even if there are mail editors available, they are paid and not open-source.

One such example would be unlayer, It claims to be opensource but its not.

  • Looking at their source code, they only provide their loader-script and call it as open-source
  • later they ask you to pay for its features.

the above reasons and also I was inspired by drag-n-drop editors in general, so I decided to make one.

Features

  • Responsive and mobile friendly emails
  • Design emails by drag and drop
  • Import/Export designs
    • Export/Import as JSON
    • Export as HTML
  • Manage Fonts
    • add custom fonts
    • list / add/ deletefonts
  • Go back and forth with Undo / Redo
  • Preview the design in the browser (Mobile & PC)

Built with

Inspired by

About

Drag and drop editor Designed for Mails

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 84.3%
  • HTML 8.8%
  • CSS 2.9%
  • JavaScript 2.7%
  • Other 1.3%