payload-plugin-newsletter 0.9.2 → 0.11.0

package/CHANGELOG.md

@@ -1,3 +1,78 @@
+## [0.11.0] - 2025-07-20
+
+### Added
+- Enhanced rich text editor for broadcast emails with:
+  - Fixed toolbar showing available formatting options
+  - Inline toolbar for text selection
+  - Image upload support with Media collection integration
+  - Custom email blocks (Button and Divider)
+  - Enhanced link feature with "open in new tab" option
+- Comprehensive image handling in email HTML conversion:
+  - Responsive images with proper email-safe HTML
+  - Support for captions and alt text
+  - Automatic media URL handling for different storage backends
+- Media collection setup documentation (`docs/guides/media-collection-setup.md`)
+- Prerequisites section in README mentioning Media collection requirement
+
+### Changed
+- Removed 'name' field from Broadcasts collection (now uses 'subject' as title)
+- Updated Broadcast collection admin UI:
+  - Uses subject as the display title
+  - Shows recipientCount in default columns instead of name
+- Enhanced `convertToEmailSafeHtml` utility to handle:
+  - Upload nodes for images
+  - Custom block nodes (button and divider)
+  - Media URL configuration
+  - Improved link handling with target attribute support
+- Broadcast API sync now uses subject as the name field
+
+### Fixed
+- Broadcast hooks now properly handle the absence of name field
+- Email preview components updated to work without channel references
+
+## [0.10.0] - 2025-07-20
+
+### Changed
+- **BREAKING**: Simplified plugin architecture to single-channel design
+  - Removed Channels collection entirely 
+  - Each Payload instance now connects to a single Broadcast channel
+  - Channel is determined by the API token (Broadcast tokens are channel-specific)
+  - Removed `channelId` field from Broadcast type
+  - Removed channel management methods from providers
+- Updated newsletter management configuration
+  - Removed `collections.channels` from plugin config
+  - Broadcasts no longer have channel relationships
+  - All broadcasts use the global provider configuration
+- Improved provider capabilities
+  - Set `supportsMultipleChannels` to `false` for all providers
+  - Removed channel-specific error codes (`CHANNEL_NOT_FOUND`, `INVALID_CHANNEL`)
+
+### Added
+- Comprehensive documentation for single-channel architecture (`docs/guides/single-channel-broadcast.md`)
+- Clear migration path from multi-channel to single-channel design
+
+### Removed
+- Channels collection (`src/collections/Channels.ts`)
+- Channel utility functions (`src/providers/utils/getChannelProvider.ts`)
+- Channel type definitions (`src/types/channel.ts`)
+- Channel imports and references throughout the codebase
+
+## [0.9.3] - 2025-07-20
+
+### Changed
+- Simplified Broadcast provider configuration to use a single token instead of separate development/production tokens
+  - Changed `tokens: { production, development }` to `token` field
+  - Users should now manage different tokens via environment variables
+- Improved settings configuration hierarchy
+  - Settings from Payload admin UI now properly override config defaults
+  - Added support for configuring `fromAddress`, `fromName`, and `replyTo` in admin UI
+- Enhanced reply-to email handling
+  - Broadcast provider now supports fallback chain: request → settings → from address
+  - Added `replyTo` field support to match Broadcast API capabilities
+
+### Fixed
+- Fixed Broadcast provider tests to match new single token configuration
+
 ## [0.9.2] - 2025-07-20
 
 ### Fixed

package/README.md

@@ -22,6 +22,11 @@ A complete newsletter management plugin for [Payload CMS](https://github.com/pay
 - ✅ **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+)
 
+## Prerequisites
+
+- Payload CMS v3.0.0 or higher
+- A Media collection configured in your Payload project (required for image support in broadcasts)
+
 ## Quick Start
 
 ### 1. Install the plugin
@@ -587,17 +592,18 @@ providers: {
 providers: {
   default: 'broadcast',
   broadcast: {
-    apiUrl: 'https://broadcast.yoursite.com',
-    tokens: {
-      production: process.env.BROADCAST_TOKEN,
-      development: process.env.BROADCAST_DEV_TOKEN,
-    },
+    apiUrl: process.env.BROADCAST_API_URL,
+    token: process.env.BROADCAST_TOKEN,
+    // Optional: These can be set here as defaults or configured in the admin UI
     fromAddress: 'hello@yoursite.com',
     fromName: 'Your Newsletter',
+    replyTo: 'replies@yoursite.com',
   },
 }
 ```
 
+**Note**: Settings configured in the Payload admin UI take precedence over these config values. The config values serve as defaults when settings haven't been configured yet.
+
 ## TypeScript
 
 The plugin is fully typed. Import types as needed:

package/dist/components.cjs

@@ -917,9 +917,17 @@ var EMAIL_SAFE_CONFIG = {
     "ol",
     "li",
     "blockquote",
-    "hr"
+    "hr",
+    "img",
+    "div",
+    "table",
+    "tr",
+    "td",
+    "th",
+    "tbody",
+    "thead"
   ],
-  ALLOWED_ATTR: ["href", "style", "target", "rel", "align"],
+  ALLOWED_ATTR: ["href", "style", "target", "rel", "align", "src", "alt", "width", "height", "border", "cellpadding", "cellspacing"],
   ALLOWED_STYLES: {
     "*": [
       "color",
@@ -950,58 +958,62 @@ var EMAIL_SAFE_CONFIG = {
   FORBID_ATTR: ["class", "id", "onclick", "onload", "onerror"]
 };
 async function convertToEmailSafeHtml(editorState, options) {
-  const rawHtml = await lexicalToEmailHtml(editorState);
+  const rawHtml = await lexicalToEmailHtml(editorState, options?.mediaUrl);
   const sanitizedHtml = import_isomorphic_dompurify.default.sanitize(rawHtml, EMAIL_SAFE_CONFIG);
   if (options?.wrapInTemplate) {
     return wrapInEmailTemplate(sanitizedHtml, options.preheader);
   }
   return sanitizedHtml;
 }
-async function lexicalToEmailHtml(editorState) {
+async function lexicalToEmailHtml(editorState, mediaUrl) {
   const { root } = editorState;
   if (!root || !root.children) {
     return "";
   }
-  const html = root.children.map((node) => convertNode(node)).join("");
+  const html = root.children.map((node) => convertNode(node, mediaUrl)).join("");
   return html;
 }
-function convertNode(node) {
+function convertNode(node, mediaUrl) {
   switch (node.type) {
     case "paragraph":
-      return convertParagraph(node);
+      return convertParagraph(node, mediaUrl);
     case "heading":
-      return convertHeading(node);
+      return convertHeading(node, mediaUrl);
     case "list":
-      return convertList(node);
+      return convertList(node, mediaUrl);
     case "listitem":
-      return convertListItem(node);
+      return convertListItem(node, mediaUrl);
     case "blockquote":
-      return convertBlockquote(node);
+      return convertBlockquote(node, mediaUrl);
     case "text":
       return convertText(node);
     case "link":
-      return convertLink(node);
+      return convertLink(node, mediaUrl);
     case "linebreak":
       return "<br>";
+    case "upload":
+      return convertUpload(node, mediaUrl);
+    case "block":
+      return convertBlock(node, mediaUrl);
     default:
       if (node.children) {
-        return node.children.map(convertNode).join("");
+        return node.children.map((child) => convertNode(child, mediaUrl)).join("");
       }
       return "";
   }
 }
-function convertParagraph(node) {
+function convertParagraph(node, mediaUrl) {
   const align = getAlignment(node.format);
-  const children = node.children?.map(convertNode).join("") || "";
+  const children = node.children?.map((child) => convertNode(child, mediaUrl)).join("") || "";
   if (!children.trim()) {
     return '<p style="margin: 0 0 16px 0; min-height: 1em;">&nbsp;</p>';
   }
   return `<p style="margin: 0 0 16px 0; text-align: ${align};">${children}</p>`;
 }
-function convertHeading(node) {
+function convertHeading(node, mediaUrl) {
   const tag = node.tag || "h1";
   const align = getAlignment(node.format);
-  const children = node.children?.map(convertNode).join("") || "";
+  const children = node.children?.map((child) => convertNode(child, mediaUrl)).join("") || "";
   const styles = {
     h1: "font-size: 32px; font-weight: 700; margin: 0 0 24px 0; line-height: 1.2;",
     h2: "font-size: 24px; font-weight: 600; margin: 0 0 16px 0; line-height: 1.3;",
@@ -1010,18 +1022,18 @@ function convertHeading(node) {
   const style = `${styles[tag] || styles.h3} text-align: ${align};`;
   return `<${tag} style="${style}">${children}</${tag}>`;
 }
-function convertList(node) {
+function convertList(node, mediaUrl) {
   const tag = node.listType === "number" ? "ol" : "ul";
-  const children = node.children?.map(convertNode).join("") || "";
+  const children = node.children?.map((child) => convertNode(child, mediaUrl)).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}>`;
 }
-function convertListItem(node) {
-  const children = node.children?.map(convertNode).join("") || "";
+function convertListItem(node, mediaUrl) {
+  const children = node.children?.map((child) => convertNode(child, mediaUrl)).join("") || "";
   return `<li style="margin: 0 0 8px 0;">${children}</li>`;
 }
-function convertBlockquote(node) {
-  const children = node.children?.map(convertNode).join("") || "";
+function convertBlockquote(node, mediaUrl) {
+  const children = node.children?.map((child) => convertNode(child, mediaUrl)).join("") || "";
   const style = "margin: 0 0 16px 0; padding-left: 16px; border-left: 4px solid #e5e7eb; color: #6b7280;";
   return `<blockquote style="${style}">${children}</blockquote>`;
 }
@@ -1041,10 +1053,76 @@ function convertText(node) {
   }
   return text;
 }
-function convertLink(node) {
-  const children = node.children?.map(convertNode).join("") || "";
+function convertLink(node, mediaUrl) {
+  const children = node.children?.map((child) => convertNode(child, mediaUrl)).join("") || "";
   const url = node.fields?.url || "#";
-  return `<a href="${escapeHtml(url)}" target="_blank" rel="noopener noreferrer" style="color: #2563eb; text-decoration: underline;">${children}</a>`;
+  const newTab = node.fields?.newTab ?? false;
+  const targetAttr = newTab ? ' target="_blank"' : "";
+  const relAttr = newTab ? ' rel="noopener noreferrer"' : "";
+  return `<a href="${escapeHtml(url)}"${targetAttr}${relAttr} style="color: #2563eb; text-decoration: underline;">${children}</a>`;
+}
+function convertUpload(node, mediaUrl) {
+  const upload = node.value;
+  if (!upload) return "";
+  let src = "";
+  if (typeof upload === "string") {
+    src = upload;
+  } else if (upload.url) {
+    src = upload.url;
+  } else if (upload.filename && mediaUrl) {
+    src = `${mediaUrl}/${upload.filename}`;
+  }
+  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;" />`;
+  if (caption) {
+    return `
+      <div style="margin: 0 0 16px 0; text-align: center;">
+        ${imgHtml}
+        <p style="margin: 8px 0 0 0; font-size: 14px; color: #6b7280; font-style: italic;">${escapeHtml(caption)}</p>
+      </div>
+    `;
+  }
+  return `<div style="margin: 0 0 16px 0; text-align: center;">${imgHtml}</div>`;
+}
+function convertBlock(node, mediaUrl) {
+  const blockType = node.fields?.blockName;
+  switch (blockType) {
+    case "button":
+      return convertButtonBlock(node.fields);
+    case "divider":
+      return convertDividerBlock(node.fields);
+    default:
+      if (node.children) {
+        return node.children.map((child) => convertNode(child, mediaUrl)).join("");
+      }
+      return "";
+  }
+}
+function convertButtonBlock(fields) {
+  const text = fields?.text || "Click here";
+  const url = fields?.url || "#";
+  const style = fields?.style || "primary";
+  const styles = {
+    primary: "background-color: #2563eb; color: #ffffff; border: 2px solid #2563eb;",
+    secondary: "background-color: #6b7280; color: #ffffff; border: 2px solid #6b7280;",
+    outline: "background-color: transparent; color: #2563eb; border: 2px solid #2563eb;"
+  };
+  const buttonStyle = `${styles[style] || styles.primary} display: inline-block; padding: 12px 24px; font-size: 16px; font-weight: 600; text-decoration: none; border-radius: 6px; text-align: center;`;
+  return `
+    <div style="margin: 0 0 16px 0; text-align: center;">
+      <a href="${escapeHtml(url)}" target="_blank" rel="noopener noreferrer" style="${buttonStyle}">${escapeHtml(text)}</a>
+    </div>
+  `;
+}
+function convertDividerBlock(fields) {
+  const style = fields?.style || "solid";
+  const styles = {
+    solid: "border-top: 1px solid #e5e7eb;",
+    dashed: "border-top: 1px dashed #e5e7eb;",
+    dotted: "border-top: 1px dotted #e5e7eb;"
+  };
+  return `<hr style="${styles[style] || styles.solid} margin: 24px 0; border-bottom: none; border-left: none; border-right: none;" />`;
 }
 function getAlignment(format) {
   if (!format) return "left";
@@ -1210,7 +1288,6 @@ var EmailPreview = ({
   content,
   subject,
   preheader,
-  channel,
   mode = "desktop",
   onValidation
 }) => {
@@ -1233,7 +1310,7 @@ var EmailPreview = ({
         const personalizedHtml = replacePersonalizationTags(emailHtml, SAMPLE_DATA);
         const previewHtml = addEmailHeader(personalizedHtml, {
           subject,
-          from: channel ? `${channel.fromName} <${channel.fromEmail}>` : "Newsletter <noreply@example.com>",
+          from: "Newsletter <noreply@example.com>",
           to: SAMPLE_DATA["subscriber.email"]
         });
         setHtml(previewHtml);
@@ -1248,7 +1325,7 @@ var EmailPreview = ({
       }
     };
     convertContent();
-  }, [content, subject, preheader, channel, onValidation]);
+  }, [content, subject, preheader, onValidation]);
   (0, import_react5.useEffect)(() => {
     if (iframeRef.current && html) {
       const doc = iframeRef.current.contentDocument;
@@ -1485,7 +1562,6 @@ var EmailPreviewField = () => {
         content: fields.content?.value || null,
         subject: fields.subject?.value || "Email Subject",
         preheader: fields.preheader?.value,
-        channel: fields.channel?.value,
         mode: previewMode,
         onValidation: handleValidation
       }
@@ -1505,8 +1581,7 @@ var BroadcastEditor = (props) => {
   const [validationSummary, setValidationSummary] = (0, import_react7.useState)("");
   const fields = (0, import_ui2.useFormFields)(([fields2]) => ({
     subject: fields2.subject,
-    preheader: fields2.preheader,
-    channel: fields2.channel
+    preheader: fields2.preheader
   }));
   const handleValidation = (0, import_react7.useCallback)((result) => {
     setIsValid(result.valid);
@@ -1644,7 +1719,6 @@ var BroadcastEditor = (props) => {
           content: value,
           subject: fields.subject?.value || "Email Subject",
           preheader: fields.preheader?.value,
-          channel: fields.channel?.value,
           mode: previewMode,
           onValidation: handleValidation
         }