email-builder-utils 1.1.49 → 1.1.52

package/dist/utils/blocks/grid.js

@@ -6,18 +6,22 @@ const buildStyles_1 = require("../buildStyles");
 const gradientUtils_1 = require("../gradientUtils");
 const common_1 = require("../common");
 const jsonToHTML_1 = require("../jsonToHTML");
-const outlookSupport_1 = require("../outlookSupport");
 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 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).
     const bgImageStr = typeof backgroundImage === "string" ? backgroundImage : '';
     const customCssStr = restStyle.customCss || '';
+    // Extract gradient string from customCss if not already in backgroundImage
     const gradientInCustomCss = !bgImageStr.includes('gradient(') && customCssStr.includes('gradient(')
         ? (customCssStr.match(/(?:linear|radial|conic)-gradient\([^)]+(?:\([^)]*\)[^)]*)*\)/)?.[0] || '')
         : '';
-    const effectiveGradient = bgImageStr.includes('gradient(') ? bgImageStr : gradientInCustomCss;
+    const effectiveGradient = bgImageStr.includes('gradient(')
+        ? bgImageStr
+        : gradientInCustomCss;
     const isGradient = Boolean(effectiveGradient);
     const parsedGradient = isGradient ? (0, gradientUtils_1.parseGradient)(effectiveGradient) : null;
     const fallbackBgColor = backgroundColor ||
@@ -27,12 +31,18 @@ async function convertGridBlock(blockData, rootData, cellWidthInPx) {
     const rawBgImageUrl = !isGradient && bgImageStr
         ? bgImageStr.replace(/^url\(['"]?/, "").replace(/['"]?\)$/, "")
         : null;
+    // When gradient came from customCss, strip background-image from customCss so it
+    // doesn't duplicate into the inner table style (the outer <td> wrapper carries it).
     const innerCustomCss = gradientInCustomCss
         ? customCssStr.replace(/background-image\s*:[^;]+;?/gi, '').trim()
         : customCssStr;
+    // Build inner table styles — when gradient/bg-image is on the outer wrapper, strip
+    // background props from the inner table so the outer <td> background shows through.
     const innerRestStyleRaw = (rawBgImageUrl || isGradient)
         ? { ...restStyle, customCss: innerCustomCss, backgroundSize: undefined, backgroundPosition: undefined, backgroundRepeat: undefined }
         : { ...restStyle, customCss: innerCustomCss };
+    // Extract border/radius props — applied via a div wrapper for non-MSO clients so that
+    // border-radius is honoured (Gmail/Outlook compose strip border-radius from <table>).
     const { borderRadius, border, borderColor, borderWidth, borderStyle: borderStyleProp, ...innerRestStyle } = innerRestStyleRaw;
     const divBorderParts = [];
     if (borderRadius)
@@ -51,36 +61,52 @@ async function convertGridBlock(blockData, rootData, cellWidthInPx) {
         ? 'transparent'
         : ((rawBgImageUrl || isGradient) ? undefined : backgroundColor);
     const tableStyles = (0, buildStyles_1.buildStyles)({ backgroundColor: tableBgForNonMso, ...innerRestStyle }, {
-        perChanges: [], pxChanges: buildStyles_1.allPxAttributes,
+        perChanges: [],
+        pxChanges: buildStyles_1.allPxAttributes,
     });
     const total = childrenIds.length;
     const visualRows = Math.ceil(total / columns);
+    // OUTLOOK FIX: Use explicit pixel width for Old Outlook (Word engine)
     const msoTableWidth = Math.min(cellWidthInPx, 600);
-    const msoBgColor = !rawBgImageUrl && !isGradient ? (backgroundColor || '') : '';
-    const msoBgAttr = msoBgColor ? ` bgcolor="${(0, outlookSupport_1.toOutlookBgColor)(msoBgColor)}"` : '';
+    // When a background image/gradient is present, the background is applied on an outer
+    // wrapper <td> (see bottom of function). The inner grid tables must be clean.
+    // When no background, the MSO table gets bgcolor for solid-color sections.
+    const msoBgColor = !rawBgImageUrl && !isGradient
+        ? (backgroundColor || '')
+        : '';
+    const msoBgAttr = (0, common_1.buildOutlookBgAttr)(msoBgColor);
     const msoBgStyle = msoBgColor ? `background-color:${msoBgColor};` : '';
-    const innerBgTransparent = (rawBgImageUrl || isGradient) ? 'background-color:transparent;' : '';
-    const nonMsoBgAttr = !rawBgImageUrl && !isGradient && backgroundColor && !divBorderStyle ? ` bgcolor="${(0, outlookSupport_1.toOutlookBgColor)(backgroundColor)}"` : '';
+    // Inner tables must be explicitly transparent when outer <td> carries the background.
+    const innerBgTransparent = (rawBgImageUrl || isGradient)
+        ? 'background-color:transparent;'
+        : '';
+    const nonMsoBgAttr = !rawBgImageUrl && !isGradient && !divBorderStyle
+        ? (0, common_1.buildOutlookBgAttr)(backgroundColor || '')
+        : '';
+    // When divBorderStyle is set the non-MSO <table> is transparent, so the Grid's
+    // backgroundColor must move onto the div wrapper — otherwise it vanishes in modern clients.
+    // Skip this for bg-image/gradient blocks; they apply their background via a separate wrapper.
     const divWrapBg = divBorderStyle && backgroundColor && !rawBgImageUrl && !isGradient
         ? ` background-color:${backgroundColor};`
         : '';
     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%"
-     role="presentation"${nonMsoBgAttr}
-     style="border-collapse:collapse; ${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>";
+        // COUNT visible cells and find last visible column index
         let visibleCells = 0;
         let lastVisibleCol = 0;
         const rowIds = [];
@@ -89,12 +115,14 @@ async function convertGridBlock(blockData, rootData, cellWidthInPx) {
             const id = childrenIds[idx] ?? null;
             rowIds.push(id);
             const child = id ? rootData[id] : null;
-            if (!child?.data?.props?.hideOnDesktop) {
+            const isHidden = child?.data?.props?.hideOnDesktop;
+            if (!isHidden) {
                 visibleCells++;
                 lastVisibleCol = c;
             }
         }
         const safeWidth = visibleCells > 0 ? 100 / visibleCells : 100 / columns;
+        // Reserve pixel space for spacer tds between visible cells (N-1 gaps for N visible cells)
         const totalGapPx = columnGap * Math.max(visibleCells - 1, 0);
         const adjustedTableWidth = Math.max(msoTableWidth - totalGapPx, 1);
         let totalWidth = 0;
@@ -102,19 +130,24 @@ async function convertGridBlock(blockData, rootData, cellWidthInPx) {
         for (let c = 0; c < columns; c++) {
             const id = rowIds[c];
             let widthPercent = cellWidths[c] ?? safeWidth;
-            if (widthPercent <= 0 || widthPercent > 100)
+            if (widthPercent <= 0 || widthPercent > 100) {
                 widthPercent = safeWidth;
+            }
             cellWidthPercents.push(widthPercent);
             if (id) {
                 const child = rootData[id];
-                if (!child?.data?.props?.hideOnDesktop)
+                const isHidden = child?.data?.props?.hideOnDesktop;
+                if (!isHidden) {
                     totalWidth += widthPercent;
+                }
             }
         }
         const scaleFactor = totalWidth > 0 && totalWidth < 100 ? 100 / totalWidth : 1;
         for (let c = 0; c < columns; c++) {
             const id = rowIds[c];
-            let widthPercent = Math.min(cellWidthPercents[c] * scaleFactor, 100);
+            let widthPercent = cellWidthPercents[c] * scaleFactor;
+            widthPercent = Math.min(widthPercent, 100);
+            // Cell pixel width is a share of the gap-adjusted table width
             const cellWidthPx = Math.round((widthPercent / 100) * adjustedTableWidth);
             if (id) {
                 const child = rootData[id];
@@ -124,42 +157,73 @@ 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).
                     const cellBgColor = cellStyle.backgroundColor || '';
-                    const cellBgAttr = cellBgColor ? ` bgcolor="${(0, outlookSupport_1.toOutlookBgColor)(cellBgColor)}"` : '';
-                    html += `
-          <td
-            width="${cellWidthPx}"${cellBgAttr}
-            class="${[responsive ? "stack-column" : "", visibilityClass].filter(Boolean).join(" ")}"
-            style="width:${cellWidthPx}px;vertical-align:${verticalAlign};word-break:break-word;${styles}"
-          >
-            ${childHtml}
+                    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}
           </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) {
-                        html += `<td width="${columnGap}" style="width:${columnGap}px;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 {
-                html += `
-        <td width="${cellWidthPx}"
-            ${responsive ? 'class="stack-column"' : ""}
-            style="width:${cellWidthPx}px;vertical-align:top;">
+                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}" style="width:${columnGap}px;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>`;
                 }
             }
         }
         html += "</tr>";
     }
-    html += `
-  <!--[if mso]>
-  </table>
-  <![endif]-->
-  <!--[if !mso]><!-->
-  </table>
-  <!--<![endif]-->
+    // Close both MSO and non-MSO tables
+    html += `
+  <!--[if mso]>
+  </table>
+  <![endif]-->
+  <!--[if !mso]><!-->
+  </table>
+  <!--<![endif]-->
   `;
+    // ── Background image: canonical multi-client approach ────────────────────
+    //
+    // Problem: `background-image` on a <table> element is stripped by:
+    //   • New Outlook Mac / Windows (Chromium-based app)
+    //   • Outlook.com
+    //   • Old Outlook (Word engine) — ignores CSS entirely
+    //
+    // Solution: wrap the grid in an outer <table><tr><td> where the <td> carries
+    // the background. Different clients pick it up via different mechanisms:
+    //
+    //   background="" attribute on <td>  → Yahoo Mail, older webmail
+    //   CSS background-image on <td>     → Gmail, Apple Mail, new Outlook Mac ✓
+    //   VML v:rect inside the <td>       → Old Outlook (Word engine) ✓
+    //
+    // The inner grid tables have NO background so the outer <td> bg shows through.
     if (rawBgImageUrl || isGradient) {
         const vmlFill = isGradient
             ? (() => {
@@ -169,89 +233,99 @@ 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;width:100%;max-width:${msoTableWidth}px;">
-  <tr>
-    <td width="100%" bgcolor="${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
+    // has border/radius. An unconditional <div> is used — not gated behind <!--[if !mso]>-->
+    // — so Gmail compose paste renders the border-radius reliably. Old Outlook ignores
+    // border-radius on <div> but still shows the rectangular border; new Outlook works fully.
     if (divBorderStyle)
         html = `${divWrapOpen}${html}${divWrapClose}`;
     return html;
 }
 async function convertGridCellBlock(blockData, rootData, cellWidthPercent, parentCellWidthPx, parentGridHasBorder = false) {
     const { style = {}, childrenIds = [], props = {} } = blockData.data;
+    const visibilityClass = (0, common_1.getVisibilityClass)(props);
+    // Extract border + radius from style so they move to the div wrapper (not the <td>).
+    // Gmail strips border-radius from <td> but honours it on <div>. By putting border and
+    // radius on the same unconditional <div>, the rounded card border renders in all clients.
+    // The <td> keeps bgcolor (via attribute) for Old Outlook background fallback.
     const { borderRadius: cellBorderRadius, borderWidth: cellBorderWidth, borderStyle: cellBorderStyleProp, borderColor: cellBorderColor, border: cellBorderShorthand, ...styleWithoutBorder } = style;
+    // backgroundColor must stay on the div wrapper (not the <td>) in two cases:
+    // 1. Cell has its own border-radius — the div's overflow:hidden clips the background.
+    // 2. Parent grid has a border div (divBorderStyle) — the grid's overflow:hidden clips it.
+    // In both cases, the rectangular <td> background bleeds through rounded corners if kept
+    // in CSS, creating visible corner squares. The bgcolor attribute stays for Outlook fallback.
     const stripBgFromTd = Boolean(cellBorderRadius) || parentGridHasBorder;
-    // Omit backgroundColor entirely rather than setting 'transparent' — an explicit
-    // background-color:transparent can defeat the bgcolor HTML attribute in Old Outlook
-    // (Word engine), leaving the cell with no background at all.
+    // When stripping bg from <td>, omit backgroundColor entirely rather than setting 'transparent'.
+    // An explicit background-color:transparent in CSS can defeat the bgcolor HTML attribute in
+    // Old Outlook (Word engine), leaving the cell with no background at all.
     const styleForTd = stripBgFromTd
         ? { ...styleWithoutBorder, backgroundColor: undefined }
         : styleWithoutBorder;
-    const styles = (0, buildStyles_1.buildStyles)(styleForTd, { perChanges: [], pxChanges: buildStyles_1.allPxAttributes });
+    // Outlook treats <td width="..."> as content width and then adds horizontal padding,
+    // which can push the total row width beyond the parent table and shift columns.
+    // Keep sizing styles on <td>, but move padding into the inner div wrapper.
+    const styleForTdWithoutPadding = { ...styleForTd, padding: undefined };
+    const styles = (0, buildStyles_1.buildStyles)(styleForTdWithoutPadding, {
+        perChanges: [],
+        pxChanges: buildStyles_1.allPxAttributes,
+    });
     const parts = [];
+    // OUTLOOK FIX: Calculate the actual cell width in pixels based on percentage
+    // If parent is 600px and cell is 50%, cell width should be 300px, not 600px
     const cellWidthPx = Math.round((cellWidthPercent / 100) * parentCellWidthPx);
-    const rawPad = styleWithoutBorder?.padding;
-    let cellPadLeft = 0;
-    let cellPadRight = 0;
-    if (rawPad && typeof rawPad === 'object') {
-        cellPadLeft = Number.isFinite(rawPad.left) ? rawPad.left : 0;
-        cellPadRight = Number.isFinite(rawPad.right) ? rawPad.right : 0;
-    }
-    else if (typeof rawPad === 'string') {
-        const parts = rawPad.trim().split(/\s+/).map(v => parseFloat(v) || 0);
-        if (parts.length >= 4) {
-            cellPadRight = parts[1];
-            cellPadLeft = parts[3];
-        }
-        else if (parts.length === 3) {
-            cellPadRight = parts[1];
-            cellPadLeft = parts[1];
-        }
-        else if (parts.length === 2) {
-            cellPadRight = parts[1];
-            cellPadLeft = parts[1];
-        }
-        else if (parts.length === 1) {
-            cellPadRight = parts[0];
-            cellPadLeft = parts[0];
-        }
-    }
+    // Subtract the cell's own padding so children receive the actual content-area width.
+    // Old Outlook honours explicit img/table width attributes — if a child is sized to the
+    // full column width (ignoring padding) it overflows and expands the column.
+    const cellPad = styleWithoutBorder?.padding || {};
+    const cellPadLeft = Number.isFinite(cellPad.left) ? cellPad.left : 0;
+    const cellPadRight = Number.isFinite(cellPad.right) ? cellPad.right : 0;
     const contentWidthPx = Math.max(cellWidthPx - cellPadLeft - cellPadRight, 20);
+    // OUTLOOK FIX: Ensure cell width is reasonable and capped at 600px
     const safeCellWidthPx = Math.min(contentWidthPx, 600);
     for (const childId of childrenIds) {
         const child = rootData[childId];
-        if (child)
+        if (child) {
             parts.push(await (0, jsonToHTML_1.convertToHtml)(child, rootData, safeCellWidthPx));
+        }
     }
     const borderRadius = cellBorderRadius || 0;
     const bgColor = styleWithoutBorder?.backgroundColor || "transparent";
+    // 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
+    // two concentric borders of the same colour (double-border). The grid's wrapper div
+    // already provides the visual container; the cell div only needs background-color.
     const cellDivBorderParts = [];
     if (!parentGridHasBorder) {
         if (borderRadius)
@@ -267,9 +341,21 @@ 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};`];
+    const formatPad = (value) => (typeof value === 'number' ? `${value}px` : (value || '0'));
+    const cellPadTop = formatPad(cellPad.top);
+    const cellPadBottom = formatPad(cellPad.bottom);
+    const cellPadLeftCss = formatPad(cellPad.left);
+    const cellPadRightCss = formatPad(cellPad.right);
+    divStyleParts.push(`padding:${cellPadTop} ${cellPadRightCss} ${cellPadBottom} ${cellPadLeftCss};`);
     if (cellDivBorderStyle)
         divStyleParts.push(cellDivBorderStyle);
-    const wrapped = `<div style="${divStyleParts.join(' ')}">${parts.join("")}</div>`;
-    return { html: wrapped, styles };
+    const divStyleStr = divStyleParts.join(' ');
+    const wrapped = `<div style="${divStyleStr}">${parts.join("")}</div>`;
+    return {
+        html: wrapped,
+        styles,
+    };
 }

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,CAAC,QAAQ,EAAE,MAAM,EAAE,mBAAmB,EAAE,MAAM;;;;;GAiB1F;AAED,wBAAsB,iBAAiB,CAAC,SAAS,EAAE,GAAG,EAAE,aAAa,EAAE,MAAM,mBA2D5E"}
+{"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"}

package/dist/utils/blocks/image.js

@@ -29,27 +29,65 @@ async function convertImageBlock(blockData, cellWidthInPx) {
     const { altText, imageUrl, navigateToUrl } = props;
     const visibilityClass = (0, common_1.getVisibilityClass)(props);
     const { width, height, objectFit, borderRadius, borderWidth, borderColor, borderStyle, ...containerStyle } = style;
-    const containerStyles = (0, buildStyles_1.buildStyles)({ ...containerStyle }, { perChanges: [], pxChanges: buildStyles_1.addPxToAttributes });
+    // 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;
+        : 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);
+    // 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
+    // Calculate final dimensions that respect both original size and container
     const finalWidth = Math.min(scaledWidth, innerContainerWidth, originalWidth);
     const finalHeight = Math.round((finalWidth / originalWidth) * originalHeight);
-    const imageTagStyles = (0, buildStyles_1.buildStyles)({ borderStyle, borderRadius, borderColor, borderWidth }, { perChanges: [], pxChanges: buildStyles_1.addPxToAttributes });
+    // Build image styles for modern email clients (non-Outlook)
+    const imageTagStyles = (0, buildStyles_1.buildStyles)({
+        borderStyle,
+        borderRadius: borderRadius,
+        borderColor,
+        borderWidth,
+    }, {
+        perChanges: [],
+        pxChanges: buildStyles_1.addPxToAttributes,
+    });
+    // OUTLOOK RENDERING CONTRACT
+    // width/height HTML attributes → Old Outlook Word engine (CSS is lower priority in Word)
+    // width/height inline CSS      → New Outlook, OWA, and all CSS-capable clients
+    // max-width:100%               → prevents overflow in any client that ignores pixel constraints
+    // height:auto !important       → @media query (convertJsonToHtml.ts) overrides this on mobile
+    //                                so proportional scaling is preserved on small screens
+    // -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%";
+        : 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.
     const imgTextAlign = containerStyle.textAlign || "left";
     const imgMargin = imgTextAlign === "center" ? "margin:0 auto;" :
         imgTextAlign === "right" ? "margin-left:auto; margin-right:0;" : "";
+    // OUTLOOK FIX: Use finalWidth (the actual displayed size) as max-width so the div
+    // doesn't claim more space than the image occupies. originalWidth is the natural
+    // image size (e.g. 636px for the Beefree logo rendered at 35px) which was
+    // misleadingly large and could confuse some rendering engines.
     const nonMsoWrapper = `<div style="display:block; width:${percentWidth}; max-width:${finalWidth}px; line-height:0; font-size:0; ${imgMargin}">${imageElement}</div>`;
+    // OUTLOOK FIX: Generate VML with corrected dimensions
     const outlookImage = await (0, outlookSupport_1.appendOutlookForImage)(nonMsoWrapper, safeCellWidth, innerContainerWidth, imageUrl, style, finalWidth, finalHeight);
     const imageContent = (0, outlookSupport_1.appendOutlookSupport)(outlookImage, containerStyles, visibilityClass, safeCellWidth);
     return navigateToUrl