---

Easy and quick! Drag and drop HTML editor and builder for beautiful responsive email templates.

Documentation

Installation

Install Editor from NPM using:

``sh
npm install @topol.io/editor-react

//or

yarn add @topol.io/editor-react
`

Use in Component

In your React component import and add the simplest options.

For more options see the docs for TopolOptions configuration

`js
import TopolEditor from '@topol.io/editor-react';

const customOptions = {
authorize: {
apiKey: 'YOUR_API_TOKEN',
userId: 'some-user-id',
},
};
`

`jsx

`

Call Topol Plugin actions

To call actions to the editor import:

`js
import { TopolPlugin } from '@topol.io/editor-react';

TopolPlugin.save();
`

For more TopolPlugin functions refer to the TopolPlugin actions

Editor Events

The callbacks from editor are received as component events.

`tsx
options={customOptions}
onSave={handleOnSave}
>
`

$3

| Event | Description |
| ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| @onSave | Returns object which contains html and json of the template more info |
| @onSaveAndClose | Returns object which contains html and json of the template more info |
| @onTestSend | Returns object which contains email, html and json of the template more info |
| @onOpenFileManager | When user clicks file manager open more info |
| @onLoaded | After editor template is loaded using TopolPlugin.load() more info |
| @onInit | When editor inits more info |
| @onBlockSave | When user saves block in editor, returns object of type ISavedBlock more info |
| @onBlockRemove | When user removes saved block, returns id of saved block to be removed more info |
| @onBlockEdit | When user edits saved block, returns id of saved block to be updated more info |
| @onUndoChange | When user clicks undo button, retunrs number of steps user undone more info |
| @onRedoChange | When user clicks redo button, retunrs number of steps user redone more info |
| @onPreview | When user switches to preview more info |
| @onAlert | When alert appears in editor more info |
| @onClose | When close is click inside WindowBar more info |
| @onEdittedWithoutSaveChanged | When user is about to leave an editor with unsaved changes more info |
| @onOpenCustomBlockDialog | When user clicks on the open dialog in custom block more info |
| @onTemplateRename | When user clicks on the pencil icon next to the template name more info |
| @updateTestingEmailAddresses | When user edits the email list in preview more info |
| @onError | When an error that cannot be handled happened in the editor more info |

TypeScript

Topol Editor provides full TypeScript integration and exports all necessary types.

`tsx
import {
ITopolOptions,
INotification,
ISavedBlock,
} from '@topol.io/editor-react';
``