payload-plugin-newsletter 0.16.10 → 0.17.0

package/CHANGELOG.md

@@ -1,3 +1,31 @@
+## [0.17.0] - 2025-07-29
+
+### Added
+- **Custom Block Email Converter Support** - Added support for custom block email conversion in broadcasts
+  - New `customBlockConverter` option in `BroadcastCustomizations` interface
+  - Allows users to provide their own email conversion logic for custom Lexical blocks
+  - Converter receives block node and media URL, returns email-safe HTML
+  - Supports async operations for fetching external data during conversion
+
+- **Server-Side Email Preview Generation** - Implemented server-side email preview for accurate rendering
+  - New `/api/broadcasts/preview` endpoint for generating email previews
+  - Updated BroadcastInlinePreview component to use server-side preview
+  - Ensures preview exactly matches what will be sent via email
+  - Custom block converters work in both preview and sent emails
+
+### Changed
+- **Email Conversion Functions Now Async** - All email conversion functions are now async to support custom converters
+  - `convertToEmailSafeHtml` and all internal converters are now async
+  - Maintains backward compatibility - existing code continues to work
+  - Enables custom converters to perform async operations like API calls
+
+### Technical
+- Updated `convertNode`, `convertParagraph`, `convertHeading`, etc. to be async functions
+- Added `customBlockConverter` parameter throughout the email conversion pipeline
+- Custom converter is called first, falls back to default handling if it returns empty
+- Error handling for custom converter failures with graceful fallback
+- Preview endpoint uses same conversion logic as email sending for consistency
+
 ## [0.16.10] - 2025-01-29
 
 ### Fixed

package/dist/collections.cjs

@@ -963,62 +963,73 @@ async function convertToEmailSafeHtml(editorState, options) {
   if (!editorState) {
     return "";
   }
-  const rawHtml = await lexicalToEmailHtml(editorState, options?.mediaUrl);
+  const rawHtml = await lexicalToEmailHtml(editorState, options?.mediaUrl, options?.customBlockConverter);
   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, mediaUrl) {
+async function lexicalToEmailHtml(editorState, mediaUrl, customBlockConverter) {
   const { root } = editorState;
   if (!root || !root.children) {
     return "";
   }
-  const html = root.children.map((node) => convertNode(node, mediaUrl)).join("");
-  return html;
+  const htmlParts = await Promise.all(
+    root.children.map((node) => convertNode(node, mediaUrl, customBlockConverter))
+  );
+  return htmlParts.join("");
 }
-function convertNode(node, mediaUrl) {
+async function convertNode(node, mediaUrl, customBlockConverter) {
   switch (node.type) {
     case "paragraph":
-      return convertParagraph(node, mediaUrl);
+      return convertParagraph(node, mediaUrl, customBlockConverter);
     case "heading":
-      return convertHeading(node, mediaUrl);
+      return convertHeading(node, mediaUrl, customBlockConverter);
     case "list":
-      return convertList(node, mediaUrl);
+      return convertList(node, mediaUrl, customBlockConverter);
     case "listitem":
-      return convertListItem(node, mediaUrl);
+      return convertListItem(node, mediaUrl, customBlockConverter);
     case "blockquote":
-      return convertBlockquote(node, mediaUrl);
+      return convertBlockquote(node, mediaUrl, customBlockConverter);
     case "text":
       return convertText(node);
     case "link":
-      return convertLink(node, mediaUrl);
+      return convertLink(node, mediaUrl, customBlockConverter);
     case "linebreak":
       return "<br>";
     case "upload":
       return convertUpload(node, mediaUrl);
     case "block":
-      return convertBlock(node, mediaUrl);
+      return await convertBlock(node, mediaUrl, customBlockConverter);
     default:
       if (node.children) {
-        return node.children.map((child) => convertNode(child, mediaUrl)).join("");
+        const childParts = await Promise.all(
+          node.children.map((child) => convertNode(child, mediaUrl, customBlockConverter))
+        );
+        return childParts.join("");
       }
       return "";
   }
 }
-function convertParagraph(node, mediaUrl) {
+async function convertParagraph(node, mediaUrl, customBlockConverter) {
   const align = getAlignment(node.format);
-  const children = node.children?.map((child) => convertNode(child, mediaUrl)).join("") || "";
+  const childParts = await Promise.all(
+    (node.children || []).map((child) => convertNode(child, mediaUrl, customBlockConverter))
+  );
+  const children = childParts.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, mediaUrl) {
+async function convertHeading(node, mediaUrl, customBlockConverter) {
   const tag = node.tag || "h1";
   const align = getAlignment(node.format);
-  const children = node.children?.map((child) => convertNode(child, mediaUrl)).join("") || "";
+  const childParts = await Promise.all(
+    (node.children || []).map((child) => convertNode(child, mediaUrl, customBlockConverter))
+  );
+  const children = childParts.join("");
   const styles2 = {
     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;",
@@ -1027,18 +1038,27 @@ function convertHeading(node, mediaUrl) {
   const style = `${styles2[tag] || styles2.h3} text-align: ${align};`;
   return `<${tag} style="${style}">${children}</${tag}>`;
 }
-function convertList(node, mediaUrl) {
+async function convertList(node, mediaUrl, customBlockConverter) {
   const tag = node.listType === "number" ? "ol" : "ul";
-  const children = node.children?.map((child) => convertNode(child, mediaUrl)).join("") || "";
+  const childParts = await Promise.all(
+    (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}>`;
 }
-function convertListItem(node, mediaUrl) {
-  const children = node.children?.map((child) => convertNode(child, mediaUrl)).join("") || "";
+async function convertListItem(node, mediaUrl, customBlockConverter) {
+  const childParts = await Promise.all(
+    (node.children || []).map((child) => convertNode(child, mediaUrl, customBlockConverter))
+  );
+  const children = childParts.join("");
   return `<li style="margin: 0 0 8px 0;">${children}</li>`;
 }
-function convertBlockquote(node, mediaUrl) {
-  const children = node.children?.map((child) => convertNode(child, mediaUrl)).join("") || "";
+async function convertBlockquote(node, mediaUrl, customBlockConverter) {
+  const childParts = await Promise.all(
+    (node.children || []).map((child) => convertNode(child, mediaUrl, customBlockConverter))
+  );
+  const children = childParts.join("");
   const style = "margin: 0 0 16px 0; padding-left: 16px; border-left: 4px solid #e5e7eb; color: #6b7280;";
   return `<blockquote style="${style}">${children}</blockquote>`;
 }
@@ -1058,8 +1078,11 @@ function convertText(node) {
   }
   return text;
 }
-function convertLink(node, mediaUrl) {
-  const children = node.children?.map((child) => convertNode(child, mediaUrl)).join("") || "";
+async function convertLink(node, mediaUrl, customBlockConverter) {
+  const childParts = await Promise.all(
+    (node.children || []).map((child) => convertNode(child, mediaUrl, customBlockConverter))
+  );
+  const children = childParts.join("");
   const url = node.fields?.url || "#";
   const newTab = node.fields?.newTab ?? false;
   const targetAttr = newTab ? ' target="_blank"' : "";
@@ -1090,8 +1113,18 @@ function convertUpload(node, mediaUrl) {
   }
   return `<div style="margin: 0 0 16px 0; text-align: center;">${imgHtml}</div>`;
 }
-function convertBlock(node, mediaUrl) {
-  const blockType = node.fields?.blockName;
+async function convertBlock(node, mediaUrl, customBlockConverter) {
+  const blockType = node.fields?.blockName || node.blockName;
+  if (customBlockConverter) {
+    try {
+      const customHtml = await customBlockConverter(node, mediaUrl);
+      if (customHtml) {
+        return customHtml;
+      }
+    } catch (error) {
+      console.error(`Custom block converter error for ${blockType}:`, error);
+    }
+  }
   switch (blockType) {
     case "button":
       return convertButtonBlock(node.fields);
@@ -1099,7 +1132,10 @@ function convertBlock(node, mediaUrl) {
       return convertDividerBlock(node.fields);
     default:
       if (node.children) {
-        return node.children.map((child) => convertNode(child, mediaUrl)).join("");
+        const childParts = await Promise.all(
+          node.children.map((child) => convertNode(child, mediaUrl, customBlockConverter))
+        );
+        return childParts.join("");
       }
       return "";
   }
@@ -1473,7 +1509,9 @@ var createBroadcastsCollection = (pluginConfig) => {
               const { BroadcastApiProvider: BroadcastApiProvider2 } = await Promise.resolve().then(() => (init_broadcast2(), broadcast_exports));
               const provider = new BroadcastApiProvider2(providerConfig);
               req.payload.logger.info("Converting content to HTML...");
-              const htmlContent = await convertToEmailSafeHtml(doc.contentSection?.content);
+              const htmlContent = await convertToEmailSafeHtml(doc.contentSection?.content, {
+                customBlockConverter: pluginConfig.customizations?.broadcasts?.customBlockConverter
+              });
               if (!htmlContent || htmlContent.trim() === "") {
                 req.payload.logger.info("Skipping provider sync - content is empty after conversion");
                 return doc;
@@ -1570,7 +1608,9 @@ var createBroadcastsCollection = (pluginConfig) => {
                   return doc;
                 }
                 req.payload.logger.info("Creating broadcast in provider (deferred from initial create)...");
-                const htmlContent = await convertToEmailSafeHtml(doc.contentSection?.content);
+                const htmlContent = await convertToEmailSafeHtml(doc.contentSection?.content, {
+                  customBlockConverter: pluginConfig.customizations?.broadcasts?.customBlockConverter
+                });
                 if (!htmlContent || htmlContent.trim() === "") {
                   req.payload.logger.info("Skipping provider sync - content is empty after conversion");
                   return doc;
@@ -1629,7 +1669,9 @@ var createBroadcastsCollection = (pluginConfig) => {
                     updates.preheader = doc.contentSection?.preheader;
                   }
                   if (JSON.stringify(doc.contentSection?.content) !== JSON.stringify(previousDoc?.contentSection?.content)) {
-                    updates.content = await convertToEmailSafeHtml(doc.contentSection?.content);
+                    updates.content = await convertToEmailSafeHtml(doc.contentSection?.content, {
+                      customBlockConverter: pluginConfig.customizations?.broadcasts?.customBlockConverter
+                    });
                   }
                   if (doc.settings?.trackOpens !== previousDoc?.settings?.trackOpens) {
                     updates.trackOpens = doc.settings.trackOpens;