payload-plugin-newsletter 0.10.0 → 0.11.0

package/CHANGELOG.md

@@ -1,3 +1,35 @@
+## [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

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

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";