EmailEditor Module

A modular, reusable email editor component built with React and MUI.

Installation

npm install @shopnex/editor-sample

Usage

import React, { useState } from 'react';
import { EmailEditor, TEditorConfiguration } from '@shopnex/editor-sample';

function MyApp() {
  const [htmlOutput, setHtmlOutput] = useState('');
  const [jsonOutput, setJsonOutput] = useState<TEditorConfiguration>({});
  
  const configuration: TEditorConfiguration = {
    root: {
      type: 'EmailLayout',
      data: {
        backdropColor: '#F8F8F8',
        canvasColor: '#FFFFFF',
        textColor: '#242424',
        fontFamily: 'MODERN_SANS',
        childrenIds: []
      }
    }
  };

  const handleChange = ({ html, json }: { html: string; json: TEditorConfiguration }) => {
    console.log('Updated HTML:', html);
    console.log('Updated JSON:', json);
    setHtmlOutput(html);
    setJsonOutput(json);
  };

  return (
    <EmailEditor 
      configuration={configuration}
      onChange={handleChange}
    />
  );
}

Props

EmailEditor

| Prop | Type | Description | |------|------|-------------| | configuration | TEditorConfiguration | Initial email template configuration | | onChange | (output: { html: string; json: TEditorConfiguration }) => void | Callback fired when HTML or JSON output changes |

Features

• Visual email editor with drag-and-drop interface
• Real-time HTML and JSON output
• Undo/Redo functionality
• Mobile and desktop preview modes
• Configurable blocks: Text, Image, Button, Container, etc.
• Import/Export JSON templates

Development

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

Type Definitions

The module exports the following types:

• EmailEditorProps: Props interface for the EmailEditor component
• TEditorConfiguration: Configuration object structure
• TEditorBlock: Individual block configuration structure