email-builder-utils 1.1.50 → 1.1.53

package/dist/utils/blocks/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/utils/blocks/button.ts"],"names":[],"mappings":"AA6IA,wBAAgB,kBAAkB,CAAC,SAAS,EAAE,GAAG,UAuFhD"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/utils/blocks/button.ts"],"names":[],"mappings":"AA2IA,wBAAgB,kBAAkB,CAAC,SAAS,EAAE,GAAG,UAuFhD"}

package/dist/utils/blocks/button.js

@@ -79,9 +79,7 @@ function appendOutlookForButton(buttonData) {
   ${strokeAttrs}
   fillcolor="${bgColor}">
   <w:anchorlock/>
-  <v:textbox inset="0,0,0,0">
-    <center style="color:${safeColor};font-family:${safeFF};font-size:${fs}px;font-weight:${fontWeight};mso-line-height-rule:exactly;line-height:${finalHeight}px;text-decoration:none;">${text}</center>
-  </v:textbox>
+  <center style="color:${safeColor};font-family:${safeFF};font-size:${fs}px;font-weight:${fontWeight};mso-line-height-rule:exactly;line-height:${fs}px;text-decoration:none;">${text}</center>
 </v:roundrect>
 <![endif]-->`;
     const innerContent = containerAlign === "center"

package/dist/utils/blocks/grid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../../src/utils/blocks/grid.ts"],"names":[],"mappings":"AAMA,wBAAsB,gBAAgB,CACpC,SAAS,EAAE,GAAG,EACd,QAAQ,EAAE,GAAG,EACb,aAAa,EAAE,MAAM,mBAgTtB;AAED,wBAAsB,oBAAoB,CACxC,SAAS,EAAE,GAAG,EACd,QAAQ,EAAE,GAAG,EACb,gBAAgB,EAAE,MAAM,EACxB,iBAAiB,EAAE,MAAM,EACzB,mBAAmB,UAAQ;;;GAwG5B"}
+{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../../src/utils/blocks/grid.ts"],"names":[],"mappings":"AAMA,wBAAsB,gBAAgB,CACpC,SAAS,EAAE,GAAG,EACd,QAAQ,EAAE,GAAG,EACb,aAAa,EAAE,MAAM,mBA0TtB;AAED,wBAAsB,oBAAoB,CACxC,SAAS,EAAE,GAAG,EACd,QAAQ,EAAE,GAAG,EACb,gBAAgB,EAAE,MAAM,EACxB,iBAAiB,EAAE,MAAM,EACzB,mBAAmB,UAAQ;;;GA0G5B"}

package/dist/utils/blocks/grid.js

@@ -157,10 +157,16 @@ async function convertGridBlock(blockData, rootData, cellWidthInPx) {
                 const visibilityClass = (0, common_1.getVisibilityClass)(childProps);
                 if (childVisible) {
                     const { html: childHtml, styles } = await convertGridCellBlock(child, rootData, widthPercent, adjustedTableWidth, Boolean(divBorderStyle));
-                    // bgcolor on the cell <td> ensures background-color survives Outlook
-                    // compose paste (Word/Web editors strip CSS but keep bgcolor attribute).
+                    // bgcolor on the cell <td> for Old Outlook (Word engine).
+                    // When the cell has no border-radius and the grid has no border, use the grid's
+                    // backgroundColor as the fallback so the grid background shows through empty cells.
+                    // Skipped for border-radius cells — bgcolor is rectangular and would bleed through
+                    // the div's rounded-corner clip in CSS-capable clients (corner squares).
                     const cellBgColor = cellStyle.backgroundColor || '';
-                    const cellBgAttr = (0, common_1.buildOutlookBgAttr)(cellBgColor);
+                    const cellHasBorderRadius = Boolean(cellStyle.borderRadius);
+                    const canApplyGridBgFallback = !cellHasBorderRadius && !divBorderStyle;
+                    const effectiveCellBg = cellBgColor || (canApplyGridBgFallback ? msoBgColor : '');
+                    const cellBgAttr = (0, common_1.buildOutlookBgAttr)(effectiveCellBg);
                     html += `
           <td
             width="${Math.max(1, Math.round(widthPercent))}%"${cellBgAttr}
@@ -173,18 +179,22 @@ async function convertGridBlock(blockData, rootData, cellWidthInPx) {
                     // Outlook mobile (which strips <style>) treats it proportionally, not as a fixed blocker.
                     // col-gap-spacer class hides it when columns stack via CSS media query.
                     if (columnGap > 0 && c !== lastVisibleCol) {
-                        html += `<td width="${columnGap}" class="col-gap-spacer" style="font-size:0;line-height:0;padding:0;" aria-hidden="true"></td>`;
+                        const gapBgAttr = divBorderStyle ? '' : (0, common_1.buildOutlookBgAttr)(msoBgColor);
+                        html += `<td width="${columnGap}"${gapBgAttr} class="col-gap-spacer" style="font-size:0;line-height:0;padding:0;" aria-hidden="true"></td>`;
                     }
                 }
             }
             else {
+                const emptyBgAttr = divBorderStyle ? '' : (0, common_1.buildOutlookBgAttr)(msoBgColor);
                 html += `
         <td width="${Math.max(1, Math.round(widthPercent))}%"
+            ${emptyBgAttr}
             ${responsive ? 'class="stack-column"' : ""}
             style="width:${widthPercent}%;vertical-align:top;">
         </td>`;
                 if (columnGap > 0 && c !== lastVisibleCol) {
-                    html += `<td width="${columnGap}" class="col-gap-spacer" style="font-size:0;line-height:0;padding:0;" aria-hidden="true"></td>`;
+                    const gapBgAttr = divBorderStyle ? '' : (0, common_1.buildOutlookBgAttr)(msoBgColor);
+                    html += `<td width="${columnGap}"${gapBgAttr} class="col-gap-spacer" style="font-size:0;line-height:0;padding:0;" aria-hidden="true"></td>`;
                 }
             }
         }
@@ -310,7 +320,7 @@ async function convertGridCellBlock(blockData, rootData, cellWidthPercent, paren
         }
     }
     const borderRadius = cellBorderRadius || 0;
-    const bgColor = styleWithoutBorder?.backgroundColor || "transparent";
+    const bgColor = styleWithoutBorder?.backgroundColor || "";
     // Build border CSS for the div wrapper.
     // When the parent grid already has a divBorderStyle wrapper (border + border-radius +
     // overflow:hidden), the cell must NOT duplicate the same border/radius — that causes
@@ -332,8 +342,10 @@ async function convertGridCellBlock(blockData, rootData, cellWidthPercent, paren
     }
     const cellDivBorderStyle = cellDivBorderParts.join(' ');
     // Unconditional div — visible to all clients (Gmail, Outlook new/old, Apple Mail).
-    // background-color on the div covers modern clients; bgcolor on <td> covers Old Outlook.
-    const divStyleParts = [`background-color:${bgColor};`];
+    // background-color on the div covers modern clients when a real color is set.
+    // When no color is set, omit the property entirely — writing background-color:transparent
+    // defeats the bgcolor attribute on the parent <td> in Old Outlook's Word engine.
+    const divStyleParts = bgColor ? [`background-color:${bgColor};`] : [];
     const formatPad = (value) => (typeof value === 'number' ? `${value}px` : (value || '0'));
     const cellPadTop = formatPad(cellPad.top);
     const cellPadBottom = formatPad(cellPad.bottom);

package/dist/utils/blocks/text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../src/utils/blocks/text.ts"],"names":[],"mappings":"AASA,wBAAgB,gBAAgB,CAAC,SAAS,EAAE,GAAG,EAAE,aAAa,CAAC,EAAE,MAAM,UAkLtE"}
+{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../src/utils/blocks/text.ts"],"names":[],"mappings":"AASA,wBAAgB,gBAAgB,CAAC,SAAS,EAAE,GAAG,EAAE,aAAa,CAAC,EAAE,MAAM,UAqLtE"}

package/dist/utils/blocks/text.js

@@ -101,9 +101,12 @@ function convertTextBlock(blockData, cellWidthInPx) {
                 return `<v:fill type="gradient" color="${c1}" color2="${c2}" angle="${vmlAngle}" />`;
             })()
             : `<v:fill type="frame" src="${rawBgImageUrl}" color="${fallbackBgColor}" />`;
+        const bgPosition = rest.backgroundPosition || 'center center';
+        const bgSize = rest.backgroundSize || 'cover';
+        const bgRepeat = rest.backgroundRepeat || 'no-repeat';
         const bgCss = isGradient
             ? `background:${effectiveGradient};`
-            : `background-image:url('${rawBgImageUrl}'); background-position:center center; background-size:cover; background-repeat:no-repeat;`;
+            : `background-image:url('${rawBgImageUrl}'); background-position:${bgPosition}; background-size:${bgSize}; background-repeat:${bgRepeat};`;
         const wrappedContent = `
 <table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation"
   style="border-collapse:collapse;width:100%;max-width:${msoWidth}px;" class="${visibilityClass}">

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

@@ -1 +1 @@
-{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../src/utils/common.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,gBAAgB,GAAI,KAAK,MAAM,KAAG,MAAM,GAAG,IAqBvD,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,KAAK,MAAM,KAAG,MAAM,GAAG,IAIrD,CAAC;AAGF,wBAAgB,kBAAkB,CAAC,KAAK,CAAC,EAAE;IACzC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,UASA;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,MAAM,CAQvE;AAYD,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAGxD"}
+{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../src/utils/common.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,gBAAgB,GAAI,KAAK,MAAM,KAAG,MAAM,GAAG,IAqBvD,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,KAAK,MAAM,KAAG,MAAM,GAAG,IAIrD,CAAC;AAGF,wBAAgB,kBAAkB,CAAC,KAAK,CAAC,EAAE;IACzC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,UASA;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,MAAM,CAQvE;AAcD,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAGxD"}

package/dist/utils/common.js

@@ -57,8 +57,11 @@ function encodeBlockPropsAttr(props) {
 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*\)/);
+    const m = color.match(/rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)(?:\s*,\s*([\d.]+))?\s*\)/);
     if (m) {
+        const alpha = m[4] !== undefined ? parseFloat(m[4]) : 1;
+        if (alpha < 1)
+            return '';
         return '#' + [m[1], m[2], m[3]].map(n => parseInt(n).toString(16).padStart(2, '0')).join('');
     }
     return color;

package/dist/utils/convertJsonToHtml.js

@@ -141,17 +141,17 @@ const convertJsonToHtml = async (jsonData) => {
       }
     </style>
   </head>
-  <body style="margin:0; padding:0; background-color:${canvasColor || '#ffffff'};">
-    <center style="width:100%; background-color:${canvasColor || '#ffffff'};">
+  <body bgcolor="#ffffff" style="margin:0; padding:0; background-color:#ffffff;">
+    <center style="width:100%;">
 
-      <table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="${canvasColor || '#ffffff'}">
+      <table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
         <tr>
-          <td align="center">
+          <td align="center" bgcolor="#ffffff">
 
             <!--[if mso]>
             <table role="presentation" border="0" cellspacing="0" cellpadding="0" width="600">
               <tr>
-                <td>
+                <td bgcolor="${canvasColor || '#ffffff'}">
             <![endif]-->
 
             <table
@@ -177,7 +177,7 @@ const convertJsonToHtml = async (jsonData) => {
             >
               <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;">
+                  <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>

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,CAStD;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

@@ -11,8 +11,11 @@ const common_1 = require("./common");
 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*\)/);
+    const m = color.match(/rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)(?:\s*,\s*([\d.]+))?\s*\)/);
     if (m) {
+        const alpha = m[4] !== undefined ? parseFloat(m[4]) : 1;
+        if (alpha < 1)
+            return '';
         return '#' + [m[1], m[2], m[3]].map(n => parseInt(n).toString(16).padStart(2, '0')).join('');
     }
     return color;
@@ -126,7 +129,7 @@ async function appendOutlookForImage(content, outerContainerWidth, innerContaine
   <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}" />
+        <img src="${imageUrl}" alt="Image" border="0" width="${vmlWidth}" style="display:block; width:${vmlWidth}px; height:auto; max-width:${vmlWidth}px; ${borderStyleAttr}" />
       </td>
     </tr>
   </table>
@@ -140,10 +143,17 @@ async function appendOutlookForImage(content, outerContainerWidth, innerContaine
   `;
 }
 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

@@ -1,6 +1,6 @@
 {
   "name": "email-builder-utils",
-  "version": "1.1.50",
+  "version": "1.1.53",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [