payload-plugin-newsletter 0.20.0 → 0.20.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payload-plugin-newsletter",
-  "version": "0.20.0",
+  "version": "0.20.2",
   "description": "Complete newsletter management plugin for Payload CMS with subscriber management, magic link authentication, and email service integration",
   "type": "module",
   "main": "./dist/index.js",
@@ -8,24 +8,24 @@
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "import": {
-        "types": "./dist/index.d.ts",
-        "default": "./dist/index.js"
-      },
-      "require": {
-        "types": "./dist/index.d.cts",
-        "default": "./dist/index.cjs"
-      }
+      "import": "./dist/server.js",
+      "types": "./dist/server.d.ts"
+    },
+    "./server": {
+      "import": "./dist/server.js",
+      "types": "./dist/server.d.ts"
     },
     "./client": {
-      "import": {
-        "types": "./dist/client.d.ts",
-        "default": "./dist/client.js"
-      },
-      "require": {
-        "types": "./dist/client.d.cts",
-        "default": "./dist/client.cjs"
-      }
+      "import": "./dist/client.js",
+      "types": "./dist/client.d.ts"
+    },
+    "./admin": {
+      "import": "./dist/admin.js",
+      "types": "./dist/admin.d.ts"
+    },
+    "./components": {
+      "import": "./dist/admin.js",
+      "types": "./dist/admin.d.ts"
     },
     "./types": {
       "import": {
@@ -37,16 +37,6 @@
         "default": "./dist/types.cjs"
       }
     },
-    "./components": {
-      "import": {
-        "types": "./dist/components.d.ts",
-        "default": "./dist/components.js"
-      },
-      "require": {
-        "types": "./dist/components.d.cts",
-        "default": "./dist/components.cjs"
-      }
-    },
     "./utils": {
       "import": {
         "types": "./dist/utils.d.ts",

package/ESM_FIX_SUMMARY.md

@@ -1,74 +0,0 @@
-# ESM/CJS Module Resolution Fix Summary
-
-## Changes Made
-
-### 1. **Added tsup Build Tool**
-- Added `tsup` v8.3.5 to devDependencies for proper ESM/CJS dual package support
-- Created `tsup.config.ts` with configuration for building both ESM and CJS outputs
-
-### 2. **Updated package.json**
-- Changed entry points from source files (`./src/`) to built files (`./dist/`)
-- Added proper exports configuration with both ESM and CJS support:
-  - ESM files: `.js` extension with `.d.ts` types
-  - CJS files: `.cjs` extension with `.d.cts` types
-- Updated build scripts to use tsup
-- Added `module` field pointing to ESM entry
-
-### 3. **Updated tsconfig.json**
-- Changed `moduleResolution` from "bundler" to "node" for better compatibility
-
-### 4. **Created Build Script**
-- Added `build-and-commit.sh` for easy building and verification
-
-## File Structure After Build
-
-```
-dist/
-├── index.js         # ESM main entry
-├── index.cjs        # CJS main entry
-├── index.d.ts       # TypeScript definitions
-├── index.d.cts      # CJS TypeScript definitions
-├── client.js        # ESM client export
-├── client.cjs       # CJS client export
-├── client.d.ts      # Client TypeScript definitions
-├── client.d.cts     # CJS Client TypeScript definitions
-├── types.js         # ESM types export
-├── types.cjs        # CJS types export
-├── types.d.ts       # Types TypeScript definitions
-├── types.d.cts      # CJS Types TypeScript definitions
-├── components.js    # ESM components export
-├── components.cjs   # CJS components export
-├── components.d.ts  # Components TypeScript definitions
-└── components.d.cts # CJS Components TypeScript definitions
-```
-
-## How to Build and Publish
-
-1. **Install dependencies**: `bun install`
-2. **Build the package**: `bun run build`
-3. **Test locally**: Link the package to test in your project
-4. **Publish**: `npm publish` (dist files will be included automatically)
-
-## Benefits
-
-1. **Proper ESM Support**: Next.js apps using `"type": "module"` can now import the package without issues
-2. **CJS Compatibility**: Still works with CommonJS projects
-3. **TypeScript Support**: Proper type definitions for both module systems
-4. **Clean Exports**: Clear separation of server/client code with proper exports
-5. **Future Proof**: Ready for the ESM-first ecosystem
-
-## Testing the Fix
-
-To test in your ContentQuant project:
-1. Build the plugin: `bun run build`
-2. Link locally: `npm link` in plugin directory
-3. Link in project: `npm link payload-plugin-newsletter` in ContentQuant
-4. Import and use normally
-
-## Next Steps
-
-1. Run `./build-and-commit.sh` to build the package
-2. Test the built package locally
-3. Commit changes with message: "fix: add tsup build system for proper ESM/CJS dual package support"
-4. Push to repository
-5. Publish new version to npm

package/PREVIEW_CUSTOMIZATION_TASK.md

@@ -1,201 +0,0 @@
-# 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.