0.2.0 • Published 4 months ago

@topol.io/editor v0.2.0

Weekly downloads
-
License
Apache-2.0
Repository
-
Last release
4 months ago

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

Documentation

Installation

Install Editor from NPM using:

npm install @topol.io/editor

//or

yarn add @topol.io/editor

Usage

Add HTML element Editor will load to

<div id="app" style="position: absolute; width: 100%; height: 100%"></div>

In your JS or TS file import TopolPlugin, initialize the editor, as an ID provide the id you defined the HTML, in this example its app

For more options see the docs for TopolOptions configuration

import TopolPlugin from "@topol.io/editor";

const TOPOL_OPTIONS = {
  id: "#app",
  authorize: {
    apiKey: "YOUR_API_TOKEN",
    userId: "some-user-id",
  },
  callbacks: {
    onSave(json, html) {},
  },
};

TopolPlugin.init(TOPOL_OPTIONS);

Call Topol Plugin actions

To call actions to the editor import:

import { TopolPlugin } from "@topol.io/editor";

TopolPlugin.save();

List of all available TopolPlugin actions:

ActionDescription
TopolPlugin.save()Saves the content of the editor more info
TopolPlugin.load(template)Loads the provided template more info
TopolPlugin.togglePreview()Toggles editor preview more info
TopolPlugin.togglePreviewSize()Toggles editor preview size more info
TopolPlugin.undo()Undo change in editor more info
TopolPlugin.redo()Redo change in editor more info
TopolPlugin.setSavedBlocks(savedblock: ISavedBlock[])Sets the saved blocks more info
TopolPlugin.createNotification(notification: INotification)Creates editor's notification more info
TopolPlugin.changeEmailToMobile()Change email to mobile view more info
TopolPlugin.changeEmailToDesktop()Change email to desktop view more info
TopolPlugin.toggleBlocksAndStructuresVisibility()Toggle hidden structures visibility for blocks and structures more info
TopolPlugin.destroy()Destroys the editor initialization
TopolPlugin.chooseFile()Chooses the file if image block is active more info
TopolPlugin.openPremadeTemplatesSelection()Opens the premade templates modal pick more info
TopolPlugin.refreshComments(key: string)Refreshes the conversation more info
TopolPlugin.setActiveMembers(activeMemers: string[])Sets the active members
TopolPlugin.setTemplateName(name: string)Sets the name of template more info
TopolPlugin.updateApiAuthorizationHeader(newHeader: string \| Record<string, string>)Refreshes the authorization tokens more info
TopolPlugin.updateCustomBlockContent(content: string)Refreshes the authorization tokens more info
TopolPlugin.setMergeTags(mergeTags: Array<IMergeTagGroup \| IMergeTag>)Sets new array of merge tags. more info

List of all editor callbacks

EventDescription
onSaveReturns object which contains html and json of the template more info
onSaveAndCloseReturns object which contains html and json of the template more info
onTestSendReturns object which contains email, html and json of the template more info
onOpenFileManagerWhen user clicks file manager open more info
onLoadedAfter editor template is loaded using TopolPlugin.load() more info
onInitWhen editor inits more info
onBlockSaveWhen user saves block in editor, returns object of type ISavedBlock more info
onBlockRemoveWhen user removes saved block, returns id of saved block to be removed more info
onBlockEditWhen user edits saved block, returns id of saved block to be updated more info
onUndoChangeWhen user clicks undo button, retunrs number of steps user undone more info
onRedoChangeWhen user clicks redo button, retunrs number of steps user redone more info
onPreviewWhen user switches to preview more info
onAlertWhen alert appears in editor more info
onCloseWhen close is click inside WindowBar more info
onEdittedWithoutSaveChangedWhen user is about to leave an editor with unsaved changes more info
onOpenCustomBlockDialogWhen user clicks on the open dialog in custom block more info
onTemplateRenameWhen user clicks on the pencil icon next to the template name more info
updateTestingEmailAddressesWhen user edits the email list in preview more info
onErrorWhen an error that cannot be handled happened in the editor more info

TypeScript

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

import { ITopolOptions, INotification, ISavedBlock } from "@topol.io/editor";
0.2.0

4 months ago

0.1.0

7 months ago

0.0.4

1 year ago

0.0.3

1 year ago

0.0.2

1 year ago

0.0.1

1 year ago

0.0.0

1 year ago

0.0.0-alfa.24

2 years ago

0.0.0-alfa.23

2 years ago

0.0.0-alfa.22

2 years ago

0.0.0-alfa.21

2 years ago

0.0.0-alfa.20

2 years ago

0.0.0-alfa.19

2 years ago

0.0.0-alfa.18

2 years ago

0.0.0-alfa.17

2 years ago

0.0.0-alfa.15

3 years ago

0.0.0-alfa.16

3 years ago

0.0.0-alfa.14

3 years ago

0.0.0-alfa.13

3 years ago

0.0.0-alfa.12

3 years ago

0.0.0-alfa.11

3 years ago

0.0.0-alfa.10

3 years ago

0.0.0-alfa.9

3 years ago

0.0.0-alfa.8

3 years ago

0.0.0-alfa.7

3 years ago

0.0.0-alfa.6

3 years ago

0.0.0-alfa.5

3 years ago

0.0.0-alfa.4

3 years ago

0.0.0-alfa.3

3 years ago

0.0.0-alfa.2

3 years ago

0.0.0-alfa.1

3 years ago