payload-plugin-newsletter 0.18.0 → 0.20.0

package/CHANGELOG.md

@@ -1,3 +1,106 @@
+## [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
+- **Responsive Email Design** - Complete overhaul of email template for mobile-first responsive design
+  - Mobile-optimized email template with responsive CSS media queries
+  - Responsive typography with proper mobile font sizes and line heights
+  - Mobile-friendly image scaling and spacing
+  - Dark mode support with `prefers-color-scheme` media queries
+  - Comprehensive email client compatibility (Outlook, Gmail, Apple Mail)
+  - Mobile-specific CSS classes for precise responsive control
+
+### Enhanced
+- **Email Template Architecture**
+  - Completely redesigned `wrapInEmailTemplate` function with responsive structure
+  - Added proper viewport meta tags and email client compatibility headers
+  - Enhanced preheader text formatting with proper hiding techniques
+  - Improved table-based layout structure for email client consistency
+  - Better font rendering with `-webkit-font-smoothing` and `-moz-osx-font-smoothing`
+
+- **Typography System**
+  - Responsive heading sizes that scale appropriately on mobile devices
+  - H1: 32px desktop → 24px mobile with optimized line-height
+  - H2: 24px desktop → 20px mobile with optimized line-height  
+  - H3: 20px desktop → 16px mobile with optimized line-height
+  - Enhanced paragraph styling with consistent font-size and line-height
+  - Improved list styling with proper spacing and typography
+
+- **Image Handling**
+  - Responsive images with `mobile-width-100` class for full-width scaling
+  - Enhanced image captions with mobile-optimized typography
+  - Proper image border-radius for modern email design
+  - Better image centering and spacing on all screen sizes
+
+### Technical Improvements
+- **CSS Media Queries** - Comprehensive mobile-first responsive design
+  - `@media only screen and (max-width: 640px)` breakpoint
+  - Mobile utility classes: `.mobile-hide`, `.mobile-center`, `.mobile-width-100`
+  - Mobile padding classes: `.mobile-padding`, `.mobile-padding-sm`
+  - Mobile typography classes: `.mobile-font-size-14/16/20/24`
+  - Mobile spacing classes: `.mobile-margin-bottom-16/20`
+
+- **Email Client Compatibility**
+  - Outlook-specific MSO conditional comments and fixes
+  - Apple Mail message reformatting prevention
+  - Gmail and other client table-based layout optimization
+  - Cross-client font fallback stack
+
+- **Dark Mode Support**
+  - CSS custom properties for dark mode backgrounds and text
+  - Proper border color adjustments for dark themes
+  - Future-ready design system for theme customization
+
+### Breaking Changes
+- None - all changes maintain backward compatibility with existing email content
+
+### Browser/Client Support
+- ✅ Outlook 2016+ (Windows/Mac)
+- ✅ Gmail (Web/Mobile/App)
+- ✅ Apple Mail (macOS/iOS)
+- ✅ Yahoo Mail
+- ✅ Thunderbird
+- ✅ Mobile email clients (iOS/Android)
+
 ## [0.18.0] - 2025-07-30
 
 ### Added

package/PREVIEW_CUSTOMIZATION_TASK.md

@@ -0,0 +1,201 @@
+# Email Preview Customization Task
+
+## Overview
+The email preview in the plugin currently wraps all content in a default email template, which conflicts with custom email templates that users might implement. We need to make the preview customizable so users can control how their emails are rendered in the preview.
+
+## Problem
+- The plugin's `EmailPreview.tsx` always wraps content with `wrapInTemplate: true` (line 54)
+- This causes styling differences between the preview and what's actually sent to email providers
+- Users who implement custom email templates see inconsistent previews
+
+## Required Changes
+
+### 1. Update Type Definitions (`src/types/index.ts`)
+
+Add email preview customization options to the `BroadcastCustomizations` interface:
+
+```typescript
+export interface BroadcastCustomizations {
+  // ... existing fields ...
+  
+  /**
+   * Email preview customization options
+   */
+  emailPreview?: {
+    /**
+     * Whether to wrap preview content in default email template
+     * @default true
+     */
+    wrapInTemplate?: boolean
+    
+    /**
+     * Custom wrapper function for preview content
+     * Receives the converted HTML and should return wrapped HTML
+     */
+    customWrapper?: (content: string, options?: {
+      subject?: string
+      preheader?: string
+    }) => string | Promise<string>
+    
+    /**
+     * Custom preview component to replace the default one entirely
+     * If provided, this component will be used instead of the default EmailPreview
+     */
+    customPreviewComponent?: string // Path to custom component for import map
+  }
+}
+```
+
+### 2. Update Email Preview Component (`src/components/Broadcasts/EmailPreview.tsx`)
+
+Modify the component to use the customization options:
+
+1. Import the plugin config (you'll need to pass it through props or context)
+2. Update the `convertContent` function (around line 42) to respect customization options:
+
+```typescript
+// Around line 51-54, replace:
+const emailHtml = await convertToEmailSafeHtml(content, {
+  wrapInTemplate: true,
+  preheader,
+})
+
+// With:
+const emailHtml = await convertToEmailSafeHtml(content, {
+  wrapInTemplate: pluginConfig?.customizations?.broadcasts?.emailPreview?.wrapInTemplate ?? true,
+  preheader,
+  customWrapper: pluginConfig?.customizations?.broadcasts?.emailPreview?.customWrapper,
+})
+```
+
+### 3. Update Email Safe HTML Utility (`src/utils/emailSafeHtml.ts`)
+
+Modify the `convertToEmailSafeHtml` function to support custom wrapper:
+
+1. Add `customWrapper` to the options interface (around line 36):
+```typescript
+options?: {
+  wrapInTemplate?: boolean
+  preheader?: string
+  mediaUrl?: string
+  customBlockConverter?: (node: any, mediaUrl?: string) => Promise<string>
+  payload?: any
+  populateFields?: string[] | ((blockType: string) => string[])
+  customWrapper?: (content: string, options?: { preheader?: string }) => string | Promise<string>
+}
+```
+
+2. Update the wrapping logic (around line 54-57):
+```typescript
+// Optionally wrap in email template
+if (options?.wrapInTemplate) {
+  if (options.customWrapper) {
+    return await Promise.resolve(options.customWrapper(sanitizedHtml, { preheader: options.preheader }))
+  }
+  return wrapInEmailTemplate(sanitizedHtml, options.preheader)
+}
+```
+
+### 4. Update Email Preview Field (`src/components/Broadcasts/EmailPreviewField.tsx`)
+
+Pass the plugin config to the EmailPreview component. You'll need to:
+
+1. Import and use a context or prop to get the plugin config
+2. Pass it to the EmailPreview component (around line 158):
+
+```typescript
+<EmailPreview
+  content={fields.content?.value as SerializedEditorState || null}
+  subject={fields.subject?.value as string || 'Email Subject'}
+  preheader={fields.preheader?.value as string}
+  mode={previewMode}
+  onValidation={handleValidation}
+  pluginConfig={pluginConfig} // Add this
+/>
+```
+
+### 5. Create Plugin Config Context (`src/contexts/PluginConfigContext.tsx`) - NEW FILE
+
+Create a context to pass plugin config throughout the component tree:
+
+```typescript
+import React, { createContext, useContext } from 'react'
+import type { NewsletterPluginConfig } from '../types'
+
+const PluginConfigContext = createContext<NewsletterPluginConfig | null>(null)
+
+export const PluginConfigProvider: React.FC<{
+  config: NewsletterPluginConfig
+  children: React.ReactNode
+}> = ({ config, children }) => {
+  return (
+    <PluginConfigContext.Provider value={config}>
+      {children}
+    </PluginConfigContext.Provider>
+  )
+}
+
+export const usePluginConfig = () => {
+  const config = useContext(PluginConfigContext)
+  if (!config) {
+    throw new Error('usePluginConfig must be used within PluginConfigProvider')
+  }
+  return config
+}
+```
+
+### 6. Update Broadcasts Collection (`src/collections/Broadcasts.ts`)
+
+Wrap the admin UI components with the PluginConfigProvider. This is more complex and might require modifying how components are initialized.
+
+## Testing Instructions
+
+1. Create a test configuration that uses custom email preview:
+```typescript
+newsletterPlugin({
+  customizations: {
+    broadcasts: {
+      emailPreview: {
+        wrapInTemplate: false,
+        // Or with custom wrapper:
+        customWrapper: async (content, { preheader }) => {
+          return `<div class="my-custom-wrapper">${content}</div>`
+        }
+      }
+    }
+  }
+})
+```
+
+2. Verify that:
+   - Default behavior (with template) still works when no customization is provided
+   - Setting `wrapInTemplate: false` shows raw content without wrapper
+   - Custom wrapper function is called and applied correctly
+   - Preview matches what's sent to email providers
+
+## Backward Compatibility
+
+- Default behavior must remain unchanged (wrap in template)
+- All customization options should be optional
+- Existing installations should work without any configuration changes
+
+## Additional Considerations
+
+1. **Custom Preview Component**: The `customPreviewComponent` option would allow complete replacement of the preview component, but this is a more complex feature that could be added later.
+
+2. **Preview Context**: Consider passing additional context to the custom wrapper like:
+   - Current user
+   - Broadcast metadata
+   - Provider configuration
+
+3. **Documentation**: Update the plugin README with examples of how to use these new customization options.
+
+## Implementation Order
+
+1. Start with type definitions
+2. Update emailSafeHtml utility  
+3. Modify EmailPreview component
+4. Test with various configurations
+5. Add documentation
+
+This approach provides maximum flexibility while maintaining backward compatibility and clean architecture.

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;
@@ -1029,9 +1035,9 @@ async function convertParagraph(node, mediaUrl, customBlockConverter) {
   );
   const children = childParts.join("");
   if (!children.trim()) {
-    return '<p style="margin: 0 0 16px 0; min-height: 1em;">&nbsp;</p>';
+    return '<p class="mobile-margin-bottom-16" style="margin: 0 0 16px 0; min-height: 1em;">&nbsp;</p>';
   }
-  return `<p style="margin: 0 0 16px 0; text-align: ${align};">${children}</p>`;
+  return `<p class="mobile-margin-bottom-16" style="margin: 0 0 16px 0; text-align: ${align}; font-size: 16px; line-height: 1.5;">${children}</p>`;
 }
 async function convertHeading(node, mediaUrl, customBlockConverter) {
   const tag = node.tag || "h1";
@@ -1045,8 +1051,14 @@ async function convertHeading(node, mediaUrl, customBlockConverter) {
     h2: "font-size: 24px; font-weight: 600; margin: 0 0 16px 0; line-height: 1.3;",
     h3: "font-size: 20px; font-weight: 600; margin: 0 0 12px 0; line-height: 1.4;"
   };
+  const mobileClasses = {
+    h1: "mobile-font-size-24",
+    h2: "mobile-font-size-20",
+    h3: "mobile-font-size-16"
+  };
   const style = `${styles2[tag] || styles2.h3} text-align: ${align};`;
-  return `<${tag} style="${style}">${children}</${tag}>`;
+  const mobileClass = mobileClasses[tag] || mobileClasses.h3;
+  return `<${tag} class="${mobileClass}" style="${style}">${children}</${tag}>`;
 }
 async function convertList(node, mediaUrl, customBlockConverter) {
   const tag = node.listType === "number" ? "ol" : "ul";
@@ -1054,8 +1066,8 @@ async function convertList(node, mediaUrl, customBlockConverter) {
     (node.children || []).map((child) => convertNode(child, mediaUrl, customBlockConverter))
   );
   const children = childParts.join("");
-  const style = tag === "ul" ? "margin: 0 0 16px 0; padding-left: 24px; list-style-type: disc;" : "margin: 0 0 16px 0; padding-left: 24px; list-style-type: decimal;";
-  return `<${tag} style="${style}">${children}</${tag}>`;
+  const style = tag === "ul" ? "margin: 0 0 16px 0; padding-left: 24px; list-style-type: disc; font-size: 16px; line-height: 1.5;" : "margin: 0 0 16px 0; padding-left: 24px; list-style-type: decimal; font-size: 16px; line-height: 1.5;";
+  return `<${tag} class="mobile-margin-bottom-16" style="${style}">${children}</${tag}>`;
 }
 async function convertListItem(node, mediaUrl, customBlockConverter) {
   const childParts = await Promise.all(
@@ -1112,16 +1124,16 @@ function convertUpload(node, mediaUrl) {
   }
   const alt = node.fields?.altText || upload.alt || "";
   const caption = node.fields?.caption || "";
-  const imgHtml = `<img src="${escapeHtml(src)}" alt="${escapeHtml(alt)}" style="max-width: 100%; height: auto; display: block; margin: 0 auto;" />`;
+  const imgHtml = `<img src="${escapeHtml(src)}" alt="${escapeHtml(alt)}" class="mobile-width-100" style="max-width: 100%; height: auto; display: block; margin: 0 auto; border-radius: 6px;" />`;
   if (caption) {
     return `
-      <div style="margin: 0 0 16px 0; text-align: center;">
+      <div style="margin: 0 0 16px 0; text-align: center;" class="mobile-margin-bottom-16">
         ${imgHtml}
-        <p style="margin: 8px 0 0 0; font-size: 14px; color: #6b7280; font-style: italic;">${escapeHtml(caption)}</p>
+        <p style="margin: 8px 0 0 0; font-size: 14px; color: #6b7280; font-style: italic; text-align: center;" class="mobile-font-size-14">${escapeHtml(caption)}</p>
       </div>
     `;
   }
-  return `<div style="margin: 0 0 16px 0; text-align: center;">${imgHtml}</div>`;
+  return `<div style="margin: 0 0 16px 0; text-align: center;" class="mobile-margin-bottom-16">${imgHtml}</div>`;
 }
 async function convertBlock(node, mediaUrl, customBlockConverter) {
   const blockType = node.fields?.blockName || node.blockName;
@@ -1194,11 +1206,14 @@ function escapeHtml(text) {
 }
 function wrapInEmailTemplate(content, preheader) {
   return `<!DOCTYPE html>
-<html lang="en">
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Email</title>
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="x-apple-disable-message-reformatting">
+  <title>Newsletter</title>
+  
   <!--[if mso]>
   <noscript>
     <xml>
@@ -1208,16 +1223,155 @@ function wrapInEmailTemplate(content, preheader) {
     </xml>
   </noscript>
   <![endif]-->
+  
+  <style>
+    /* Reset and base styles */
+    * {
+      -webkit-text-size-adjust: 100%;
+      -ms-text-size-adjust: 100%;
+    }
+    
+    body {
+      margin: 0 !important;
+      padding: 0 !important;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
+      font-size: 16px;
+      line-height: 1.5;
+      color: #1A1A1A;
+      background-color: #f8f9fa;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+    }
+    
+    table {
+      border-spacing: 0 !important;
+      border-collapse: collapse !important;
+      table-layout: fixed !important;
+      margin: 0 auto !important;
+    }
+    
+    table table table {
+      table-layout: auto;
+    }
+    
+    img {
+      -ms-interpolation-mode: bicubic;
+      max-width: 100%;
+      height: auto;
+      border: 0;
+      outline: none;
+      text-decoration: none;
+    }
+    
+    /* Responsive styles */
+    @media only screen and (max-width: 640px) {
+      .mobile-hide {
+        display: none !important;
+      }
+      
+      .mobile-center {
+        text-align: center !important;
+      }
+      
+      .mobile-width-100 {
+        width: 100% !important;
+        max-width: 100% !important;
+      }
+      
+      .mobile-padding {
+        padding: 20px !important;
+      }
+      
+      .mobile-padding-sm {
+        padding: 16px !important;
+      }
+      
+      .mobile-font-size-14 {
+        font-size: 14px !important;
+      }
+      
+      .mobile-font-size-16 {
+        font-size: 16px !important;
+      }
+      
+      .mobile-font-size-20 {
+        font-size: 20px !important;
+        line-height: 1.3 !important;
+      }
+      
+      .mobile-font-size-24 {
+        font-size: 24px !important;
+        line-height: 1.2 !important;
+      }
+      
+      /* Stack sections on mobile */
+      .mobile-stack {
+        display: block !important;
+        width: 100% !important;
+      }
+      
+      /* Mobile-specific spacing */
+      .mobile-margin-bottom-16 {
+        margin-bottom: 16px !important;
+      }
+      
+      .mobile-margin-bottom-20 {
+        margin-bottom: 20px !important;
+      }
+    }
+    
+    /* Dark mode support */
+    @media (prefers-color-scheme: dark) {
+      .dark-mode-bg {
+        background-color: #1a1a1a !important;
+      }
+      
+      .dark-mode-text {
+        color: #ffffff !important;
+      }
+      
+      .dark-mode-border {
+        border-color: #333333 !important;
+      }
+    }
+    
+    /* Outlook-specific fixes */
+    <!--[if mso]>
+    <style>
+      table {
+        border-collapse: collapse;
+        border-spacing: 0;
+        border: none;
+        margin: 0;
+      }
+      
+      div, p {
+        margin: 0;
+      }
+    </style>
+    <![endif]-->
+  </style>
 </head>
-<body style="margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; font-size: 16px; line-height: 1.5; color: #333333; background-color: #f3f4f6;">
-  ${preheader ? `<div style="display: none; max-height: 0; overflow: hidden;">${escapeHtml(preheader)}</div>` : ""}
-  <table role="presentation" cellpadding="0" cellspacing="0" width="100%" style="margin: 0; padding: 0;">
+<body style="margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; font-size: 16px; line-height: 1.5; color: #1A1A1A; background-color: #f8f9fa;">
+  ${preheader ? `
+  <!-- Preheader text -->
+  <div style="display: none; max-height: 0; overflow: hidden; font-size: 1px; line-height: 1px; color: transparent;">
+    ${escapeHtml(preheader)}
+  </div>
+  ` : ""}
+  
+  <!-- Main container -->
+  <table role="presentation" cellpadding="0" cellspacing="0" width="100%" style="margin: 0; padding: 0; background-color: #f8f9fa;">
     <tr>
-      <td align="center" style="padding: 20px 0;">
-        <table role="presentation" cellpadding="0" cellspacing="0" width="600" style="margin: 0 auto; background-color: #ffffff; border-radius: 8px; overflow: hidden;">
+      <td align="center" style="padding: 20px 10px;">
+        <!-- Email wrapper -->
+        <table role="presentation" cellpadding="0" cellspacing="0" width="600" class="mobile-width-100" style="margin: 0 auto; max-width: 600px;">
           <tr>
-            <td style="padding: 40px 30px;">
-              ${content}
+            <td class="mobile-padding" style="padding: 0;">
+              <!-- Content area with light background -->
+              <div style="background-color: #ffffff; padding: 40px 30px; border-radius: 8px;" class="mobile-padding">
+                ${content}
+              </div>
             </td>
           </tr>
         </table>
@@ -1722,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,