payload-plugin-newsletter 0.19.0 → 0.20.1

package/CHANGELOG.md

@@ -1,3 +1,58 @@
+## [0.20.1] - 2025-07-31
+
+### Fixed
+- **Next.js App Router Compatibility** - Fixed React `createContext` error in Next.js App Router
+  - Added missing `"use client"` directive to `PluginConfigContext`
+  - Added `"use client"` directive to component barrel exports
+  - Fixed server-side rendering issues with client components
+  - Improved compatibility with Next.js 15+ App Router
+
+### Technical Changes
+- Added `"use client"` directive to `PluginConfigContext.tsx`
+- Added `"use client"` directive to `EmptyField.tsx`
+- Added `"use client"` directive to component index files
+- Ensured proper server/client component separation
+
+## [0.20.0] - 2025-07-31
+
+### Added
+- **Email Preview Customization** - Full control over email preview rendering
+  - New `emailPreview` customization options in `BroadcastCustomizations` interface
+  - `wrapInTemplate` option to disable default email template wrapping
+  - `customWrapper` function for custom email template wrappers
+  - Support for both sync and async custom wrapper functions
+  - Pass subject and preheader to custom wrapper for complete control
+  - `customPreviewComponent` option (planned) for replacing the entire preview component
+
+### Enhanced
+- **Plugin Configuration Context**
+  - Added `PluginConfigContext` for passing configuration throughout component tree
+  - `usePluginConfig` hook for required config access
+  - `usePluginConfigOptional` hook for safe optional config access
+  - Context provider integration in component hierarchy
+
+- **Email Preview Component**
+  - Updated to respect email preview customization options
+  - Backward compatible with default template wrapping behavior
+  - Support for both prop-based and context-based config passing
+  - Seamless integration with custom wrapper functions
+
+- **Preview Endpoint**
+  - Updated to use email preview customization options
+  - Consistent behavior between UI preview and API preview
+  - Maintains all existing functionality while adding customization
+
+### Technical Improvements
+- **Type Safety** - Full TypeScript support for all customization options
+- **Backward Compatibility** - All changes maintain 100% backward compatibility
+- **Flexible Architecture** - Easy to extend with additional customization options
+- **Performance** - No performance impact when customization is not used
+
+### Developer Experience
+- **Easy Configuration** - Simple to disable template wrapping or provide custom wrapper
+- **Context Support** - Components can access config without prop drilling
+- **Comprehensive Types** - Well-documented interfaces with examples
+
 ## [0.19.0] - 2025-07-30
 
 ### Added

package/README.md

@@ -806,6 +806,22 @@ newsletterPlugin({
             description: 'Custom description'
           }
         })
+      },
+      // Email preview customization (v0.20.0+)
+      emailPreview: {
+        // Disable default email template wrapping
+        wrapInTemplate: false,
+        
+        // Or provide a custom wrapper function
+        customWrapper: async (content, { subject, preheader }) => {
+          return `
+            <div class="my-custom-template">
+              <h1>${subject}</h1>
+              ${preheader ? `<p class="preheader">${preheader}</p>` : ''}
+              <div class="content">${content}</div>
+            </div>
+          `
+        }
       }
     }
   }
@@ -814,6 +830,87 @@ newsletterPlugin({
 
 **Note**: Custom blocks are processed server-side to ensure email compatibility and prevent Next.js serialization errors.
 
+### Email Preview Customization (v0.20.0+)
+
+The plugin now supports full customization of email preview rendering. This is useful when you have custom email templates and want the preview to match what's actually sent.
+
+#### Disable Default Template Wrapping
+
+If you're using your own email template system, you can disable the default template wrapping:
+
+```typescript
+newsletterPlugin({
+  customizations: {
+    broadcasts: {
+      emailPreview: {
+        wrapInTemplate: false // Show raw HTML without email template
+      }
+    }
+  }
+})
+```
+
+#### Custom Email Wrapper
+
+Provide your own wrapper function to match your email service's template:
+
+```typescript
+newsletterPlugin({
+  customizations: {
+    broadcasts: {
+      emailPreview: {
+        customWrapper: async (content, { subject, preheader }) => {
+          // Return your custom email template
+          return `
+            <!DOCTYPE html>
+            <html>
+              <head>
+                <title>${subject}</title>
+                <!-- Your custom styles -->
+              </head>
+              <body>
+                <div class="preheader">${preheader}</div>
+                ${content}
+                <!-- Your footer -->
+              </body>
+            </html>
+          `
+        }
+      }
+    }
+  }
+})
+```
+
+#### Advanced: Using with React Email
+
+If you're using React Email for templates, you can integrate it with the preview:
+
+```typescript
+import { render } from '@react-email/render'
+import { MyEmailTemplate } from './emails/MyEmailTemplate'
+
+newsletterPlugin({
+  customizations: {
+    broadcasts: {
+      emailPreview: {
+        customWrapper: async (content, { subject, preheader }) => {
+          return await render(
+            <MyEmailTemplate 
+              subject={subject}
+              preheader={preheader}
+              content={content}
+            />
+          )
+        }
+      }
+    }
+  }
+})
+```
+
+This ensures your preview exactly matches what subscribers will see.
+
 For complete extensibility documentation, see the [Extension Points Guide](./docs/architecture/extension-points.md).
 
 ## Troubleshooting

package/dist/collections.cjs

@@ -976,6 +976,12 @@ async function convertToEmailSafeHtml(editorState, options) {
   const rawHtml = await lexicalToEmailHtml(editorState, options?.mediaUrl, options?.customBlockConverter);
   const sanitizedHtml = import_isomorphic_dompurify.default.sanitize(rawHtml, EMAIL_SAFE_CONFIG);
   if (options?.wrapInTemplate) {
+    if (options.customWrapper) {
+      return await Promise.resolve(options.customWrapper(sanitizedHtml, {
+        preheader: options.preheader,
+        subject: options.subject
+      }));
+    }
     return wrapInEmailTemplate(sanitizedHtml, options.preheader);
   }
   return sanitizedHtml;
@@ -1870,11 +1876,14 @@ var createBroadcastPreviewEndpoint = (config, _collectionSlug) => {
         const mediaUrl = req.payload.config.serverURL ? `${req.payload.config.serverURL}/api/media` : "/api/media";
         req.payload.logger?.info("Populating media fields for email preview...");
         const populatedContent = await populateMediaFields(content, req.payload, config);
+        const emailPreviewConfig = config.customizations?.broadcasts?.emailPreview;
         const htmlContent = await convertToEmailSafeHtml(populatedContent, {
-          wrapInTemplate: true,
+          wrapInTemplate: emailPreviewConfig?.wrapInTemplate ?? true,
           preheader,
+          subject,
           mediaUrl,
-          customBlockConverter: config.customizations?.broadcasts?.customBlockConverter
+          customBlockConverter: config.customizations?.broadcasts?.customBlockConverter,
+          customWrapper: emailPreviewConfig?.customWrapper
         });
         return Response.json({
           success: true,