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

payload-plugin-newsletter 0.18.0 → 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 (18) hide show

package/dist/components.js CHANGED Viewed

@@ -973,9 +973,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";
@@ -989,8 +989,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 = `${styles[tag] || styles.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";
@@ -998,8 +1004,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(
@@ -1056,16 +1062,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;
@@ -1138,11 +1144,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>
@@ -1152,16 +1161,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>