@creaditor/newsletter-starterkit

v1.0.39

Published

3 days ago

Creaditor Newsletter Editor - Starterkit for creating beautiful email newsletters

0High
0Medium
0Low

adidui

creaditor

newsletter email editor visual-editor drag-and-drop wysiwyg email-builder newsletter-builder creaditor

@creaditor/newsletter-starterkit

📧 A powerful visual editor for creating beautiful email newsletters

A drag-and-drop newsletter editor with everything built-in. No external dependencies required!

✨ Features

🎨 Visual Drag & Drop - Intuitive interface for building newsletters
📱 Responsive Design - Mobile-friendly emails out of the box
🔧 Customizable - Full control over styles and components
🌍 i18n Support - Multiple languages supported
💾 Auto-save - Never lose your work
📝 Rich Text Editor - Powerful text editing capabilities
🖼️ Media Gallery - Easy image and media management
🎯 Merge Tags - Personalize emails for each recipient
⚡ Self-Contained - All files bundled, no CDN required

📦 Installation

npm install @creaditor/newsletter-starterkit

Or with yarn:

yarn add @creaditor/newsletter-starterkit

🚀 Quick Start

Simple HTML Integration

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Newsletter Editor</title>
</head>
<body>
    <div id="root"></div>
    
    <!-- Load the editor bundle -->
    <script src="node_modules/@creaditor/newsletter-starterkit/dist/creaditor.bundle.js"></script>
    
    <script>
        // Initialize the editor
        const editor = new cdtrStarter({
            target: document.getElementById('root'),
            width: '650px',
            language: 'en',
            onSave: (data) => {
                console.log('Newsletter saved:', data);
                // Send to your backend
            }
        });
    </script>
</body>
</html>

With Configuration

const editor = new cdtrStarter({
    target: document.getElementById('root'),
    width: '650px',
    language: 'en',
    
    // Document name
    documentName: 'My Newsletter',
    
    // User information
    user: {
        id: 'user123',
        email: '[email protected]',
        name: 'John Doe',
        logo: 'https://example.com/logo.png'
    },
    
    // Initial components (optional)
    components: [],
    
    // Callbacks
    onSave: (data) => {
        console.log('Content saved:', data);
    },
    
    onChange: () => {
        console.log('Content changed');
    },
    
    onSendTestEmail: (email) => {
        console.log('Send test to:', email);
    }
});

📖 API

Constructor Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | target | HTMLElement | required | The DOM element to mount the editor | | width | string | '650px' | Width of the newsletter | | language | string | 'en' | Editor language (en, he, etc.) | | languageJson | object | - | Custom language translations | | documentName | string | - | Name of the document | | components | array | [] | Initial newsletter components | | user | object | - | User information (id, email, name, logo) | | onSave | function | - | Called when content is saved | | onChange | function | - | Called when content changes | | onSendTestEmail | function | - | Called when test email is requested | | fonts | array | - | Available fonts | | mergeTags | object | - | Merge tags for personalization | | plugins | array | [] | Additional plugins |

Methods

// Get newsletter data as JSON
const data = await editor.commands.toJSON();

🎨 Customization

Custom Fonts

const editor = new cdtrStarter({
    target: document.getElementById('root'),
    fonts: [
        {
            id: 'Roboto',
            cssRule: 'Roboto, sans-serif',
            name: 'Roboto',
            url: 'https://fonts.googleapis.com/css2?family=Roboto&display=swap'
        }
    ]
});

Merge Tags (Personalization)

const editor = new cdtrStarter({
    target: document.getElementById('root'),
    mergeTags: {
        items: [
            { value: 'name', label: 'First Name' },
            { value: 'email', label: 'Email' },
            { value: 'company', label: 'Company' }
        ],
        prefix: '{{',
        suffix: '}}',
        title: 'Personalization'
    }
});

🌍 Internationalization

Supported languages:

English (en)
Hebrew (he)
Custom (provide your own languageJson)

const editor = new cdtrStarter({
    target: document.getElementById('root'),
    language: 'he', // Hebrew
    // Or provide custom translations:
    languageJson: {
        "save": "Save",
        "cancel": "Cancel",
        // ... more translations
    }
});

📁 Package Contents

@creaditor/newsletter-starterkit/
└── dist/
    ├── creaditor.bundle.js     (2.2MB - Main bundle)
    ├── index.html              (Demo page)
    └── [chunk files].js        (Lazy-loaded modules)

📱 Browser Support

Chrome (latest)
Firefox (latest)
Safari (latest)
Edge (latest)

💡 Integration Examples

With CDN (if self-hosting)

<script src="https://your-cdn.com/creaditor.bundle.js"></script>
<script>
    const editor = new cdtrStarter({
        target: document.getElementById('root')
    });
</script>

With React (Load via useEffect)

import { useEffect, useRef } from 'react';

function NewsletterEditor() {
    const rootRef = useRef(null);
    
    useEffect(() => {
        // Load script
        const script = document.createElement('script');
        script.src = '/node_modules/@creaditor/newsletter-starterkit/dist/creaditor.bundle.js';
        script.onload = () => {
            new window.cdtrStarter({
                target: rootRef.current,
                width: '100%',
                language: 'en'
            });
        };
        document.body.appendChild(script);
        
        return () => document.body.removeChild(script);
    }, []);
    
    return <div ref={rootRef} />;
}

Changelog

1.0.37-preview.3

Merged updates since 1.0.37-preview.1

Link editing and picker fixes:
- Improved link insertion and unlink behavior in the text editor so selection handling is more reliable and link styles do not leak into surrounding content.
- Fixed link-related styling resets after insertion and improved URL processing behavior.
Transfer data / sharing workflow:
- Replaced the old import/export panel with a new transfer data flow in the sidebar.
- Added UI for generating and entering access codes, API versioning support, improved template loading feedback, and multilingual strings for the new flow.
- Cleaned up related state handling, subscriptions, and timers for better stability.
Custom bullet enhancements:
- Added support for custom bullet icons, including icon URL handling, default images, color and size controls, and conditional icon options in the sidebar.
- Improved spacing and styling support for bullet content.
Editor polish:
- Swapped the undo/redo icons to match expected behavior.
- Added smaller editor consistency fixes, including dataset assignment during sorting and preserving default button text when creating new buttons.

1.0.37-preview.1

Link picker URL input

Fixed: Typing a dot (.) in the URL field (e.g. sendmsg.co) no longer removes the character. The input was controlled from parent state and re-renders were overwriting the value before the dot was applied.
Protocol input (@creaditor/linkpicker):
- handleInput now triggers onChange for any character when the cursor is at the end, not only alphanumeric characters, so dots and other URL-safe characters are kept.
- Removed the “last character must be alphanumeric” check; we only skip when the entire value is non-alphanumeric (e.g. ... or ---).
Link element:
- onKeyDown no longer calls onChangeLink(event) or onBlur() on every keypress. On keydown, event.target.value is still the value before the key is applied, which caused the new character to be dropped. Submit (Enter) is handled separately using the current input value.
- URL field is “uncontrolled while focused”: while the URL input is focused, the displayed value is the raw string the user is typing (_urlInputRawValue) instead of the parent’s myHref, so re-renders no longer overwrite what the user types (e.g. the dot in sendmsg.co).
- Added focus/blur handling for the URL input (onUrlInputFocus / onUrlInputBlur) and pass onFocus into the protocol input so the focus flag and raw value stay in sync.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@creaditor/newsletter-starterkit

✨ Features

📦 Installation

🚀 Quick Start

Simple HTML Integration

With Configuration

📖 API

Constructor Options

Methods

🎨 Customization

Custom Fonts

Merge Tags (Personalization)

🌍 Internationalization

📁 Package Contents

📱 Browser Support

💡 Integration Examples

With CDN (if self-hosting)

With React (Load via useEffect)

Changelog

1.0.37-preview.3

1.0.37-preview.1

📄 License

🔗 Links