payload-plugin-newsletter 0.8.6 → 0.9.0

package/CHANGELOG.md

@@ -1,4 +1,55 @@
-## [0.8.6] - 2025-07-02
+## [0.9.0] - 2025-07-04
+
+### Added
+- **Email Preview System**: Comprehensive email preview functionality for newsletters
+  - Real-time preview with desktop and mobile viewport modes
+  - Live validation of email HTML compatibility
+  - Test email functionality to preview in actual email clients
+  - Split-view editor with side-by-side content and preview
+
+- **Email-Safe Rich Text Editor**: Pre-configured Lexical editor for email content
+  - Limited to features that work reliably across email clients
+  - Supports: bold, italic, underline, strikethrough, links, lists, headings (h1-h3), alignment, blockquotes
+  - Excludes: tables, images, videos, JavaScript-dependent features, custom fonts
+
+- **Email HTML Utilities**:
+  - `convertToEmailSafeHtml()`: Converts Lexical editor state to email-compatible HTML with inline styles
+  - `validateEmailHtml()`: Validates HTML for email client compatibility
+  - `EMAIL_SAFE_CONFIG`: DOMPurify configuration for email sanitization
+  - Full TypeScript support for all utilities
+
+- **React Components**:
+  - `EmailPreview`: Standalone preview component with validation
+  - `EmailPreviewField`: Payload UI field component for forms
+  - `BroadcastEditor`: Split-view editor component
+
+- **Validation Features**:
+  - Checks HTML size limits (Gmail's 102KB limit)
+  - Detects unsupported CSS properties (flexbox, grid, positioning)
+  - Warns about missing alt text for accessibility
+  - Identifies external resources that won't load
+  - Catches JavaScript that will be stripped by email clients
+
+### Added Test Coverage
+- Comprehensive unit tests for email-safe HTML conversion
+- Validation utility tests with edge cases
+- 100% coverage of critical email processing paths
+
+### Documentation
+- New guide: "Email Preview Guide" (`docs/guides/email-preview.md`)
+- New API reference: "Email Utilities" (`docs/api-reference/email-utilities.md`)
+- Updated main documentation with v0.9.0 features
+
+### Dependencies
+- Added `isomorphic-dompurify@2.20.0` for secure HTML sanitization
+
+## [0.8.7] - 2025-07-01
+
+### Fixed
+- Fixed TypeScript errors with ExtendedPayloadRequest interface
+- Added TypeScript checking to CI/CD pipeline to prevent publishing with type errors
+
+## [0.8.6] - 2025-07-01
 
 ### Fixed
 - **Critical**: Fixed all endpoint handlers for Payload v3 compatibility

package/CLAUDE.md

@@ -72,7 +72,7 @@ Use these resources for understanding patterns and best practices:
 
 1. **Plugin Documentation**:
    - Check `docs/` directory for comprehensive plugin documentation
-   - `docs/references/broadcast-api-docs.md` - Complete Broadcast API reference (sendbroadcast.net)
+   - `docs/references/broadcast-docs-compiled.md` - Complete Broadcast API reference (sendbroadcast.net)
    - `docs/guides/email-providers.md` - Email provider setup and comparison
    - `docs/development/context7-setup.md` - How to set up context7 MCP for current docs
    - `docs/architecture/` - Plugin architecture and design decisions
@@ -144,6 +144,17 @@ This project uses **Bun** as the preferred package manager and runtime.
 4. Update documentation
 5. Make progressive commits
 
+### When Updating CHANGELOG.md
+1. First check the current date with: `date +"%Y-%m-%d"`
+2. Use the actual current date in changelog entries
+3. Follow semantic versioning principles
+
+### When Updating tracking.md or Any Progress Tracking
+1. Always check the current date first with: `date +"%Y-%m-%d"`
+2. Use the actual current date for "Started" and "Completed" columns
+3. Never use placeholder dates or guess dates
+4. Format dates as YYYY-MM-DD for consistency
+
 ### When Reviewing Reference Code
 - Extract patterns, not implementations
 - Generalize any specific logic
@@ -172,4 +183,4 @@ Before implementing any feature, ask:
 1. Is this generic enough for any Payload project?
 2. Are there any hardcoded values that should be configurable?
 3. Does this follow Payload's established patterns?
-4. Is this well-documented for users?
+4. Is this well-documented for users?

package/README.md

@@ -5,6 +5,8 @@
 
 A complete newsletter management plugin for [Payload CMS](https://github.com/payloadcms/payload) that provides subscriber management, magic link authentication, and email service integration out of the box.
 
+> **Important**: Version 0.8.7+ includes critical fixes for Payload v3 compatibility. If you're using Payload v3, please ensure you're on at least version 0.8.7 of this plugin.
+
 ## Features
 
 - 📧 **Complete Subscriber Management** - Ready-to-use subscriber collection with all essential fields
@@ -16,6 +18,9 @@ A complete newsletter management plugin for [Payload CMS](https://github.com/pay
 - 📊 **Analytics Ready** - UTM tracking and signup metadata collection
 - ⚙️ **Admin UI Configuration** - Manage email settings through Payload admin panel
 - 🔄 **Bidirectional Sync** - Sync unsubscribes from email services back to Payload
+- 👁️ **Email Preview** - Real-time preview with desktop/mobile views (v0.9.0+)
+- ✅ **Email Validation** - Built-in validation for email client compatibility (v0.9.0+)
+- 📝 **Email-Safe Editor** - Rich text editor limited to email-compatible features (v0.9.0+)
 
 ## Quick Start
 
@@ -138,6 +143,87 @@ After installing the plugin, you'll need to:
    - Subscribers will appear in `/admin/collections/subscribers`
    - Use the provided React components or API endpoints
 
+## Email Preview Features (v0.9.0+)
+
+The plugin includes comprehensive email preview functionality to ensure your newsletters look great across all email clients.
+
+### Email-Safe Rich Text Editor
+
+The plugin provides a pre-configured Lexical editor with only email-compatible features:
+
+```typescript
+import { createEmailContentField } from 'payload-plugin-newsletter/fields'
+
+const BroadcastsCollection = {
+  fields: [
+    createEmailContentField({
+      name: 'content',
+      required: true,
+    })
+  ]
+}
+```
+
+Features included:
+- Basic text formatting (bold, italic, underline, strikethrough)
+- Simple links
+- Ordered and unordered lists
+- Headings (H1, H2, H3)
+- Text alignment
+- Blockquotes
+
+### Real-Time Email Preview
+
+The plugin includes a preview component that shows how your email will look:
+
+```typescript
+{
+  name: 'preview',
+  type: 'ui',
+  admin: {
+    components: {
+      Field: 'payload-plugin-newsletter/components/EmailPreviewField'
+    }
+  }
+}
+```
+
+Preview features:
+- **Desktop & Mobile Views** - Switch between viewport sizes
+- **Live Updates** - See changes as you type
+- **Validation Warnings** - Catch compatibility issues before sending
+- **Test Email** - Send a test to your inbox
+
+### Email HTML Validation
+
+Built-in validation checks for:
+- HTML size limits (Gmail's 102KB limit)
+- Unsupported CSS properties
+- Missing alt text on images
+- External resources that won't load
+- JavaScript that will be stripped
+
+### Utilities
+
+Convert Lexical content to email-safe HTML:
+
+```typescript
+import { convertToEmailSafeHtml } from 'payload-plugin-newsletter/utils'
+
+const html = await convertToEmailSafeHtml(editorState)
+```
+
+Validate any HTML for email compatibility:
+
+```typescript
+import { validateEmailHtml } from 'payload-plugin-newsletter/utils'
+
+const result = validateEmailHtml(html)
+if (!result.valid) {
+  console.error('Email issues:', result.errors)
+}
+```
+
 ## Configuration Options
 
 ### Minimal Configuration

package/dist/client.d.cts

@@ -1,5 +1,5 @@
-import { SignupFormProps, PreferencesFormProps, Subscriber } from './types.cjs';
 import React from 'react';
+import { SignupFormProps, PreferencesFormProps, Subscriber } from './types.cjs';
 import 'payload';
 
 declare const NewsletterForm: React.FC<SignupFormProps>;

package/dist/client.d.ts

@@ -1,5 +1,5 @@
-import { SignupFormProps, PreferencesFormProps, Subscriber } from './types.js';
 import React from 'react';
+import { SignupFormProps, PreferencesFormProps, Subscriber } from './types.js';
 import 'payload';
 
 declare const NewsletterForm: React.FC<SignupFormProps>;