email-builder-utils 1.1.52 → 1.1.54

package/dist/types/Template.d.ts

@@ -33,6 +33,8 @@ interface IProps {
     shape?: string;
     hideOnDesktop?: boolean;
     hideOnMobile?: boolean;
+    cellWidthUnit?: 'px' | '%';
+    widthUnit?: 'px' | '%';
 }
 interface IStyle {
     [key: string]: any;

package/dist/types/Template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Template.d.ts","sourceRoot":"","sources":["../../src/types/Template.ts"],"names":[],"mappings":"AAAA,oBAAY,SAAS;IACnB,IAAI,SAAS;IACb,KAAK,UAAU;IACf,MAAM,WAAW;IACjB,IAAI,YAAY;IAChB,KAAK,UAAU;IACf,QAAQ,WAAW;IACnB,MAAM,WAAW;IACjB,OAAO,YAAY;IACnB,WAAW,gBAAgB;IAC3B,KAAK,UAAU;IACf,KAAK,UAAU;IACf,QAAQ,aAAa;CACtB;AAED,oBAAY,UAAU;IACpB,MAAM,WAAW;IACjB,OAAO,YAAY;IACnB,WAAW,gBAAgB;CAC5B;AAED,UAAU,MAAM;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,UAAU,MAAM;IACd,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAED,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,SAAS,CAAC;IAChB,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;QACd,WAAW,EAAE,MAAM,EAAE,CAAC;KACvB,CAAC;CACH"}
+{"version":3,"file":"Template.d.ts","sourceRoot":"","sources":["../../src/types/Template.ts"],"names":[],"mappings":"AAAA,oBAAY,SAAS;IACnB,IAAI,SAAS;IACb,KAAK,UAAU;IACf,MAAM,WAAW;IACjB,IAAI,YAAY;IAChB,KAAK,UAAU;IACf,QAAQ,WAAW;IACnB,MAAM,WAAW;IACjB,OAAO,YAAY;IACnB,WAAW,gBAAgB;IAC3B,KAAK,UAAU;IACf,KAAK,UAAU;IACf,QAAQ,aAAa;CACtB;AAED,oBAAY,UAAU;IACpB,MAAM,WAAW;IACjB,OAAO,YAAY;IACnB,WAAW,gBAAgB;CAC5B;AAED,UAAU,MAAM;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,IAAI,GAAG,GAAG,CAAC;IAC3B,SAAS,CAAC,EAAE,IAAI,GAAG,GAAG,CAAC;CACxB;AAED,UAAU,MAAM;IACd,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAED,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,SAAS,CAAC;IAChB,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;QACd,WAAW,EAAE,MAAM,EAAE,CAAC;KACvB,CAAC;CACH"}

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

@@ -55,15 +55,15 @@ function appendOutlookForButton(buttonData) {
     const tableMargin = containerAlign === 'center' ? 'margin:0 auto;'
         : containerAlign === 'right' ? 'margin-left:auto;margin-right:0;'
             : '';
-    const nonMsoAnchor = `<!--[if !mso]><!-->
-<table border="0" cellpadding="0" cellspacing="0" role="presentation"${tableAlignAttr} style="border-collapse:separate;${tableMargin}">
-  <tr>
-    <td bgcolor="${bgColor}" align="center" valign="middle"${tdWidthAttr}${tdHeightAttr} style="background-color:${bgColor};border-radius:${br}px;${borderCss}${tdWidthCss}${tdHeightCss}box-sizing:border-box;mso-padding-alt:0;text-align:center;">
-      <a href="${safeHref}" target="_blank" rel="noreferrer noopener"
-         style="${anchorBoxStyles}color:${safeColor};font-family:${safeFF};font-size:${fs}px;font-weight:${fontWeight};text-decoration:none;text-align:center;white-space:nowrap;-webkit-text-size-adjust:none;box-sizing:border-box;">${text}</a>
-    </td>
-  </tr>
-</table>
+    const nonMsoAnchor = `<!--[if !mso]><!-->
+<table border="0" cellpadding="0" cellspacing="0" role="presentation"${tableAlignAttr} style="border-collapse:separate;${tableMargin}">
+  <tr>
+    <td bgcolor="${bgColor}" align="center" valign="middle"${tdWidthAttr}${tdHeightAttr} style="background-color:${bgColor};border-radius:${br}px;${borderCss}${tdWidthCss}${tdHeightCss}box-sizing:border-box;mso-padding-alt:0;text-align:center;">
+      <a href="${safeHref}" target="_blank" rel="noreferrer noopener"
+         style="${anchorBoxStyles}color:${safeColor};font-family:${safeFF};font-size:${fs}px;font-weight:${fontWeight};text-decoration:none;text-align:center;white-space:nowrap;-webkit-text-size-adjust:none;box-sizing:border-box;">${text}</a>
+    </td>
+  </tr>
+</table>
 <!--<![endif]-->`;
     // ── MSO: VML bulletproof button (classic Outlook / Word engine) ──
     // VML arcsize is a percentage of half the shorter side. Clamp to 50% (pill).
@@ -71,18 +71,16 @@ function appendOutlookForButton(buttonData) {
     const strokeAttrs = bw > 0
         ? `stroke="true" strokecolor="${bdColor}" strokeweight="${bw}px"`
         : `stroke="false"`;
-    const msoButton = `<!--[if mso]>
-<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word"
-  href="${safeHref}"
-  style="height:${finalHeight}px;v-text-anchor:middle;width:${vmlWidth}px;"
-  arcsize="${arcSizePct}%"
-  ${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>
-</v:roundrect>
+    const msoButton = `<!--[if mso]>
+<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word"
+  href="${safeHref}"
+  style="height:${finalHeight}px;v-text-anchor:middle;width:${vmlWidth}px;"
+  arcsize="${arcSizePct}%"
+  ${strokeAttrs}
+  fillcolor="${bgColor}">
+  <w:anchorlock/>
+  <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"
         ? `<center>${msoButton}${nonMsoAnchor}</center>`
@@ -167,14 +165,14 @@ function convertButtonBlock(blockData) {
         hideOnDesktop: Boolean(props.hideOnDesktop),
         hideOnMobile: Boolean(props.hideOnMobile),
     });
-    return `
-<table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" class="${visibilityClass}" data-block-type="button" data-block-props="${buttonBlockProps}" style="border-collapse:collapse;table-layout:fixed;">
-  <tr>
-    <td align="${computed.containerAlign}"${(0, common_1.buildOutlookBgAttr)(containerBg)}
-        style="padding:${padding?.top || 0}px ${padding?.right || 0}px ${padding?.bottom || 0}px ${padding?.left || 0}px;background-color:${containerBg || 'transparent'};">
-      ${innerContent}
-    </td>
-  </tr>
-</table>
+    return `
+<table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" class="${visibilityClass}" data-block-type="button" data-block-props="${buttonBlockProps}" style="border-collapse:collapse;table-layout:fixed;">
+  <tr>
+    <td align="${computed.containerAlign}"${(0, common_1.buildOutlookBgAttr)(containerBg)}
+        style="padding:${padding?.top || 0}px ${padding?.right || 0}px ${padding?.bottom || 0}px ${padding?.left || 0}px;background-color:${containerBg || 'transparent'};">
+      ${innerContent}
+    </td>
+  </tr>
+</table>
 `;
 }

package/dist/utils/blocks/dividers.js

@@ -21,23 +21,23 @@ function convertDividerBlockToHtml(blockData) {
         hideOnMobile ? "hide-mobile" : "",
         hideOnDesktop ? "hide-desktop" : "",
     ].filter(Boolean).join(" ");
-    const dividerContent = `
-    <table
-      align="${alignAttr}"
-      width="${dividerWidth}%"
-      cellpadding="0"
-      cellspacing="0"
-      style="margin:${alignMargin};"
-    >
-      <tr>
-        <td
-          height="${thickness}"
-          style="font-size:1px; line-height:1px; background:${dividerColor}; width:100%;"
-        >
-          &nbsp;
-        </td>
-      </tr>
-    </table>
+    const dividerContent = `
+    <table
+      align="${alignAttr}"
+      width="${dividerWidth}%"
+      cellpadding="0"
+      cellspacing="0"
+      style="margin:${alignMargin};"
+    >
+      <tr>
+        <td
+          height="${thickness}"
+          style="font-size:1px; line-height:1px; background:${dividerColor}; width:100%;"
+        >
+          &nbsp;
+        </td>
+      </tr>
+    </table>
   `;
     return (0, outlookSupport_1.appendOutlookSupport)(dividerContent, contentStyle, visibilityClass);
 }
@@ -55,18 +55,18 @@ function convertVerticalDividerBlockToHtml(blockData) {
         perChanges: [],
         pxChanges: buildStyles_1.allPxAttributes,
     });
-    return `
-  <table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation"
-         style="${buildStyles_1.tableCommonStyle}; max-width:600px;" class="${visibilityClass}" data-block-type="vdivider">
-    <tr>
-      <td style="${outerStyles}; text-align:center; vertical-align:middle;">
-        <!--[if mso | IE]>
-        <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fillcolor="${dividerColor}" style="width:${width}px;height:${height}px;" stroke="f"></v:rect>
-        <![endif]-->
-        <!--[if !mso]><!-->
-        <div style="display:inline-block;width:${width}px;height:${height}px;background:${dividerColor};line-height:0;font-size:0;">&nbsp;</div>
-        <!--<![endif]-->
-      </td>
-    </tr>
+    return `
+  <table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation"
+         style="${buildStyles_1.tableCommonStyle}; max-width:600px;" class="${visibilityClass}" data-block-type="vdivider">
+    <tr>
+      <td style="${outerStyles}; text-align:center; vertical-align:middle;">
+        <!--[if mso | IE]>
+        <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fillcolor="${dividerColor}" style="width:${width}px;height:${height}px;" stroke="f"></v:rect>
+        <![endif]-->
+        <!--[if !mso]><!-->
+        <div style="display:inline-block;width:${width}px;height:${height}px;background:${dividerColor};line-height:0;font-size:0;">&nbsp;</div>
+        <!--<![endif]-->
+      </td>
+    </tr>
   </table>`;
 }

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,mBA0TtB;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,mBA2TtB;AAED,wBAAsB,oBAAoB,CACxC,SAAS,EAAE,GAAG,EACd,QAAQ,EAAE,GAAG,EACb,gBAAgB,EAAE,MAAM,EACxB,iBAAiB,EAAE,MAAM,EACzB,mBAAmB,UAAQ;;;GAwG5B"}

package/dist/utils/blocks/grid.js

@@ -9,7 +9,7 @@ const jsonToHTML_1 = require("../jsonToHTML");
 async function convertGridBlock(blockData, rootData, cellWidthInPx) {
     const { style = {}, childrenIds = [], props } = blockData.data;
     const { columns = 1, cellWidths = [], responsive = true } = props;
-    const { columnGap = 0, backgroundImage, backgroundColor, ...restStyle } = style;
+    const { columnGap = 0, backgroundImage, backgroundColor, cellWidthUnit, ...restStyle } = style;
     const gridVisibilityClass = (0, common_1.getVisibilityClass)(props);
     // Detect gradient — check both backgroundImage prop and customCss (gradient may land in
     // customCss when the block was built via CSS shorthand or custom CSS input).
@@ -64,6 +64,16 @@ async function convertGridBlock(blockData, rootData, cellWidthInPx) {
         perChanges: [],
         pxChanges: buildStyles_1.allPxAttributes,
     });
+    // When cellWidthUnit is 'px', convert the stored pixel values to percentage ratios
+    // so the rest of the grid export logic (which works entirely in %) is unchanged.
+    const effectiveCellWidths = (cellWidthUnit || '%') === 'px'
+        ? (() => {
+            const total = cellWidths.reduce((s, w) => s + w, 0);
+            return total > 0
+                ? cellWidths.map((w) => Number(((w / total) * 100).toFixed(2)))
+                : cellWidths.map(() => 100 / columns);
+        })()
+        : cellWidths;
     const total = childrenIds.length;
     const visualRows = Math.ceil(total / columns);
     // OUTLOOK FIX: Use explicit pixel width for Old Outlook (Word engine)
@@ -91,18 +101,18 @@ async function convertGridBlock(blockData, rootData, cellWidthInPx) {
         : '';
     const divWrapOpen = divBorderStyle ? `<div style="${divBorderStyle}${divWrapBg}">` : '';
     const divWrapClose = divBorderStyle ? `</div>` : '';
-    let html = `
-  <!--[if mso]>
-  <table border="0" cellpadding="0" cellspacing="0" width="${msoTableWidth}"${msoBgAttr}
-     style="border-collapse:collapse;width:${msoTableWidth}px;${msoBgStyle}${innerBgTransparent}"
-     class="${gridVisibilityClass}">
-  <![endif]-->
-  <!--[if !mso]><!-->
-  <table border="0" cellpadding="0" cellspacing="0" width="100%" align="center"
-     role="presentation"${nonMsoBgAttr}
-     style="border-collapse:collapse; table-layout:fixed; ${innerBgTransparent}${tableStyles}; max-width:600px;"
-     class="${gridVisibilityClass}">
-  <!--<![endif]-->
+    let html = `
+  <!--[if mso]>
+  <table border="0" cellpadding="0" cellspacing="0" width="${msoTableWidth}"${msoBgAttr}
+     style="border-collapse:collapse;width:${msoTableWidth}px;${msoBgStyle}${innerBgTransparent}"
+     class="${gridVisibilityClass}">
+  <![endif]-->
+  <!--[if !mso]><!-->
+  <table border="0" cellpadding="0" cellspacing="0" width="100%" align="center"
+     role="presentation"${nonMsoBgAttr}
+     style="border-collapse:collapse; table-layout:fixed; ${innerBgTransparent}${tableStyles}; max-width:600px;"
+     class="${gridVisibilityClass}">
+  <!--<![endif]-->
   `;
     for (let r = 0; r < visualRows; r++) {
         html += "<tr>";
@@ -129,7 +139,7 @@ async function convertGridBlock(blockData, rootData, cellWidthInPx) {
         const cellWidthPercents = [];
         for (let c = 0; c < columns; c++) {
             const id = rowIds[c];
-            let widthPercent = cellWidths[c] ?? safeWidth;
+            let widthPercent = effectiveCellWidths[c] ?? safeWidth;
             if (widthPercent <= 0 || widthPercent > 100) {
                 widthPercent = safeWidth;
             }
@@ -157,57 +167,47 @@ 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> 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).
+                    // bgcolor on the cell <td> ensures background-color survives Outlook
+                    // compose paste (Word/Web editors strip CSS but keep bgcolor attribute).
                     const cellBgColor = cellStyle.backgroundColor || '';
-                    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}
-            class="${[responsive ? "stack-column" : "", visibilityClass].filter(Boolean).join(" ")}"
-            style="width:${widthPercent}%;vertical-align:${verticalAlign};word-break:break-word;${styles}"
-          >
-            ${childHtml}
+                    const cellBgAttr = (0, common_1.buildOutlookBgAttr)(cellBgColor);
+                    html += `
+          <td
+            width="${Math.max(1, Math.round(widthPercent))}%"${cellBgAttr}
+            class="${[responsive ? "stack-column" : "", visibilityClass].filter(Boolean).join(" ")}"
+            style="width:${widthPercent}%;vertical-align:${verticalAlign};word-break:break-word;${styles}"
+          >
+            ${childHtml}
           </td>`;
                     // Spacer td between columns — uses width attribute only (no inline style width) so
                     // 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) {
-                        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>`;
+                        html += `<td width="${columnGap}" 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;">
+                html += `
+        <td width="${Math.max(1, Math.round(widthPercent))}%"
+            ${responsive ? 'class="stack-column"' : ""}
+            style="width:${widthPercent}%;vertical-align:top;">
         </td>`;
                 if (columnGap > 0 && c !== lastVisibleCol) {
-                    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>`;
+                    html += `<td width="${columnGap}" class="col-gap-spacer" style="font-size:0;line-height:0;padding:0;" aria-hidden="true"></td>`;
                 }
             }
         }
         html += "</tr>";
     }
     // Close both MSO and non-MSO tables
-    html += `
-  <!--[if mso]>
-  </table>
-  <![endif]-->
-  <!--[if !mso]><!-->
-  </table>
-  <!--<![endif]-->
+    html += `
+  <!--[if mso]>
+  </table>
+  <![endif]-->
+  <!--[if !mso]><!-->
+  </table>
+  <!--<![endif]-->
   `;
     // ── Background image: canonical multi-client approach ────────────────────
     //
@@ -233,35 +233,35 @@ async function convertGridBlock(blockData, rootData, cellWidthInPx) {
                 return `<v:fill type="gradient" color="${c1}" color2="${c2}" angle="${vmlAngle}" />`;
             })()
             : `<v:fill type="frame" src="${rawBgImageUrl}" color="${fallbackBgColor}" />`;
-        html = `
-<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation"
-  style="border-collapse:collapse;table-layout:fixed;width:100%;max-width:${msoTableWidth}px;">
-  <tr>
-    <td width="100%"${(0, common_1.buildOutlookBgAttr)(fallbackBgColor)} valign="top"
-      ${!isGradient && rawBgImageUrl ? `background="${rawBgImageUrl}"` : ""}
-      style="
-        width:100%;max-width:${msoTableWidth}px;
-        background-color:${fallbackBgColor};
-        ${isGradient ? `background:${effectiveGradient};` : `background-image:url('${rawBgImageUrl}'); background-position:center center; background-size:cover; background-repeat:no-repeat;`}
-      ">
-
-      <!--[if gte mso 9]>
-      <v:rect xmlns:v="urn:schemas-microsoft-com:vml"
-        fill="true" stroke="false"
-        style="width:${msoTableWidth}px;">
-        ${vmlFill}
-        <v:textbox inset="0,0,0,0">
-      <![endif]-->
-
-      ${html}
-
-      <!--[if gte mso 9]>
-        </v:textbox>
-      </v:rect>
-      <![endif]-->
-
-    </td>
-  </tr>
+        html = `
+<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation"
+  style="border-collapse:collapse;table-layout:fixed;width:100%;max-width:${msoTableWidth}px;">
+  <tr>
+    <td width="100%"${(0, common_1.buildOutlookBgAttr)(fallbackBgColor)} valign="top"
+      ${!isGradient && rawBgImageUrl ? `background="${rawBgImageUrl}"` : ""}
+      style="
+        width:100%;max-width:${msoTableWidth}px;
+        background-color:${fallbackBgColor};
+        ${isGradient ? `background:${effectiveGradient};` : `background-image:url('${rawBgImageUrl}'); background-position:center center; background-size:cover; background-repeat:no-repeat;`}
+      ">
+
+      <!--[if gte mso 9]>
+      <v:rect xmlns:v="urn:schemas-microsoft-com:vml"
+        fill="true" stroke="false"
+        style="width:${msoTableWidth}px;">
+        ${vmlFill}
+        <v:textbox inset="0,0,0,0">
+      <![endif]-->
+
+      ${html}
+
+      <!--[if gte mso 9]>
+        </v:textbox>
+      </v:rect>
+      <![endif]-->
+
+    </td>
+  </tr>
 </table>`;
     }
     // Wrap the entire grid (including any bg-image outer table) in a div when the block

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

@@ -1 +1 @@
-{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../src/utils/blocks/image.ts"],"names":[],"mappings":"AAIA,wBAAsB,uBAAuB,CAC3C,QAAQ,EAAE,MAAM,EAChB,mBAAmB,EAAE,MAAM;;;;;GAoB5B;AAED,wBAAsB,iBAAiB,CAAC,SAAS,EAAE,GAAG,EAAE,aAAa,EAAE,MAAM,mBAiH5E"}
+{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../src/utils/blocks/image.ts"],"names":[],"mappings":"AAIA,wBAAsB,uBAAuB,CAC3C,QAAQ,EAAE,MAAM,EAChB,mBAAmB,EAAE,MAAM;;;;;GAoB5B;AAED,wBAAsB,iBAAiB,CAAC,SAAS,EAAE,GAAG,EAAE,aAAa,EAAE,MAAM,mBAyH5E"}

package/dist/utils/blocks/image.js

@@ -28,24 +28,31 @@ async function convertImageBlock(blockData, cellWidthInPx) {
     const { style, props } = blockData.data;
     const { altText, imageUrl, navigateToUrl } = props;
     const visibilityClass = (0, common_1.getVisibilityClass)(props);
-    const { width, height, objectFit, borderRadius, borderWidth, borderColor, borderStyle, ...containerStyle } = style;
+    const { width, widthUnit, height, objectFit, borderRadius, borderWidth, borderColor, borderStyle, ...containerStyle } = style;
     // Add border styles to container for fallback clients
     const containerStyles = (0, buildStyles_1.buildStyles)({
         ...containerStyle,
     }, { perChanges: [], pxChanges: buildStyles_1.addPxToAttributes });
     // OUTLOOK FIX: Ensure cellWidthInPx never exceeds 600px
     const safeCellWidth = Math.min(cellWidthInPx, 600);
-    // Parse width percentage (default 100%)
-    const widthPercent = typeof width === "string" && width.includes("%")
-        ? parseInt(width.replace("%", ""))
-        : typeof width === "number"
-            ? width
-            : 100;
     // OUTLOOK FIX: Calculate inner container width based on safe cell width
     const paddingLeft = style?.padding?.left || 0;
     const paddingRight = style?.padding?.right || 0;
     const availableWidth = safeCellWidth - paddingLeft - paddingRight;
-    const innerContainerWidth = Math.round((widthPercent / 100) * availableWidth);
+    // Resolve inner container width — px values are capped to the available space;
+    // % values are a fraction of available space.
+    let innerContainerWidth;
+    if ((widthUnit || '%') === 'px') {
+        innerContainerWidth = Math.min(Math.round(Number(width) || availableWidth), availableWidth);
+    }
+    else {
+        const widthPercent = typeof width === "string" && width.includes("%")
+            ? parseInt(width.replace("%", ""))
+            : typeof width === "number"
+                ? width
+                : 100;
+        innerContainerWidth = Math.round((widthPercent / 100) * availableWidth);
+    }
     // Get image dimensions and calculate scaled sizes
     const { originalWidth, originalHeight, scaledWidth, scaledHeight } = await computeScaledDimensions(imageUrl, innerContainerWidth);
     // OUTLOOK FIX: For Outlook, we need exact pixel dimensions
@@ -71,11 +78,13 @@ async function convertImageBlock(blockData, cellWidthInPx) {
     // -ms-interpolation-mode       → inline fallback; the <style> block is stripped by
     //                                Outlook during forward/reply MIME rewriting
     const imageElement = `<img src="${imageUrl}" alt="${altText || "Image"}" border="0" width="${finalWidth}" height="${finalHeight}" style="${imageTagStyles}; display:block; width:${finalWidth}px; height:${finalHeight}px; max-width:100%; line-height:0; -ms-interpolation-mode:bicubic;" />`;
-    const percentWidth = typeof width === "string" && width.endsWith("%")
-        ? width
-        : typeof width === "number"
-            ? `${width}%`
-            : "100%";
+    const percentWidth = (widthUnit || '%') === 'px'
+        ? `${innerContainerWidth}px`
+        : typeof width === "string" && width.endsWith("%")
+            ? width
+            : typeof width === "number"
+                ? `${width}%`
+                : "100%";
     // Non-MSO wrapper: display:block removes the phantom inline-baseline gap that
     // display:inline-block creates in Gmail / Apple Mail / Yahoo between images.
     // margin handles alignment since text-align won't move block elements.