email-builder-utils 1.1.50 → 1.1.52

package/dist/utils/blocks/video.js

@@ -88,64 +88,64 @@ async function convertVideoBlock(blockData, cellWidthInPx) {
     // min-height fallback for clients that ignore the spacer GIF (e.g. some webmail).
     const minHeight = Math.round(thumbnailW * 0.3);
     // VML block — shown only in Outlook (Word engine supports VML, not standard HTML).
-    const outlookContent = hideOnDesktop ? '' : `<!--[if vml]>
-<v:group xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word"
-  coordsize="${thumbnailW},${thumbnailH}" coordorigin="0,0"
-  href="${videoLink}"
-  style="width:${thumbnailW}px;height:${thumbnailH}px;">
-  <v:rect fill="t" stroked="f" style="position:absolute;width:${thumbnailW};height:${thumbnailH};">
-    <v:fill src="${resolvedThumbnail}" type="frame"/>
-  </v:rect>
-  <v:oval fill="t" strokecolor="#ffffff" strokeweight="3px"
-    style="position:absolute;left:${ovalLeft};top:${ovalTop};width:${ovalSize};height:${ovalSize}">
-    <v:fill color="#ffffff" opacity="100%" />
-  </v:oval>
-  <v:shape coordsize="24,32" path="m,l,32,24,16,xe" fillcolor="#000000" stroked="f"
-    style="position:absolute;left:${triLeft};top:${triTop};width:${triW};height:${triH};" />
-</v:group>
+    const outlookContent = hideOnDesktop ? '' : `<!--[if vml]>
+<v:group xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word"
+  coordsize="${thumbnailW},${thumbnailH}" coordorigin="0,0"
+  href="${videoLink}"
+  style="width:${thumbnailW}px;height:${thumbnailH}px;">
+  <v:rect fill="t" stroked="f" style="position:absolute;width:${thumbnailW};height:${thumbnailH};">
+    <v:fill src="${resolvedThumbnail}" type="frame"/>
+  </v:rect>
+  <v:oval fill="t" strokecolor="#ffffff" strokeweight="3px"
+    style="position:absolute;left:${ovalLeft};top:${ovalTop};width:${ovalSize};height:${ovalSize}">
+    <v:fill color="#ffffff" opacity="100%" />
+  </v:oval>
+  <v:shape coordsize="24,32" path="m,l,32,24,16,xe" fillcolor="#000000" stroked="f"
+    style="position:absolute;left:${triLeft};top:${triTop};width:${triW};height:${triH};" />
+</v:group>
 <![endif]-->`;
     // Non-VML block — shown in all clients except Outlook.
-    const nonMsoContent = `<!--[if !vml]><!-->
-<a href="${videoLink}" target="_blank"
-    style="display:block; text-decoration:none; background-image:url('${resolvedThumbnail}'); background-size:cover; background-position:center; ${borderCss}${radiusCss}">
-  <table cellpadding="0" cellspacing="0" border="0" width="100%"
-    background="${resolvedThumbnail}"
-    role="presentation"
-    style="background-image:url('${resolvedThumbnail}'); background-size:cover; background-position:center center; background-repeat:no-repeat; min-height:${minHeight}px;">
-    <tr>
-      <td width="25%" style="line-height:0; font-size:0; padding:0;">
-        <img src="${SPACER_GIF_URL}" width="100%" border="0" alt=""
-          style="display:block; height:auto; opacity:0; visibility:hidden;" />
-      </td>
-      <td width="50%" align="center" valign="middle"
-          style="text-align:center; vertical-align:middle; padding:0;">
-        <img src="${PLAY_ICON_URL}" width="${playIconW}" height="${playIconH}" alt="Play"
-          style="display:block; width:${playIconW}px; height:${playIconH}px; border:0; margin:0 auto;" />
-      </td>
-      <td width="25%" style="padding:0;">&nbsp;</td>
-    </tr>
-  </table>
-</a>
+    const nonMsoContent = `<!--[if !vml]><!-->
+<a href="${videoLink}" target="_blank"
+    style="display:block; text-decoration:none; background-image:url('${resolvedThumbnail}'); background-size:cover; background-position:center; ${borderCss}${radiusCss}">
+  <table cellpadding="0" cellspacing="0" border="0" width="100%"
+    background="${resolvedThumbnail}"
+    role="presentation"
+    style="background-image:url('${resolvedThumbnail}'); background-size:cover; background-position:center center; background-repeat:no-repeat; min-height:${minHeight}px;">
+    <tr>
+      <td width="25%" style="line-height:0; font-size:0; padding:0;">
+        <img src="${SPACER_GIF_URL}" width="100%" border="0" alt=""
+          style="display:block; height:auto; opacity:0; visibility:hidden;" />
+      </td>
+      <td width="50%" align="center" valign="middle"
+          style="text-align:center; vertical-align:middle; padding:0;">
+        <img src="${PLAY_ICON_URL}" width="${playIconW}" height="${playIconH}" alt="Play"
+          style="display:block; width:${playIconW}px; height:${playIconH}px; border:0; margin:0 auto;" />
+      </td>
+      <td width="25%" style="padding:0;">&nbsp;</td>
+    </tr>
+  </table>
+</a>
 <!--<![endif]-->`;
-    return `
-<table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation"
-  style="border-collapse:collapse; max-width:600px; margin:0; padding:0;"
-  class="${visibilityClass}" data-block-type="video"
-  data-video-url="${videoUrl || ''}" data-youtube-url="${youtubeVideoUrl || ''}"
-  data-thumbnail-url="${thumbnailUrl || ''}" data-alt-text="${altText || ''}"
-  data-width="${typeof style?.width === 'number' ? style.width : 100}">
-  <tr>
-    <td align="${align}" style="${outerContainerStyles}">
-      <table border="0" cellpadding="0" cellspacing="0" role="presentation"
-        align="${align}"
-        style="border-collapse:collapse; max-width:${thumbnailW}px; width:${percentWidth};">
-        <tr>
-          <td align="${align}" style="padding:0;">
-            ${outlookContent}${nonMsoContent}
-          </td>
-        </tr>
-      </table>
-    </td>
-  </tr>
+    return `
+<table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation"
+  style="border-collapse:collapse; max-width:600px; margin:0; padding:0;"
+  class="${visibilityClass}" data-block-type="video"
+  data-video-url="${videoUrl || ''}" data-youtube-url="${youtubeVideoUrl || ''}"
+  data-thumbnail-url="${thumbnailUrl || ''}" data-alt-text="${altText || ''}"
+  data-width="${typeof style?.width === 'number' ? style.width : 100}">
+  <tr>
+    <td align="${align}" style="${outerContainerStyles}">
+      <table border="0" cellpadding="0" cellspacing="0" role="presentation"
+        align="${align}"
+        style="border-collapse:collapse; max-width:${thumbnailW}px; width:${percentWidth};">
+        <tr>
+          <td align="${align}" style="padding:0;">
+            ${outlookContent}${nonMsoContent}
+          </td>
+        </tr>
+      </table>
+    </td>
+  </tr>
 </table>`;
 }

package/dist/utils/convertJsonToHtml.js

@@ -13,189 +13,189 @@ const convertJsonToHtml = async (jsonData) => {
     }
     const { fontFamily, canvasColor, textColor, padding = {}, borderColor, borderRadius, borderWidth, borderStyle, } = rootData.style || {};
     const { top = 0, right = 0, bottom = 0, left = 0 } = padding;
-    const rawHtml = `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<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 http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="x-apple-disable-message-reformatting" />
-    <meta name="format-detection" content="telephone=no,address=no,email=no,date=no,url=no" />
-    <!--[if gte mso 9]><xml>
-      <o:OfficeDocumentSettings>
-        <o:AllowPNG/>
-        <o:PixelsPerInch>96</o:PixelsPerInch>
-      </o:OfficeDocumentSettings>
-    </xml><![endif]-->
-    <style>
-      html, body {
-        margin: 0 !important;
-        padding: 0 !important;
-        width: 100% !important;
-        -ms-text-size-adjust: 100%;
-        -webkit-text-size-adjust: 100%;
-      }
-
-      body, table, td, p, a {
-        font-family: ${(0, fontFallback_1.withFontFallback)(fontFamily)};
-      }
-
-      table, td {
-        mso-table-lspace: 0pt;
-        mso-table-rspace: 0pt;
-        border-collapse: collapse !important;
-      }
-
-      img {
-        -ms-interpolation-mode: bicubic;
-        border: 0;
-        outline: none;
-        text-decoration: none;
-        display: block;
-        height: auto;
-        line-height: 100%;
-      }
-
-      a {
-        text-decoration: none;
-        color: inherit;
-      }
-
-      .email-container {
-        width: 100%;
-        max-width: 600px;
-        margin: 0 auto;
-      }
-
-      .stack-column,
-      .stack-column-cell {
-        vertical-align: top;
-      }
-
-      .hide-mobile {
-        display: block !important;
-        max-height: none !important;
-        overflow: visible !important;
-      }
-
-      .hide-desktop {
-        display: none !important;
-        max-height: 0 !important;
-        overflow: hidden !important;
-        mso-hide: all !important;
-      }
-
-      @media only screen and (max-width: 600px) {
-        body {
-          overflow-x: hidden !important;
-        }
-
-        .email-container {
-          width: 100% !important;
-          max-width: 100% !important;
-          overflow-x: hidden !important;
-        }
-
-        .stack-column,
-        .stack-column-cell {
-          display: block !important;
-          width: 100% !important;
-          max-width: 100% !important;
-          /* Prevents horizontal padding from adding to 100% width once display:block is applied */
-          box-sizing: border-box !important;
-        }
-
-        /* Images: drop the inline pixel height so aspect ratio is preserved as width shrinks,
-           and cap width to the container. Matches the canvas ImageBlock (height:auto, max-width:100%). */
-        img {
-          height: auto !important;
-          max-width: 100% !important;
-        }
-
-        /* Safety net for clients that keep inline max-width:600px on nested wrappers */
-        table[style*="max-width:600px"] {
-          width: 100% !important;
-          max-width: 100% !important;
-        }
-
-        /* Column-gap spacer tds have no stacking behaviour — collapse them when columns stack */
-        .col-gap-spacer {
-          display: none !important;
-          width: 0 !important;
-          max-height: 0 !important;
-          overflow: hidden !important;
-        }
-
-        .hide-mobile {
-          display: none !important;
-          max-height: 0 !important;
-          overflow: hidden !important;
-          mso-hide: all !important;
-        }
-
-        .hide-desktop {
-          display: block !important;
-          max-height: none !important;
-          overflow: visible !important;
-        }
-      }
-    </style>
-  </head>
-  <body style="margin:0; padding:0; background-color:${canvasColor || '#ffffff'};">
-    <center style="width:100%; background-color:${canvasColor || '#ffffff'};">
-
-      <table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="${canvasColor || '#ffffff'}">
-        <tr>
-          <td align="center">
-
-            <!--[if mso]>
-            <table role="presentation" border="0" cellspacing="0" cellpadding="0" width="600">
-              <tr>
-                <td>
-            <![endif]-->
-
-            <table
-              role="presentation"
-              class="email-container"
-              align="center"
-              bgcolor="${canvasColor || '#ffffff'}"
-              cellpadding="0"
-              cellspacing="0"
-              border="0"
-              width="100%"
-              style="
-                font-family: ${(0, fontFallback_1.withFontFallback)(fontFamily)};
-                table-layout: fixed;
-                width: 100%;
-                max-width: 600px;
-                margin: 0 auto;
-                overflow: hidden;
-                background-color: ${canvasColor || '#ffffff'};
-                ${textColor ? `color: ${textColor};` : ''}
-                ${borderWidth ? `border: ${borderWidth}px ${borderStyle || 'solid'} ${borderColor || 'transparent'};` : ''}
-                ${borderRadius ? `border-radius: ${borderRadius}px;` : ''}"
-            >
-              <tbody>
-                <tr>
-                  <td style="padding: ${top}px ${right}px ${bottom}px ${left}px; max-width: 600px; overflow: hidden; box-sizing: border-box; word-break: break-word; overflow-wrap: anywhere;">
-                    ${blocksHtml.join("")}
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-
-            <!--[if mso]>
-                </td>
-              </tr>
-            </table>
-            <![endif]-->
-
-          </td>
-        </tr>
-      </table>
-
-    </center>
-  </body>
+    const rawHtml = `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<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 http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="x-apple-disable-message-reformatting" />
+    <meta name="format-detection" content="telephone=no,address=no,email=no,date=no,url=no" />
+    <!--[if gte mso 9]><xml>
+      <o:OfficeDocumentSettings>
+        <o:AllowPNG/>
+        <o:PixelsPerInch>96</o:PixelsPerInch>
+      </o:OfficeDocumentSettings>
+    </xml><![endif]-->
+    <style>
+      html, body {
+        margin: 0 !important;
+        padding: 0 !important;
+        width: 100% !important;
+        -ms-text-size-adjust: 100%;
+        -webkit-text-size-adjust: 100%;
+      }
+
+      body, table, td, p, a {
+        font-family: ${(0, fontFallback_1.withFontFallback)(fontFamily)};
+      }
+
+      table, td {
+        mso-table-lspace: 0pt;
+        mso-table-rspace: 0pt;
+        border-collapse: collapse !important;
+      }
+
+      img {
+        -ms-interpolation-mode: bicubic;
+        border: 0;
+        outline: none;
+        text-decoration: none;
+        display: block;
+        height: auto;
+        line-height: 100%;
+      }
+
+      a {
+        text-decoration: none;
+        color: inherit;
+      }
+
+      .email-container {
+        width: 100%;
+        max-width: 600px;
+        margin: 0 auto;
+      }
+
+      .stack-column,
+      .stack-column-cell {
+        vertical-align: top;
+      }
+
+      .hide-mobile {
+        display: block !important;
+        max-height: none !important;
+        overflow: visible !important;
+      }
+
+      .hide-desktop {
+        display: none !important;
+        max-height: 0 !important;
+        overflow: hidden !important;
+        mso-hide: all !important;
+      }
+
+      @media only screen and (max-width: 600px) {
+        body {
+          overflow-x: hidden !important;
+        }
+
+        .email-container {
+          width: 100% !important;
+          max-width: 100% !important;
+          overflow-x: hidden !important;
+        }
+
+        .stack-column,
+        .stack-column-cell {
+          display: block !important;
+          width: 100% !important;
+          max-width: 100% !important;
+          /* Prevents horizontal padding from adding to 100% width once display:block is applied */
+          box-sizing: border-box !important;
+        }
+
+        /* Images: drop the inline pixel height so aspect ratio is preserved as width shrinks,
+           and cap width to the container. Matches the canvas ImageBlock (height:auto, max-width:100%). */
+        img {
+          height: auto !important;
+          max-width: 100% !important;
+        }
+
+        /* Safety net for clients that keep inline max-width:600px on nested wrappers */
+        table[style*="max-width:600px"] {
+          width: 100% !important;
+          max-width: 100% !important;
+        }
+
+        /* Column-gap spacer tds have no stacking behaviour — collapse them when columns stack */
+        .col-gap-spacer {
+          display: none !important;
+          width: 0 !important;
+          max-height: 0 !important;
+          overflow: hidden !important;
+        }
+
+        .hide-mobile {
+          display: none !important;
+          max-height: 0 !important;
+          overflow: hidden !important;
+          mso-hide: all !important;
+        }
+
+        .hide-desktop {
+          display: block !important;
+          max-height: none !important;
+          overflow: visible !important;
+        }
+      }
+    </style>
+  </head>
+  <body bgcolor="${canvasColor || '#ffffff'}" style="margin:0; padding:0; background-color:${canvasColor || '#ffffff'};">
+    <center style="width:100%; background-color:${canvasColor || '#ffffff'};">
+
+      <table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="${canvasColor || '#ffffff'}">
+        <tr>
+          <td align="center" bgcolor="${canvasColor || '#ffffff'}">
+
+            <!--[if mso]>
+            <table role="presentation" border="0" cellspacing="0" cellpadding="0" width="600">
+              <tr>
+                <td>
+            <![endif]-->
+
+            <table
+              role="presentation"
+              class="email-container"
+              align="center"
+              bgcolor="${canvasColor || '#ffffff'}"
+              cellpadding="0"
+              cellspacing="0"
+              border="0"
+              width="100%"
+              style="
+                font-family: ${(0, fontFallback_1.withFontFallback)(fontFamily)};
+                table-layout: fixed;
+                width: 100%;
+                max-width: 600px;
+                margin: 0 auto;
+                overflow: hidden;
+                background-color: ${canvasColor || '#ffffff'};
+                ${textColor ? `color: ${textColor};` : ''}
+                ${borderWidth ? `border: ${borderWidth}px ${borderStyle || 'solid'} ${borderColor || 'transparent'};` : ''}
+                ${borderRadius ? `border-radius: ${borderRadius}px;` : ''}"
+            >
+              <tbody>
+                <tr>
+                  <td bgcolor="${canvasColor || '#ffffff'}" style="padding: ${top}px ${right}px ${bottom}px ${left}px; max-width: 600px; overflow: hidden; box-sizing: border-box; word-break: break-word; overflow-wrap: anywhere;">
+                    ${blocksHtml.join("")}
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+
+            <!--[if mso]>
+                </td>
+              </tr>
+            </table>
+            <![endif]-->
+
+          </td>
+        </tr>
+      </table>
+
+    </center>
+  </body>
 </html>`;
     return rawHtml;
 };

package/dist/utils/outlookSupport.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"outlookSupport.d.ts","sourceRoot":"","sources":["../../src/utils/outlookSupport.ts"],"names":[],"mappings":"AAKA,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAOtD;AAOD,wBAAgB,oBAAoB,CAClC,OAAO,EAAE,MAAM,EACf,YAAY,EAAE,MAAM,EACpB,SAAS,CAAC,EAAE,MAAM,EAClB,QAAQ,CAAC,EAAE,MAAM,UAyClB;AAED,wBAAsB,qBAAqB,CACzC,OAAO,EAAE,MAAM,EACf,mBAAmB,EAAE,MAAM,EAC3B,mBAAmB,EAAE,MAAM,EAC3B,QAAQ,EAAE,MAAM,EAChB,KAAK,GAAE,GAAQ,EACf,UAAU,CAAC,EAAE,MAAM,EACnB,WAAW,CAAC,EAAE,MAAM,mBA2FrB;AAED,wBAAsB,0BAA0B,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC,CAO7G"}
+{"version":3,"file":"outlookSupport.d.ts","sourceRoot":"","sources":["../../src/utils/outlookSupport.ts"],"names":[],"mappings":"AAKA,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAOtD;AAOD,wBAAgB,oBAAoB,CAClC,OAAO,EAAE,MAAM,EACf,YAAY,EAAE,MAAM,EACpB,SAAS,CAAC,EAAE,MAAM,EAClB,QAAQ,CAAC,EAAE,MAAM,UAyClB;AAED,wBAAsB,qBAAqB,CACzC,OAAO,EAAE,MAAM,EACf,mBAAmB,EAAE,MAAM,EAC3B,mBAAmB,EAAE,MAAM,EAC3B,QAAQ,EAAE,MAAM,EAChB,KAAK,GAAE,GAAQ,EACf,UAAU,CAAC,EAAE,MAAM,EACnB,WAAW,CAAC,EAAE,MAAM,mBA2FrB;AAED,wBAAsB,0BAA0B,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC,CAe7G"}

package/dist/utils/outlookSupport.js

@@ -30,32 +30,32 @@ function appendOutlookSupport(content, contentStyle, className, msoWidth) {
     const rawBg = extractBgColor(contentStyle);
     const bgAttr = (0, common_1.buildOutlookBgAttr)(rawBg);
     if (shouldHideInOutlook) {
-        return `
-    <!--[if !mso]><!-->
-    <table data-ebr-role="wrapper" role="presentation" width="100%" style="${buildStyles_1.tableCommonStyle}" class="${visibilityClass}"><tr><td${bgAttr} style="${contentStyle}">${content}</td></tr></table>
-    <!--<![endif]-->
+        return `
+    <!--[if !mso]><!-->
+    <table data-ebr-role="wrapper" role="presentation" width="100%" style="${buildStyles_1.tableCommonStyle}" class="${visibilityClass}"><tr><td${bgAttr} style="${contentStyle}">${content}</td></tr></table>
+    <!--<![endif]-->
     `;
     }
     // When an explicit pixel width is provided (e.g. inside a column cell), use dual MSO/non-MSO
     // tables. Old Outlook (Word engine) ignores max-width and can resolve width="100%" to the
     // full email width (600px) rather than the column width, causing images/buttons to expand.
     if (msoWidth) {
-        return `
-<!--[if mso]>
-<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="${msoWidth}" style="border-collapse:collapse;width:${msoWidth}px;"><tr><td width="${msoWidth}"${bgAttr} style="${contentStyle}">
-<![endif]-->
-<!--[if !mso]><!-->
-<table data-ebr-role="wrapper" role="presentation" align="center" width="100%" border="0" cellpadding="0" cellspacing="0" style="${buildStyles_1.tableCommonStyle}; max-width:600px;" class="${visibilityClass}"><tr><td width="100%"${bgAttr} style="${contentStyle}">
-<!--<![endif]-->
-${content}
-<!--[if mso]></td></tr></table><![endif]-->
-<!--[if !mso]><!-->
-</td></tr></table>
-<!--<![endif]-->
+        return `
+<!--[if mso]>
+<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="${msoWidth}" style="border-collapse:collapse;width:${msoWidth}px;"><tr><td width="${msoWidth}"${bgAttr} style="${contentStyle}">
+<![endif]-->
+<!--[if !mso]><!-->
+<table data-ebr-role="wrapper" role="presentation" align="center" width="100%" border="0" cellpadding="0" cellspacing="0" style="${buildStyles_1.tableCommonStyle}; max-width:600px;" class="${visibilityClass}"><tr><td width="100%"${bgAttr} style="${contentStyle}">
+<!--<![endif]-->
+${content}
+<!--[if mso]></td></tr></table><![endif]-->
+<!--[if !mso]><!-->
+</td></tr></table>
+<!--<![endif]-->
     `;
     }
-    return `
-  <table data-ebr-role="wrapper" role="presentation" align="center" width="100%" border="0" cellpadding="0" cellspacing="0" style="${buildStyles_1.tableCommonStyle}; max-width:600px;" class="${visibilityClass}"><tr><td width="100%"${bgAttr} style="${contentStyle}">${content}</td></tr></table>
+    return `
+  <table data-ebr-role="wrapper" role="presentation" align="center" width="100%" border="0" cellpadding="0" cellspacing="0" style="${buildStyles_1.tableCommonStyle}; max-width:600px;" class="${visibilityClass}"><tr><td width="100%"${bgAttr} style="${contentStyle}">${content}</td></tr></table>
   `;
 }
 async function appendOutlookForImage(content, outerContainerWidth, innerContainerWidth, imageUrl, style = {}, finalWidth, finalHeight) {
@@ -99,21 +99,21 @@ async function appendOutlookForImage(content, outerContainerWidth, innerContaine
     if (useRoundRect && borderRadius > 0) {
         // Use VML for border radius - wrap in table to constrain width for Old Outlook (Word engine)
         // Use aspect="atmost" to prevent image from stretching beyond its bounds
-        outlookImage = `<!--[if mso]>
-  <table border="0" cellpadding="0" cellspacing="0" width="${vmlWidth}" style="width:${vmlWidth}px;">
-    <tr>
-      <td align="center" valign="top" width="${vmlWidth}" style="width:${vmlWidth}px;">
-        <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml"
-          style="width:${vmlWidth}px;height:${vmlHeight}px;"
-          ${borderAttributes}
-          arcsize="${arcsize}"
-          fill="true" fillcolor="none">
-          <v:fill src="${imageUrl}" type="tile" aspect="atmost" />
-          <v:textbox inset="0,0,0,0"><div style="display:none;">.</div></v:textbox>
-        </v:roundrect>
-      </td>
-    </tr>
-  </table>
+        outlookImage = `<!--[if mso]>
+  <table border="0" cellpadding="0" cellspacing="0" width="${vmlWidth}" style="width:${vmlWidth}px;">
+    <tr>
+      <td align="center" valign="top" width="${vmlWidth}" style="width:${vmlWidth}px;">
+        <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml"
+          style="width:${vmlWidth}px;height:${vmlHeight}px;"
+          ${borderAttributes}
+          arcsize="${arcsize}"
+          fill="true" fillcolor="none">
+          <v:fill src="${imageUrl}" type="tile" aspect="atmost" />
+          <v:textbox inset="0,0,0,0"><div style="display:none;">.</div></v:textbox>
+        </v:roundrect>
+      </td>
+    </tr>
+  </table>
   <![endif]-->`;
     }
     else {
@@ -122,28 +122,35 @@ async function appendOutlookForImage(content, outerContainerWidth, innerContaine
         const borderStyleAttr = borderWidth > 0
             ? `border: ${borderWidth}px solid ${borderColor};`
             : '';
-        outlookImage = `<!--[if mso]>
-  <table border="0" cellpadding="0" cellspacing="0" width="${vmlWidth}" style="width:${vmlWidth}px;">
-    <tr>
-      <td align="center" valign="top" width="${vmlWidth}" style="width:${vmlWidth}px;">
-        <img src="${imageUrl}" alt="Image" border="0" width="${vmlWidth}" height="${vmlHeight}" style="display:block; width:${vmlWidth}px; height:${vmlHeight}px; max-width:${vmlWidth}px; ${borderStyleAttr}" />
-      </td>
-    </tr>
-  </table>
+        outlookImage = `<!--[if mso]>
+  <table border="0" cellpadding="0" cellspacing="0" width="${vmlWidth}" style="width:${vmlWidth}px;">
+    <tr>
+      <td align="center" valign="top" width="${vmlWidth}" style="width:${vmlWidth}px;">
+        <img src="${imageUrl}" alt="Image" border="0" width="${vmlWidth}" height="${vmlHeight}" style="display:block; width:${vmlWidth}px; height:${vmlHeight}px; max-width:${vmlWidth}px; ${borderStyleAttr}" />
+      </td>
+    </tr>
+  </table>
   <![endif]-->`;
     }
-    return `
-    ${outlookImage}
-    <!--[if !mso]><!-->
-      ${content}
-    <!--<![endif]-->
+    return `
+    ${outlookImage}
+    <!--[if !mso]><!-->
+      ${content}
+    <!--<![endif]-->
   `;
 }
 async function loadImageNaturalDimensions(imageUrl) {
-    return new Promise((resolve, reject) => {
-        const img = new Image();
-        img.onload = () => resolve({ width: img.naturalWidth, height: img.naturalHeight });
-        img.onerror = () => reject(new Error(`Failed to load image: ${imageUrl}`));
-        img.src = imageUrl;
-    });
+    // Browser environment: use native Image element
+    if (typeof window !== 'undefined' && typeof Image !== 'undefined') {
+        return new Promise((resolve, reject) => {
+            const img = new Image();
+            img.onload = () => resolve({ width: img.naturalWidth, height: img.naturalHeight });
+            img.onerror = () => reject(new Error(`Failed to load image: ${imageUrl}`));
+            img.src = imageUrl;
+        });
+    }
+    // Node.js (BE) environment: use jimp to fetch and read dimensions
+    const { Jimp } = await import('jimp');
+    const image = await Jimp.read(imageUrl);
+    return { width: image.bitmap.width, height: image.bitmap.height };
 }