email-builder-utils 1.1.34 → 1.1.40

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

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

package/dist/utils/convertJsonToHtml.js

@@ -73,6 +73,8 @@ const convertJsonToHtml = async (jsonData) => {
             font-family: ${fontFamily};
             margin: 0 auto;
             table-layout:fixed;
+            width:600px;
+            max-width:600px;
             background-color: ${canvasColor};
             color: ${textColor};
             padding: ${top}px ${right}px ${bottom}px ${left}px;

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

@@ -1 +1 @@
-{"version":3,"file":"jsonToHTML.d.ts","sourceRoot":"","sources":["../../src/utils/jsonToHTML.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAUrC,UAAU,cAAc;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC1B,aAAa,EAAE,MAAM,CAAC;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,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,UAAU;IAClB,IAAI,EAAE,SAAS,CAAC;IAChB,IAAI,EAAE;QACJ,KAAK,EAAE,cAAc,CAAC;QACtB,KAAK,EAAE,GAAG,CAAC;QACX,WAAW,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;KAC7B,CAAC;CACH;AAYD,eAAO,MAAM,gBAAgB,kDAAkD,CAAC;AAyFhF,wBAAsB,aAAa,CACjC,SAAS,EAAE,UAAU,EACrB,QAAQ,EAAE,GAAG,EACb,aAAa,EAAE,MAAM,mBAwBtB;AAikBD,wBAAsB,iBAAiB,CAAC,SAAS,EAAE,GAAG,EAAE,aAAa,EAAE,MAAM,mBAyL5E"}
+{"version":3,"file":"jsonToHTML.d.ts","sourceRoot":"","sources":["../../src/utils/jsonToHTML.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAGrC,UAAU,cAAc;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC1B,aAAa,EAAE,MAAM,CAAC;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,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,UAAU;IAClB,IAAI,EAAE,SAAS,CAAC;IAChB,IAAI,EAAE;QACJ,KAAK,EAAE,cAAc,CAAC;QACtB,KAAK,EAAE,GAAG,CAAC;QACX,WAAW,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;KAC7B,CAAC;CACH;AAYD,eAAO,MAAM,gBAAgB,kDAAkD,CAAC;AAwFhF,wBAAsB,aAAa,CACjC,SAAS,EAAE,UAAU,EACrB,QAAQ,EAAE,GAAG,EACb,aAAa,EAAE,MAAM,mBAwBtB;AA4qBD,wBAAsB,iBAAiB,CAAC,SAAS,EAAE,GAAG,EAAE,aAAa,EAAE,MAAM,mBAyL5E"}

package/dist/utils/jsonToHTML.js

@@ -133,8 +133,11 @@ function appendOutlookSupport(content, contentStyle, className) {
     <!--<![endif]-->
     `;
     }
+    // Use a single table that works for both MSO and non-MSO
+    // The content inside already has its own MSO conditional comments
+    // width="100%" works for modern clients, Outlook will use the td width from nested tables
     return `
-  <table width="100%" style="${exports.tableCommonStyle}" class="${visibilityClass}"><tr><td style="${contentStyle}">${content}</td></tr></table>
+  <table width="100%" border="0" cellpadding="0" cellspacing="0" style="${exports.tableCommonStyle}; max-width:600px;" class="${visibilityClass}"><tr><td width="100%" style="${contentStyle}">${content}</td></tr></table>
   `;
 }
 function convertDividerBlockToHtml(blockData) {
@@ -231,33 +234,74 @@ function convertTextBlock(blockData) {
         ? `<a href="${navigateToUrl}" rel="noreferrer noopener" style="color:inherit;text-decoration:none;cursor:pointer;">${textContent}</a>`
         : textContent;
 }
-async function appendOutlookForImage(content, outerContainerWidth, innerContainerWidth, imageUrl, style = {}) {
-    const image = await jimp_1.Jimp.read(imageUrl);
-    const originalWidth = image.bitmap.width;
-    const originalHeight = image.bitmap.height;
-    const widthScalingFactor = Math.min(outerContainerWidth / originalWidth, innerContainerWidth / originalWidth);
-    const scaledWidth = Math.round(originalWidth * widthScalingFactor);
-    const scaledHeight = Math.round(originalHeight * widthScalingFactor);
+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;
+    }
+    else {
+        // Fallback: calculate from image
+        const image = await jimp_1.Jimp.read(imageUrl);
+        const originalWidth = image.bitmap.width;
+        const originalHeight = image.bitmap.height;
+        const widthScalingFactor = Math.min(outerContainerWidth / originalWidth, innerContainerWidth / originalWidth, 1 // Never scale up
+        );
+        vmlWidth = Math.round(originalWidth * widthScalingFactor);
+        vmlHeight = Math.round(originalHeight * widthScalingFactor);
+    }
     const borderWidth = parseInt(style?.borderWidth) || 0;
     const borderColor = style?.borderColor || "transparent";
     const borderRadius = parseInt(style?.borderRadius) || 0;
     const useRoundRect = borderRadius > 0;
     const arcsize = useRoundRect
-        ? Math.min(borderRadius / scaledHeight, 1).toFixed(2)
+        ? Math.min(borderRadius / vmlHeight, 1).toFixed(2)
         : "";
     const borderAttributes = borderWidth > 0
         ? `strokeweight="${borderWidth}px" strokecolor="${borderColor}"`
         : `stroked="false"`;
-    const outlookImage = `<!--[if mso]>
-  <v:${useRoundRect ? "roundrect" : "rect"} xmlns:v="urn:schemas-microsoft-com:vml"
-    style="width:${scaledWidth}px;height:${scaledHeight}px;"
-    ${borderAttributes}
-    ${useRoundRect ? `arcsize="${arcsize}"` : ""}
-    fill="true" fillcolor="none">
-    <v:fill src="${imageUrl}" type="frame" />
-    <v:textbox inset="0,0,0,0"><div style="display:none;">.</div></v:textbox>
-  </v:${useRoundRect ? "roundrect" : "rect"}>
+    // 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) {
+        // 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 {
+        // 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]><!-->
@@ -279,42 +323,52 @@ 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;
-    // Ensure border styles are applied only to the container, not the image
-    const imageStyle = {
-        width,
-        height,
-        objectFit,
-        borderStyle,
-        borderRadius: borderRadius,
-        borderColor,
-    };
     // Add border styles to container for fallback clients
     const containerStyles = buildStyles({
         ...containerStyle,
     }, { perChanges: [], pxChanges: addPxToAttributes });
-    const innerContainerWidth = (((typeof width === "string" ? parseInt(width.replace("%", "")) : width) ||
-        100) /
-        100) *
-        (cellWidthInPx -
-            (style?.padding?.left || 0) -
-            (style?.padding?.right || 0));
+    // 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);
+    // 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);
+    // Build image styles for modern email clients (non-Outlook)
     const imageTagStyles = buildStyles({
-        maxWidth: `${originalWidth}px`, // Limit to original size
-        maxHeight: `${originalHeight}px`,
-        ...imageStyle,
+        borderStyle,
+        borderRadius: borderRadius,
+        borderColor,
+        borderWidth,
     }, {
-        perChanges: addPxOrPerToAttributes,
+        perChanges: [],
         pxChanges: addPxToAttributes,
     });
-    const imageElement = `<img src="${imageUrl}" alt="${altText}" width="${scaledWidth}" height="${scaledHeight}" style="${imageTagStyles}; width:100%; height:auto; max-width:${originalWidth}px; max-height:${originalHeight}px;" />`;
+    // OUTLOOK FIX: Image element with explicit dimensions
+    // Outlook will use width/height attributes, modern clients use CSS
+    // Use max-width instead of width:100% to prevent stretching
+    const imageElement = `<img src="${imageUrl}" alt="${altText || "Image"}" border="0" width="${finalWidth}" height="${finalHeight}" style="${imageTagStyles}; display:block; max-width:100%; height:auto;" />`;
     const percentWidth = typeof width === "string" && width.endsWith("%")
         ? width
         : typeof width === "number"
             ? `${width}%`
             : "100%";
+    // Non-MSO wrapper for responsive behavior
     const nonMsoWrapper = `<div style="display:inline-block; width:${percentWidth}; max-width:${originalWidth}px;">${imageElement}</div>`;
-    const outlookImage = await appendOutlookForImage(nonMsoWrapper, cellWidthInPx, innerContainerWidth, imageUrl, style);
+    // OUTLOOK FIX: Generate VML with corrected dimensions
+    const outlookImage = await appendOutlookForImage(nonMsoWrapper, safeCellWidth, innerContainerWidth, imageUrl, style, finalWidth, finalHeight);
     const imageContent = appendOutlookSupport(outlookImage, containerStyles, visibilityClass);
     return navigateToUrl
         ? `<a href="${navigateToUrl}" target="_blank" rel="noreferrer noopener" style="display:block;">${imageContent}</a>`
@@ -387,16 +441,20 @@ async function convertGridBlock(blockData, rootData, cellWidthInPx) {
     });
     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);
     let html = `
   <!--[if mso]>
-  <table border="0" cellpadding="0" cellspacing="${columnGap}" width="100%"
-     style="border-collapse:separate;border-spacing:${columnGap}px;"
+  <table border="0" cellpadding="0" cellspacing="${columnGap}" width="${msoTableWidth}"
+     style="border-collapse:separate;border-spacing:${columnGap}px;width:${msoTableWidth}px;"
      class="${gridVisibilityClass}">
   <![endif]-->
-  <table border="0" cellpadding="0" cellspacing="${columnGap}" width="100%" 
+  <!--[if !mso]><!-->
+  <table border="0" cellpadding="0" cellspacing="${columnGap}" width="100%"
      role="presentation"
-     style="border-collapse:separate;border-spacing:${columnGap}px; ${tableStyles}"
+     style="border-collapse:separate;border-spacing:${columnGap}px; ${tableStyles}; max-width:600px;"
      class="${gridVisibilityClass}">
+  <!--<![endif]-->
   `;
     for (let r = 0; r < visualRows; r++) {
         html += "<tr>";
@@ -414,16 +472,38 @@ async function convertGridBlock(blockData, rootData, cellWidthInPx) {
                     visibleCells++;
             }
         }
-        // FIX: fallback safe-width
+        // OUTLOOK FIX: Calculate safe width based on visible cells
+        // If we have visible cells, distribute 100% width evenly
         const safeWidth = visibleCells > 0 ? 100 / visibleCells : 100 / columns;
+        // OUTLOOK FIX: Calculate total width used by all cells
+        let totalWidth = 0;
+        const cellWidthPercents = [];
         for (let c = 0; c < columns; c++) {
-            const idx = r * columns + c;
             const id = rowIds[c];
             let widthPercent = cellWidths[c] ?? safeWidth;
-            // FIX: never exceed reasonable width
+            // Validate width
             if (widthPercent <= 0 || widthPercent > 100) {
                 widthPercent = safeWidth;
             }
+            cellWidthPercents.push(widthPercent);
+            if (id) {
+                const child = rootData[id];
+                const isHidden = child?.data?.props?.hideOnDesktop;
+                if (!isHidden) {
+                    totalWidth += widthPercent;
+                }
+            }
+        }
+        // OUTLOOK FIX: If total width < 100%, scale up to fill container
+        // This prevents orphaned space that Outlook handles poorly
+        const scaleFactor = totalWidth > 0 && totalWidth < 100 ? 100 / totalWidth : 1;
+        for (let c = 0; c < columns; c++) {
+            const idx = r * columns + c;
+            const id = rowIds[c];
+            // OUTLOOK FIX: Scale width to ensure cells fill 100% of container
+            let widthPercent = cellWidthPercents[c] * scaleFactor;
+            // OUTLOOK FIX: Ensure width doesn't exceed 100% after scaling
+            widthPercent = Math.min(widthPercent, 100);
             if (id) {
                 const child = rootData[id];
                 const { style: cellStyle = {}, props: childProps = {} } = child.data;
@@ -433,6 +513,8 @@ async function convertGridBlock(blockData, rootData, cellWidthInPx) {
                 // Only render if visible
                 if (childVisible) {
                     const { html: childHtml, styles } = await convertGridCellBlock(child, rootData, widthPercent, cellWidthInPx);
+                    // OUTLOOK FIX: Calculate pixel width for Outlook
+                    const cellWidthPx = Math.round((widthPercent / 100) * cellWidthInPx);
                     html += `
           <td
             width="${Math.round(widthPercent)}%"
@@ -440,7 +522,7 @@ async function convertGridBlock(blockData, rootData, cellWidthInPx) {
                         responsive ? "stack-column" : "",
                         visibilityClass,
                     ].filter(Boolean).join(" ")}"
-            style="vertical-align:${verticalAlign};word-break:break-word;${styles}"
+            style="width:${cellWidthPx}px;vertical-align:${verticalAlign};word-break:break-word;${styles}"
           >
             ${childHtml}
           </td>`;
@@ -448,16 +530,26 @@ async function convertGridBlock(blockData, rootData, cellWidthInPx) {
             }
             else {
                 // SAFE empty cell (keeps layout stable)
+                // OUTLOOK FIX: Calculate pixel width for Outlook
+                const cellWidthPx = Math.round((widthPercent / 100) * cellWidthInPx);
                 html += `
-        <td width="${Math.round(widthPercent)}%" 
+        <td width="${Math.round(widthPercent)}%"
             ${responsive ? 'class="stack-column"' : ""}
-            style="vertical-align:top;">
+            style="width:${cellWidthPx}px;vertical-align:top;">
         </td>`;
             }
         }
         html += "</tr>";
     }
-    html += "</table><!--[if mso]></table><![endif]-->";
+    // Close both MSO and non-MSO tables
+    html += `
+  <!--[if mso]>
+  </table>
+  <![endif]-->
+  <!--[if !mso]><!-->
+  </table>
+  <!--<![endif]-->
+  `;
     return html;
 }
 async function convertGridCellBlock(blockData, rootData, cellWidthPercent, parentCellWidthPx) {
@@ -468,8 +560,11 @@ async function convertGridCellBlock(blockData, rootData, cellWidthPercent, paren
         pxChanges: allPxAttributes,
     });
     const parts = [];
-    // FIX: do NOT re-calc px based on parent → causes shrinking
-    const safeCellWidthPx = Math.max(parentCellWidthPx, 20);
+    // 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);
+    // OUTLOOK FIX: Ensure cell width is reasonable and capped at 600px
+    const safeCellWidthPx = Math.min(Math.max(cellWidthPx, 20), 600);
     for (const childId of childrenIds) {
         const child = rootData[childId];
         if (child) {
@@ -604,7 +699,7 @@ async function convertVideoBlock(blockData, cellWidthInPx) {
         height: ${calculatedHeight}px;
         background-color: ${style?.backgroundColor || "#FFFFFF"};
         background-image: url('${resolvedThumbnail}');
-        background-size: cover;
+        background-size: contain;
         background-position: center;
         background-repeat: no-repeat;
         box-sizing: border-box;
@@ -632,7 +727,7 @@ async function convertVideoBlock(blockData, cellWidthInPx) {
     <!--<![endif]-->`;
     const videoContent = `${outlookVideoContent}${nonOutlookVideoContent}`;
     const wrapperHtml = `
-  <table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="margin:0; padding:0; border-collapse: collapse;" class="${visibilityClass}">
+  <table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="margin:0; padding:0; border-collapse: collapse; max-width:600px;" class="${visibilityClass}">
     <tr>
       <td align="${style?.textAlign || "left"}" style="padding:0; ${outerContainerStyles}">
         <table border="0" cellpadding="0" cellspacing="0" role="presentation" 
@@ -794,7 +889,7 @@ async function convertShapeBlock(blockData) {
     }, visibilityClass);
     // Combine into table wrapper
     return `
-<table width="100%" style="border-collapse:collapse;table-layout:fixed;" class="${visibilityClass}">
+<table width="100%" style="border-collapse:collapse;table-layout:fixed;max-width:600px;" class="${visibilityClass}">
   <tr>
     <td style="padding:${padding.top || 0}px ${padding.right || 0}px ${padding.bottom || 0}px ${padding.left || 0}px;text-align:${alignment};">
       ${outlookContent}

package/package.json

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