# @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
```bash
npm install @creaditor/newsletter-starterkit
```
Or with yarn:
```bash
yarn add @creaditor/newsletter-starterkit
```
## 🚀 Quick Start
### Simple HTML Integration
```html
Newsletter Editor
```
### With Configuration
```javascript
const editor = new cdtrStarter({
target: document.getElementById('root'),
width: '650px',
language: 'en',
// Document name
documentName: 'My Newsletter',
// User information
user: {
id: 'user123',
email: 'user@example.com',
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
```javascript
// Get newsletter data as JSON
const data = await editor.commands.toJSON();
```
## 🎨 Customization
### Custom Fonts
```javascript
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)
```javascript
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)
```javascript
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)
```html
```
### With React (Load via useEffect)
```jsx
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 ;
}
```
## 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.
## 📄 License
## 🔗 Links
- [GitHub Repository](https://github.com/yourusername/creaditor-monorepo)
- [Report Issues](https://github.com/yourusername/creaditor-monorepo/issues)
---