email-builder-utils 1.1.48 → 1.1.49

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":"AAKA,wBAAsB,gBAAgB,CAAC,SAAS,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAE,aAAa,EAAE,MAAM,mBAiO1F;AAED,wBAAsB,oBAAoB,CACxC,SAAS,EAAE,GAAG,EACd,QAAQ,EAAE,GAAG,EACb,gBAAgB,EAAE,MAAM,EACxB,iBAAiB,EAAE,MAAM,EACzB,mBAAmB,UAAQ;;;GAuD5B"}
+{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../../src/utils/blocks/grid.ts"],"names":[],"mappings":"AAMA,wBAAsB,gBAAgB,CAAC,SAAS,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAE,aAAa,EAAE,MAAM,mBAiO1F;AAED,wBAAsB,oBAAoB,CACxC,SAAS,EAAE,GAAG,EACd,QAAQ,EAAE,GAAG,EACb,gBAAgB,EAAE,MAAM,EACxB,iBAAiB,EAAE,MAAM,EACzB,mBAAmB,UAAQ;;;GAoE5B"}

package/dist/utils/blocks/grid.js

@@ -6,6 +6,7 @@ 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;
@@ -56,10 +57,10 @@ async function convertGridBlock(blockData, rootData, cellWidthInPx) {
     const visualRows = Math.ceil(total / columns);
     const msoTableWidth = Math.min(cellWidthInPx, 600);
     const msoBgColor = !rawBgImageUrl && !isGradient ? (backgroundColor || '') : '';
-    const msoBgAttr = msoBgColor ? ` bgcolor="${msoBgColor}"` : '';
+    const msoBgAttr = msoBgColor ? ` bgcolor="${(0, outlookSupport_1.toOutlookBgColor)(msoBgColor)}"` : '';
     const msoBgStyle = msoBgColor ? `background-color:${msoBgColor};` : '';
     const innerBgTransparent = (rawBgImageUrl || isGradient) ? 'background-color:transparent;' : '';
-    const nonMsoBgAttr = !rawBgImageUrl && !isGradient && backgroundColor && !divBorderStyle ? ` bgcolor="${backgroundColor}"` : '';
+    const nonMsoBgAttr = !rawBgImageUrl && !isGradient && backgroundColor && !divBorderStyle ? ` bgcolor="${(0, outlookSupport_1.toOutlookBgColor)(backgroundColor)}"` : '';
     const divWrapBg = divBorderStyle && backgroundColor && !rawBgImageUrl && !isGradient
         ? ` background-color:${backgroundColor};`
         : '';
@@ -124,7 +125,7 @@ async function convertGridBlock(blockData, rootData, cellWidthInPx) {
                 if (childVisible) {
                     const { html: childHtml, styles } = await convertGridCellBlock(child, rootData, widthPercent, adjustedTableWidth, Boolean(divBorderStyle));
                     const cellBgColor = cellStyle.backgroundColor || '';
-                    const cellBgAttr = cellBgColor ? ` bgcolor="${cellBgColor}"` : '';
+                    const cellBgAttr = cellBgColor ? ` bgcolor="${(0, outlookSupport_1.toOutlookBgColor)(cellBgColor)}"` : '';
                     html += `
           <td
             width="${cellWidthPx}"${cellBgAttr}
@@ -207,15 +208,41 @@ async function convertGridCellBlock(blockData, rootData, cellWidthPercent, paren
     const { style = {}, childrenIds = [], props = {} } = blockData.data;
     const { borderRadius: cellBorderRadius, borderWidth: cellBorderWidth, borderStyle: cellBorderStyleProp, borderColor: cellBorderColor, border: cellBorderShorthand, ...styleWithoutBorder } = style;
     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.
     const styleForTd = stripBgFromTd
-        ? { ...styleWithoutBorder, backgroundColor: 'transparent' }
+        ? { ...styleWithoutBorder, backgroundColor: undefined }
         : styleWithoutBorder;
     const styles = (0, buildStyles_1.buildStyles)(styleForTd, { perChanges: [], pxChanges: buildStyles_1.allPxAttributes });
     const parts = [];
     const cellWidthPx = Math.round((cellWidthPercent / 100) * parentCellWidthPx);
-    const cellPad = styleWithoutBorder?.padding || {};
-    const cellPadLeft = Number.isFinite(cellPad.left) ? cellPad.left : 0;
-    const cellPadRight = Number.isFinite(cellPad.right) ? cellPad.right : 0;
+    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];
+        }
+    }
     const contentWidthPx = Math.max(cellWidthPx - cellPadLeft - cellPadRight, 20);
     const safeCellWidthPx = Math.min(contentWidthPx, 600);
     for (const childId of childrenIds) {

package/dist/utils/blocks/image.js

@@ -42,7 +42,7 @@ async function convertImageBlock(blockData, cellWidthInPx) {
     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 });
-    const imageElement = `<img src="${imageUrl}" alt="${altText || "Image"}" border="0" width="${finalWidth}" height="${finalHeight}" style="${imageTagStyles}; display:block; max-width:100%; height:auto; line-height: 0;" />`;
+    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%";

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":"AAKA,wBAAgB,gBAAgB,CAAC,SAAS,EAAE,GAAG,EAAE,aAAa,CAAC,EAAE,MAAM,UAsItE"}
+{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../src/utils/blocks/text.ts"],"names":[],"mappings":"AAKA,wBAAgB,gBAAgB,CAAC,SAAS,EAAE,GAAG,EAAE,aAAa,CAAC,EAAE,MAAM,UA4ItE"}

package/dist/utils/blocks/text.js

@@ -8,7 +8,7 @@ const common_1 = require("../common");
 function convertTextBlock(blockData, cellWidthInPx) {
     const { style, props } = blockData.data;
     const visibilityClass = (0, common_1.getVisibilityClass)(props);
-    const { width, backgroundColor, padding, borderRadius, borderStyle, borderColor, borderWidth, textContainerBackgroundColor, textContainerPadding, fontSize, backgroundImage, whiteSpace: _whiteSpace, ...rest } = style;
+    const { width, backgroundColor, padding, borderRadius, borderStyle, borderColor, borderWidth, textContainerBackgroundColor, textContainerPadding, fontSize, backgroundImage, backgroundPosition, backgroundRepeat, backgroundSize, whiteSpace: _whiteSpace, ...rest } = style;
     const bgImageStr = typeof backgroundImage === 'string' ? backgroundImage : '';
     const customCssStr = rest.customCss || '';
     const gradientInCustomCss = !bgImageStr.includes('gradient(') && customCssStr.includes('gradient(')
@@ -67,9 +67,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 = backgroundPosition ?? 'center center';
+        const bgSize = backgroundSize ?? 'cover';
+        const bgRepeat = 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/convertJsonToHtml.d.ts.map

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

package/dist/utils/convertJsonToHtml.js

@@ -88,6 +88,7 @@ const convertJsonToHtml = async (jsonData) => {
       @media only screen and (max-width: 600px) {
         .email-container {
           width: 100% !important;
+          max-width: 100% !important;
         }
 
         .stack-column,
@@ -138,6 +139,7 @@ const convertJsonToHtml = async (jsonData) => {
                 table-layout: fixed;
                 width: 100%;
                 max-width: 600px;
+                margin: 0 auto;
                 background-color: ${canvasColor || '#ffffff'};
                 ${textColor ? `color: ${textColor};` : ''}
                 ${borderWidth ? `border: ${borderWidth}px ${borderStyle || 'solid'} ${borderColor || 'transparent'};` : ''}

package/dist/utils/jsonToHTML.d.ts

@@ -1,3 +1,2 @@
-export { tableCommonStyle } from "./buildStyles";
 export declare function convertToHtml(blockData: any, rootData: any, cellWidthInPx: number): Promise<string>;
 //# sourceMappingURL=jsonToHTML.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"jsonToHTML.d.ts","sourceRoot":"","sources":["../../src/utils/jsonToHTML.ts"],"names":[],"mappings":"AASA,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEjD,wBAAsB,aAAa,CAAC,SAAS,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAE,aAAa,EAAE,MAAM,mBAuBvF"}
+{"version":3,"file":"jsonToHTML.d.ts","sourceRoot":"","sources":["../../src/utils/jsonToHTML.ts"],"names":[],"mappings":"AAaA,wBAAsB,aAAa,CAAC,SAAS,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAE,aAAa,EAAE,MAAM,mBAuBvF"}

package/dist/utils/jsonToHTML.js

@@ -1,6 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.tableCommonStyle = void 0;
 exports.convertToHtml = convertToHtml;
 const types_1 = require("../types");
 const text_1 = require("./blocks/text");
@@ -10,8 +9,8 @@ const grid_1 = require("./blocks/grid");
 const dividers_1 = require("./blocks/dividers");
 const video_1 = require("./blocks/video");
 const shape_1 = require("./blocks/shape");
-var buildStyles_1 = require("./buildStyles");
-Object.defineProperty(exports, "tableCommonStyle", { enumerable: true, get: function () { return buildStyles_1.tableCommonStyle; } });
+// Update: Use Gmail Mobile friendly tableCommonStyle
+// export const tableCommonStyle = "border-collapse:collapse; table-layout:fixed; width:100%; max-width:600px; margin:0 auto;";
 async function convertToHtml(blockData, rootData, cellWidthInPx) {
     switch (blockData.type) {
         case types_1.BlockType.TEXT:

package/dist/utils/outlookSupport.d.ts

@@ -1,3 +1,4 @@
+export declare function toOutlookBgColor(color: string): string;
 export declare function appendOutlookSupport(content: string, contentStyle: string, className?: string, msoWidth?: number): string;
 export declare function appendOutlookForImage(content: string, outerContainerWidth: number, innerContainerWidth: number, imageUrl: string, style?: any, finalWidth?: number, finalHeight?: number): Promise<string>;
 export declare function loadImageNaturalDimensions(imageUrl: string): Promise<{

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

@@ -1 +1 @@
-{"version":3,"file":"outlookSupport.d.ts","sourceRoot":"","sources":["../../src/utils/outlookSupport.ts"],"names":[],"mappings":"AAEA,wBAAgB,oBAAoB,CAClC,OAAO,EAAE,MAAM,EACf,YAAY,EAAE,MAAM,EACpB,SAAS,CAAC,EAAE,MAAM,EAClB,QAAQ,CAAC,EAAE,MAAM,UAgClB;AAED,wBAAsB,qBAAqB,CACzC,OAAO,EAAE,MAAM,EACf,mBAAmB,EAAE,MAAM,EAC3B,mBAAmB,EAAE,MAAM,EAC3B,QAAQ,EAAE,MAAM,EAChB,KAAK,GAAE,GAAQ,EACf,UAAU,CAAC,EAAE,MAAM,EACnB,WAAW,CAAC,EAAE,MAAM,mBA2ErB;AAED,wBAAsB,0BAA0B,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC,CAO7G"}
+{"version":3,"file":"outlookSupport.d.ts","sourceRoot":"","sources":["../../src/utils/outlookSupport.ts"],"names":[],"mappings":"AAIA,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAOtD;AAOD,wBAAgB,oBAAoB,CAClC,OAAO,EAAE,MAAM,EACf,YAAY,EAAE,MAAM,EACpB,SAAS,CAAC,EAAE,MAAM,EAClB,QAAQ,CAAC,EAAE,MAAM,UAqClB;AAED,wBAAsB,qBAAqB,CACzC,OAAO,EAAE,MAAM,EACf,mBAAmB,EAAE,MAAM,EAC3B,mBAAmB,EAAE,MAAM,EAC3B,QAAQ,EAAE,MAAM,EAChB,KAAK,GAAE,GAAQ,EACf,UAAU,CAAC,EAAE,MAAM,EACnB,WAAW,CAAC,EAAE,MAAM,mBA2ErB;AAED,wBAAsB,0BAA0B,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC,CAO7G"}

package/dist/utils/outlookSupport.js

@@ -1,26 +1,46 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.toOutlookBgColor = toOutlookBgColor;
 exports.appendOutlookSupport = appendOutlookSupport;
 exports.appendOutlookForImage = appendOutlookForImage;
 exports.loadImageNaturalDimensions = loadImageNaturalDimensions;
 const buildStyles_1 = require("./buildStyles");
+// Converts rgba(r,g,b,a) → #rrggbb for use in HTML bgcolor attributes.
+// Old Outlook's bgcolor attribute only accepts solid hex or named colors — rgba is silently ignored.
+function toOutlookBgColor(color) {
+    if (!color || color === 'transparent')
+        return '';
+    const m = color.match(/rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)(?:\s*,\s*[\d.]+)?\s*\)/);
+    if (m) {
+        return '#' + [m[1], m[2], m[3]].map(n => parseInt(n).toString(16).padStart(2, '0')).join('');
+    }
+    return color;
+}
+function extractBgColor(styleStr) {
+    const m = styleStr.match(/background-color\s*:\s*([^;]+)/i);
+    return m ? m[1].trim() : '';
+}
 function appendOutlookSupport(content, contentStyle, className, msoWidth) {
     const visibilityClass = className || "";
     const shouldHideInOutlook = visibilityClass.includes("hide-desktop");
+    // bgcolor attribute is the reliable fallback for solid colors in Outlook and webmail
+    // forwarding chains where CSS background-color gets stripped.
+    const rawBg = extractBgColor(contentStyle);
+    const bgAttr = rawBg ? ` bgcolor="${toOutlookBgColor(rawBg)}"` : '';
     if (shouldHideInOutlook) {
         return `
     <!--[if !mso]><!-->
-    <table data-ebr-role="wrapper" role="presentation"  width="100%" style="${buildStyles_1.tableCommonStyle}" class="${visibilityClass}"><tr><td style="${contentStyle}">${content}</td></tr></table>
+    <table data-ebr-role="wrapper" role="presentation" width="100%" style="${buildStyles_1.tableCommonStyle}" class="${visibilityClass}"><tr><td${bgAttr} style="${contentStyle}">${content}</td></tr></table>
     <!--<![endif]-->
     `;
     }
     if (msoWidth) {
         return `
 <!--[if mso]>
-<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="${msoWidth}" style="border-collapse:collapse;width:${msoWidth}px;"><tr><td width="${msoWidth}" style="${contentStyle}">
+<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="${msoWidth}" style="border-collapse:collapse;width:${msoWidth}px;"><tr><td width="${msoWidth}"${bgAttr} style="${contentStyle}">
 <![endif]-->
 <!--[if !mso]><!-->
-<table data-ebr-role="wrapper" role="presentation" width="100%" border="0" cellpadding="0" cellspacing="0" style="${buildStyles_1.tableCommonStyle}; max-width:600px;" class="${visibilityClass}"><tr><td width="100%" style="${contentStyle}">
+<table data-ebr-role="wrapper" role="presentation" width="100%" border="0" cellpadding="0" cellspacing="0" style="${buildStyles_1.tableCommonStyle}; max-width:600px;" class="${visibilityClass}"><tr><td width="100%"${bgAttr} style="${contentStyle}">
 <!--<![endif]-->
 ${content}
 <!--[if mso]></td></tr></table><![endif]-->
@@ -30,7 +50,7 @@ ${content}
     `;
     }
     return `
-  <table data-ebr-role="wrapper" role="presentation" width="100%" border="0" cellpadding="0" cellspacing="0" style="${buildStyles_1.tableCommonStyle}; max-width:600px;" class="${visibilityClass}"><tr><td width="100%" style="${contentStyle}">${content}</td></tr></table>
+  <table data-ebr-role="wrapper" role="presentation" width="100%" border="0" cellpadding="0" cellspacing="0" style="${buildStyles_1.tableCommonStyle}; max-width:600px;" class="${visibilityClass}"><tr><td width="100%"${bgAttr} style="${contentStyle}">${content}</td></tr></table>
   `;
 }
 async function appendOutlookForImage(content, outerContainerWidth, innerContainerWidth, imageUrl, style = {}, finalWidth, finalHeight) {

package/package.json

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