Nighttime Peanut Migrations

    @topol.io/editor-react
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.0-alfa.1 • Public • Published
    Tailwind CSS

    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-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

    import TopolEditor from '@topol.io/editor-react';
    
    const customOptions = {
      authorize: {
        apiKey: "YOUR_API_TOKEN",
        userId: "some-user-id",
      },  
    };
    <TopolEditor options={customOptions}></TopolEditor>

    Call Topol Plugin actions

    To call actions to the editor import:

    import { TopolPlugin } from '@topol.io/editor-react';
    
    TopolPlugin.save();

    List of all available TopolPlugin actions:

    Action Description
    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
    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 more info

    Editor Events

    The callbacks from editor are received as component events.

    <TopolEditor options={customOptions} onSave={handleOnSave}></TopolEditor>

    List of all editor events

    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 When editor is fully loaded
    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
    unRedoChange When user clicks redo button, retunrs number of steps user redone more info
    onPreview When user switches to preview
    onAlert When alert appears in editor more info

    TypeScript

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

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

    Install

    npm i @topol.io/editor-react

    Homepage

    topol.io/

    DownloadsWeekly Downloads

    3

    Version

    0.0.0-alfa.1

    License

    Apache-2.0

    Unpacked Size

    23.2 kB

    Total Files

    12

    Last publish

    Collaborators

    • tomsq
    • ecomail