npm - email-builder-utils - Versions diffs - 1.1.49 → 1.1.52 - Mend

email-builder-utils 1.1.49 → 1.1.52

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/utils/blocks/button.d.ts +0 -27
package/dist/utils/blocks/button.d.ts.map +1 -1
package/dist/utils/blocks/button.js +89 -39
package/dist/utils/blocks/dividers.js +30 -30
package/dist/utils/blocks/grid.d.ts.map +1 -1
package/dist/utils/blocks/grid.js +192 -106
package/dist/utils/blocks/image.d.ts.map +1 -1
package/dist/utils/blocks/image.js +42 -4
package/dist/utils/blocks/shape.js +89 -89
package/dist/utils/blocks/text.d.ts.map +1 -1
package/dist/utils/blocks/text.js +80 -49
package/dist/utils/blocks/video.js +56 -56
package/dist/utils/buildStyles.d.ts.map +1 -1
package/dist/utils/buildStyles.js +24 -6
package/dist/utils/common.d.ts +1 -0
package/dist/utils/common.d.ts.map +1 -1
package/dist/utils/common.js +14 -0
package/dist/utils/convertJsonToHtml.d.ts.map +1 -1
package/dist/utils/convertJsonToHtml.js +183 -153
package/dist/utils/outlookSupport.d.ts.map +1 -1
package/dist/utils/outlookSupport.js +81 -57
package/package.json +34 -34

package/dist/utils/common.js CHANGED Viewed

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.extractVimeoId = exports.extractYouTubeId = void 0;
 exports.getVisibilityClass = getVisibilityClass;
 exports.encodeBlockPropsAttr = encodeBlockPropsAttr;
+exports.buildOutlookBgAttr = buildOutlookBgAttr;
 const extractYouTubeId = (url) => {
     try {
         const u = new URL(url);
@@ -53,3 +54,16 @@ function encodeBlockPropsAttr(props) {
         .replace(/</g, "&lt;")
         .replace(/>/g, "&gt;");
 }
+function toOutlookBgColor(color) {
+    if (!color || color === 'transparent')
+        return '';
+    const m = color.match(/rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)(?:\s*,\s*[\d.]+)?\s*\)/);
+    if (m) {
+        return '#' + [m[1], m[2], m[3]].map(n => parseInt(n).toString(16).padStart(2, '0')).join('');
+    }
+    return color;
+}
+function buildOutlookBgAttr(color) {
+    const normalized = toOutlookBgColor(color);
+    return normalized ? ` bgcolor="${normalized}"` : '';
+}

package/dist/utils/convertJsonToHtml.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"convertJsonToHtml.d.ts","sourceRoot":"","sources":["../../src/utils/convertJsonToHtml.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,iBAAiB,GAAU,UAAU,GAAG,~~oBAuLpD~~,CAAC"}
1	+ {"version":3,"file":"convertJsonToHtml.d.ts","sourceRoot":"","sources":["../../src/utils/convertJsonToHtml.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,iBAAiB,GAAU,UAAU,GAAG,oBAqNpD,CAAC"}

package/dist/utils/convertJsonToHtml.js CHANGED Viewed

@@ -13,159 +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) {
-        .email-container {
-          width: 100% !important;
-          max-width: 100% !important;
-        }
-        .stack-column,
-        .stack-column-cell {
-          display: block !important;
-          width: 100% !important;
-          max-width: 100% !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"
-              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;
-                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;">
-                    ${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 CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"outlookSupport.d.ts","sourceRoot":"","sources":["../../src/utils/outlookSupport.ts"],"names":[],"mappings":"~~AAIA~~,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,~~UAqClB~~;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,~~mBA2ErB~~;AAED,wBAAsB,0BAA0B,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC,~~CAO7G~~"}
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,CAe7G"}

package/dist/utils/outlookSupport.js CHANGED Viewed

@@ -5,6 +5,7 @@ exports.appendOutlookSupport = appendOutlookSupport;
 exports.appendOutlookForImage = appendOutlookForImage;
 exports.loadImageNaturalDimensions = loadImageNaturalDimensions;
 const buildStyles_1 = require("./buildStyles");
+const common_1 = require("./common");
 // Converts rgba(r,g,b,a) → #rrggbb for use in HTML bgcolor attributes.
 // Old Outlook's bgcolor attribute only accepts solid hex or named colors — rgba is silently ignored.
 function toOutlookBgColor(color) {
@@ -23,40 +24,46 @@ function extractBgColor(styleStr) {
 function appendOutlookSupport(content, contentStyle, className, msoWidth) {
     const visibilityClass = className || "";
     const shouldHideInOutlook = visibilityClass.includes("hide-desktop");
-    // bgcolor attribute is the reliable fallback for solid colors in Outlook and webmail
-    // forwarding chains where CSS background-color gets stripped.
+    // Old Outlook (Word engine) often ignores CSS background-color on deeply-nested <td>
+    // elements. The bgcolor HTML attribute is the reliable fallback for solid colors.
+    // rgba() is stripped from CSS by the Word engine — convert to hex first.
     const rawBg = extractBgColor(contentStyle);
-    const bgAttr = rawBg ? ` bgcolor="${toOutlookBgColor(rawBg)}"` : '';
+    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" 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" 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) {
+    // OUTLOOK FIX: Use provided dimensions or calculate from image
     let vmlWidth;
     let vmlHeight;
     if (finalWidth && finalHeight) {
+        // Use pre-calculated dimensions (preferred for accuracy)
         vmlWidth = finalWidth;
         vmlHeight = finalHeight;
     }
@@ -80,53 +87,70 @@ async function appendOutlookForImage(content, outerContainerWidth, innerContaine
     const borderColor = style?.borderColor || "transparent";
     const borderRadius = parseInt(style?.borderRadius) || 0;
     const useRoundRect = borderRadius > 0;
-    const arcsize = useRoundRect ? Math.min(borderRadius / vmlHeight, 1).toFixed(2) : "";
+    const arcsize = useRoundRect
+        ? Math.min(borderRadius / vmlHeight, 1).toFixed(2)
+        : "";
     const borderAttributes = borderWidth > 0
         ? `strokeweight="${borderWidth}px" strokecolor="${borderColor}"`
         : `stroked="false"`;
+    // OUTLOOK FIX: For Outlook 2019+ (version 2512), VML type="frame" causes stretching
+    // Solution: Use simple IMG tag with fixed dimensions for Outlook, only use VML for border radius
     let outlookImage;
     if (useRoundRect && borderRadius > 0) {
-        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>
+        // 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>
   <![endif]-->`;
     }
     else {
-        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>
+        // For images without border radius, wrap in a table with explicit width for Old Outlook (Word engine)
+        // This prevents stretching/overflow in Outlook 2007-2019 and Outlook Classic
+        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>
   <![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 };
 }

package/package.json CHANGED Viewed

@@ -1,34 +1,34 @@
-{
-  "name": "email-builder-utils",
-  "version": "1.1.49",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "files": [
-    "dist"
-  ],
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "tsc",
-    "start": "npm run build && node dist/index.js"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://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@github.com/Biztecno-Infra/email-builder-utils.git"
-  },
-  "author": "",
-  "license": "ISC",
-  "bugs": {
-    "url": "https://github.com/Biztecno-Infra/email-builder-utils/issues"
-  },
-  "homepage": "https://github.com/Biztecno-Infra/email-builder-utils#readme",
-  "description": "",
-  "devDependencies": {
-    "@types/node": "^22.13.10",
-    "@types/pngjs": "^6.0.5",
-    "typescript": "^5.8.2"
-  },
-  "dependencies": {
-    "jimp": "^1.6.0",
-    "user": "^0.0.0"
-  }
-}
+{
+  "name": "email-builder-utils",
+  "version": "1.1.52",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "tsc",
+    "start": "npm run build && node dist/index.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://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@github.com/Biztecno-Infra/email-builder-utils.git"
+  },
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/Biztecno-Infra/email-builder-utils/issues"
+  },
+  "homepage": "https://github.com/Biztecno-Infra/email-builder-utils#readme",
+  "description": "",
+  "devDependencies": {
+    "@types/node": "^22.13.10",
+    "@types/pngjs": "^6.0.5",
+    "typescript": "^5.8.2"
+  },
+  "dependencies": {
+    "jimp": "^1.6.0",
+    "user": "^0.0.0"
+  }
+}