npm - payload-plugin-newsletter - Versions diffs - 0.17.4 → 0.19.0 - Mend

payload-plugin-newsletter 0.17.4 → 0.19.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (22) hide show

package/dist/collections.js CHANGED Viewed

@@ -1016,9 +1016,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";
@@ -1032,8 +1032,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";
@@ -1041,8 +1047,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(
@@ -1099,16 +1105,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;
@@ -1181,11 +1187,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>
@@ -1195,16 +1204,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>
@@ -1612,6 +1760,86 @@ var createTestBroadcastEndpoint = (config, collectionSlug) => {
 };
 // src/endpoints/broadcasts/preview.ts
+async function populateMediaFields(content, payload, config) {
+  if (!content || typeof content !== "object") return content;
+  if (content.root?.children) {
+    for (const child of content.root.children) {
+      await populateBlockMediaFields(child, payload, config);
+    }
+  }
+  return content;
+}
+async function populateBlockMediaFields(node, payload, config) {
+  if (node.type === "block" && node.fields) {
+    const blockType = node.fields.blockType || node.fields.blockName;
+    const customBlocks = config.customizations?.broadcasts?.customBlocks || [];
+    const blockConfig = customBlocks.find((b) => b.slug === blockType);
+    if (blockConfig && blockConfig.fields) {
+      for (const field of blockConfig.fields) {
+        if (field.type === "upload" && field.relationTo && node.fields[field.name]) {
+          const fieldValue = node.fields[field.name];
+          if (typeof fieldValue === "string" && fieldValue.match(/^[a-f0-9]{24}$/i)) {
+            try {
+              const media = await payload.findByID({
+                collection: field.relationTo,
+                id: fieldValue,
+                depth: 0
+              });
+              if (media) {
+                node.fields[field.name] = media;
+                payload.logger?.info(`Populated ${field.name} for block ${blockType}:`, {
+                  mediaId: fieldValue,
+                  mediaUrl: media.url,
+                  filename: media.filename
+                });
+              }
+            } catch (error) {
+              payload.logger?.error(`Failed to populate ${field.name} for block ${blockType}:`, error);
+            }
+          }
+        }
+        if (field.type === "array" && field.fields) {
+          const arrayValue = node.fields[field.name];
+          if (Array.isArray(arrayValue)) {
+            for (const arrayItem of arrayValue) {
+              if (arrayItem && typeof arrayItem === "object") {
+                for (const arrayField of field.fields) {
+                  if (arrayField.type === "upload" && arrayField.relationTo && arrayItem[arrayField.name]) {
+                    const arrayFieldValue = arrayItem[arrayField.name];
+                    if (typeof arrayFieldValue === "string" && arrayFieldValue.match(/^[a-f0-9]{24}$/i)) {
+                      try {
+                        const media = await payload.findByID({
+                          collection: arrayField.relationTo,
+                          id: arrayFieldValue,
+                          depth: 0
+                        });
+                        if (media) {
+                          arrayItem[arrayField.name] = media;
+                          payload.logger?.info(`Populated array ${arrayField.name} for block ${blockType}:`, {
+                            mediaId: arrayFieldValue,
+                            mediaUrl: media.url,
+                            filename: media.filename
+                          });
+                        }
+                      } catch (error) {
+                        payload.logger?.error(`Failed to populate array ${arrayField.name} for block ${blockType}:`, error);
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  if (node.children) {
+    for (const child of node.children) {
+      await populateBlockMediaFields(child, payload, config);
+    }
+  }
+}
 var createBroadcastPreviewEndpoint = (config, _collectionSlug) => {
   return {
     path: "/preview",
@@ -1627,7 +1855,9 @@ var createBroadcastPreviewEndpoint = (config, _collectionSlug) => {
           }, { status: 400 });
         }
         const mediaUrl = req.payload.config.serverURL ? `${req.payload.config.serverURL}/api/media` : "/api/media";
-        const htmlContent = await convertToEmailSafeHtml(content, {
+        req.payload.logger?.info("Populating media fields for email preview...");
+        const populatedContent = await populateMediaFields(content, req.payload, config);
+        const htmlContent = await convertToEmailSafeHtml(populatedContent, {
           wrapInTemplate: true,
           preheader,
           mediaUrl,
@@ -1926,8 +2156,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, {
+              req.payload.logger.info("Populating media fields and converting content to HTML...");
+              const populatedContent = await populateMediaFields(doc.contentSection?.content, req.payload, pluginConfig);
+              const htmlContent = await convertToEmailSafeHtml(populatedContent, {
                 customBlockConverter: pluginConfig.customizations?.broadcasts?.customBlockConverter
               });
               if (!htmlContent || htmlContent.trim() === "") {
@@ -2026,7 +2257,8 @@ 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 populatedContent = await populateMediaFields(doc.contentSection?.content, req.payload, pluginConfig);
+                const htmlContent = await convertToEmailSafeHtml(populatedContent, {
                   customBlockConverter: pluginConfig.customizations?.broadcasts?.customBlockConverter
                 });
                 if (!htmlContent || htmlContent.trim() === "") {
@@ -2087,7 +2319,8 @@ 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, {
+                    const populatedContent = await populateMediaFields(doc.contentSection?.content, req.payload, pluginConfig);
+                    updates.content = await convertToEmailSafeHtml(populatedContent, {
                       customBlockConverter: pluginConfig.customizations?.broadcasts?.customBlockConverter
                     });
                   }