email-builder-utils 1.1.47 → 1.1.49

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":"AAYA,wBAAgB,sBAAsB,CAAC,UAAU,EAAE;IAAE,KAAK,EAAE,GAAG,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,aAAa,EAAE,MAAM,CAAA;CAAE;;;;;;;;;;;;;;;;;;;;;;EA6ErG;AAED,wBAAgB,kBAAkB,CAAC,SAAS,EAAE,GAAG,UAgEhD"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/utils/blocks/button.ts"],"names":[],"mappings":"AAIA,wBAAgB,sBAAsB,CAAC,UAAU,EAAE;IAAE,KAAK,EAAE,GAAG,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,aAAa,EAAE,MAAM,CAAA;CAAE;;;;;;;;;;;;;;;;;;;;;;EA6ErG;AAED,wBAAgB,kBAAkB,CAAC,SAAS,EAAE,GAAG,UAgEhD"}

package/dist/utils/blocks/button.js

@@ -5,13 +5,6 @@ exports.convertButtonBlock = convertButtonBlock;
 const buildStyles_1 = require("../buildStyles");
 const fontFallback_1 = require("../fontFallback");
 const common_1 = require("../common");
-function encodeBlockPropsAttr(props) {
-    return JSON.stringify(props)
-        .replace(/&/g, "&")
-        .replace(/"/g, """)
-        .replace(/</g, "&lt;")
-        .replace(/>/g, "&gt;");
-}
 function appendOutlookForButton(buttonData) {
     const { style, text, navigateToUrl } = buttonData;
     const pad = style.buttonPadding || {};
@@ -93,7 +86,7 @@ function convertButtonBlock(blockData) {
         text: text || "",
         navigateToUrl: navigateToUrl || "",
     });
-    const buttonBlockProps = encodeBlockPropsAttr({
+    const buttonBlockProps = (0, common_1.encodeBlockPropsAttr)({
         buttonText: text || "",
         navigateToUrl: navigateToUrl || "",
         buttonColor: computed.bgColor,

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

@@ -1 +1 @@
-{"version":3,"file":"dividers.d.ts","sourceRoot":"","sources":["../../../src/utils/blocks/dividers.ts"],"names":[],"mappings":"AAIA,wBAAgB,yBAAyB,CAAC,SAAS,EAAE,GAAG,UAuCvD;AAED,wBAAgB,wBAAwB,CAAC,SAAS,EAAE,GAAG,UAKtD;AAED,wBAAgB,iCAAiC,CAAC,SAAS,EAAE,GAAG,UAuB/D"}
+{"version":3,"file":"dividers.d.ts","sourceRoot":"","sources":["../../../src/utils/blocks/dividers.ts"],"names":[],"mappings":"AAIA,wBAAgB,yBAAyB,CAAC,SAAS,EAAE,GAAG,UAuCvD;AAED,wBAAgB,wBAAwB,CAAC,SAAS,EAAE,GAAG,UAKtD;AAED,wBAAgB,iCAAiC,CAAC,SAAS,EAAE,GAAG,UAwB/D"}

package/dist/utils/blocks/dividers.js

@@ -52,11 +52,12 @@ function convertVerticalDividerBlockToHtml(blockData) {
     const { width, height, dividerColor, padding, backgroundColor } = style;
     const visibilityClass = (0, common_1.getVisibilityClass)(props);
     const outerStyles = (0, buildStyles_1.buildStyles)({ padding, backgroundColor }, {
-        perChanges: [], pxChanges: buildStyles_1.allPxAttributes,
+        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}">
+         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]>

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/shape.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"shape.d.ts","sourceRoot":"","sources":["../../../src/utils/blocks/shape.ts"],"names":[],"mappings":"AAuHA,wBAAsB,iBAAiB,CAAC,SAAS,EAAE,GAAG,mBAyHrD"}
+{"version":3,"file":"shape.d.ts","sourceRoot":"","sources":["../../../src/utils/blocks/shape.ts"],"names":[],"mappings":"AAuHA,wBAAsB,iBAAiB,CAAC,SAAS,EAAE,GAAG,mBA2MrD"}

package/dist/utils/blocks/shape.js

@@ -100,11 +100,19 @@ async function convertShapeBlock(blockData) {
     const visibilityClass = (0, common_1.getVisibilityClass)(props);
     const { width = "100", height = "150", padding = {}, backgroundColor = "#2F80ED", borderRadius, borderWidth = 0, borderStyle = "solid", borderColor = "transparent", customCss, shapeColor, alignment = "left", msoBakeImageWithText, color = "#000000", fontSize = 14, textAlign = "center", verticalAlign = "middle", } = style || {};
     const borderRadiusMap = {
-        rectangle: "0", rounded: "10px", circle: "50%", oval: "50%",
+        rectangle: "0",
+        rounded: "10px",
+        circle: "50%",
+        oval: "50%",
     };
     let resolvedBorderRadius = borderRadius || borderRadiusMap[shape] || "0";
-    let resolvedWidthPx = typeof width === "number" ? width : parseInt(width.toString().replace("px", ""), 10) || 100;
-    let resolvedHeightPx = typeof height === "number" ? height : parseInt(height.toString().replace("px", ""), 10) || 150;
+    let resolvedWidthPx = typeof width === "number"
+        ? width
+        : parseInt(width.toString().replace("px", ""), 10) || 100;
+    let resolvedHeightPx = typeof height === "number"
+        ? height
+        : parseInt(height.toString().replace("px", ""), 10) || 150;
+    // --- Shape-specific constraints ---
     if (shape === "circle") {
         const side = Math.min(resolvedWidthPx, resolvedHeightPx);
         resolvedWidthPx = side;
@@ -115,16 +123,28 @@ async function convertShapeBlock(blockData) {
         resolvedBorderRadius = "50% / 50%";
     }
     const finalBackgroundColor = shapeColor || backgroundColor;
+    // --- Horizontal alignment for outer container ---
     const alignmentStyles = {
         left: "margin-right:auto;margin-left:0;",
         center: "margin-left:auto;margin-right:auto;",
         right: "margin-left:auto;margin-right:0;",
     };
     const alignmentStyle = alignmentStyles[alignment] || "";
-    const textAlignMap = { left: "left", center: "center", right: "right", justify: "justify" };
+    // --- Text + vertical alignment maps ---
+    const textAlignMap = {
+        left: "left",
+        center: "center",
+        right: "right",
+        justify: "justify",
+    };
     const textAlignStyle = textAlignMap[textAlign] || "center";
+    // --- Text styling ---
     const textSizeStyle = `font-size:${fontSize}px;line-height:1.3;word-break:break-word;overflow-wrap:break-word;color:${color};`;
+    // ============================
+    // Modern HTML (non-MSO)
+    // ============================
     let nonMsoContent = "";
+    // --- Case 1: Image + Text ---
     if (imageUrl && text) {
         nonMsoContent = `
 <div style="display:inline-block;width:${resolvedWidthPx}px;height:${resolvedHeightPx}px;
@@ -148,6 +168,7 @@ async function convertShapeBlock(blockData) {
   </table>
 </div>`;
     }
+    // --- Case 2: Image only ---
     else if (imageUrl) {
         nonMsoContent = `
 <div style="display:inline-block;width:${resolvedWidthPx}px;height:${resolvedHeightPx}px;
@@ -159,6 +180,7 @@ async function convertShapeBlock(blockData) {
     style="width:100%;height:100%;object-fit:cover;border-radius:${resolvedBorderRadius};display:block;" />
 </div>`;
     }
+    // --- Case 3: Text only ---
     else {
         nonMsoContent = `
 <div style="display:inline-block;width:${resolvedWidthPx}px;height:${resolvedHeightPx}px;
@@ -178,15 +200,50 @@ async function convertShapeBlock(blockData) {
   </table>
 </div>`;
     }
+    // Outlook (VML) fallback
     const outlookContent = appendOutlookForShape(nonMsoContent, resolvedWidthPx, resolvedWidthPx, {
-        shape, imageUrl, backgroundColor, shapeColor,
-        borderWidth, borderColor, borderRadius: resolvedBorderRadius,
-        heightPx: resolvedHeightPx, text, textColor: color,
-        textSize: fontSize, verticalAlign, textAlign, alignment,
-        padding, msoBakeImageWithText,
+        shape,
+        imageUrl,
+        backgroundColor,
+        shapeColor,
+        borderWidth,
+        borderColor,
+        borderRadius: resolvedBorderRadius,
+        heightPx: resolvedHeightPx,
+        text,
+        textColor: color,
+        textSize: fontSize,
+        verticalAlign,
+        textAlign, // ✅ added
+        alignment,
+        padding,
+        msoBakeImageWithText,
     }, visibilityClass);
+    const shapeBlockProps = (0, common_1.encodeBlockPropsAttr)({
+        shape: shape || 'rectangle',
+        width: resolvedWidthPx,
+        height: resolvedHeightPx,
+        shapeColor: shapeColor || '',
+        backgroundColor: backgroundColor || '',
+        borderRadius: resolvedBorderRadius,
+        borderWidth,
+        borderColor,
+        borderStyle,
+        imageUrl: imageUrl || '',
+        text: text || '',
+        color,
+        fontSize,
+        textAlign,
+        verticalAlign,
+        alignment,
+        padding,
+        customCss: customCss || '',
+        hideOnDesktop: Boolean(props.hideOnDesktop),
+        hideOnMobile: Boolean(props.hideOnMobile),
+    });
+    // Combine into table wrapper
     return `
-<table width="100%" style="border-collapse:collapse;table-layout:fixed;max-width:600px;" class="${visibilityClass}">
+<table width="100%" style="border-collapse:collapse;table-layout:fixed;max-width:600px;" class="${visibilityClass}" data-block-type="shape" data-block-props="${shapeBlockProps}">
   <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/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/blocks/video.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"video.d.ts","sourceRoot":"","sources":["../../../src/utils/blocks/video.ts"],"names":[],"mappings":"AAUA,wBAAsB,iBAAiB,CAAC,SAAS,EAAE,GAAG,EAAE,aAAa,EAAE,MAAM,mBA0H5E"}
+{"version":3,"file":"video.d.ts","sourceRoot":"","sources":["../../../src/utils/blocks/video.ts"],"names":[],"mappings":"AAUA,wBAAsB,iBAAiB,CACrC,SAAS,EAAE,GAAG,EACd,aAAa,EAAE,MAAM,mBAiKtB"}

package/dist/utils/blocks/video.js

@@ -30,6 +30,7 @@ async function convertVideoBlock(blockData, cellWidthInPx) {
             catch (_) { }
         }
     }
+    // Width / dimensions
     let percentWidth = '100%';
     if (typeof style?.width === 'string' && style.width.trim().endsWith('%')) {
         percentWidth = style.width.trim();
@@ -42,24 +43,51 @@ async function convertVideoBlock(blockData, cellWidthInPx) {
     const innerContainerWidth = (parseFloat(percentWidth) / 100) * (cellWidthInPx - paddingLeft - paddingRight);
     const thumbnailW = Math.round(innerContainerWidth);
     const thumbnailH = Math.round(thumbnailW / (16 / 9));
+    // Border
     const borderRadius = parseInt(style?.borderRadius || 0);
     const borderWidth = parseInt(style?.borderWidth || 0);
     const borderColor = style?.borderColor || 'transparent';
     const borderStyleProp = style?.borderStyle || 'solid';
-    const outerContainerStyles = (0, buildStyles_1.buildStyles)({ ...style, width: undefined, borderColor: undefined, borderRadius: undefined, borderWidth: undefined, borderStyle: undefined }, { perChanges: buildStyles_1.addPxOrPerToAttributes, pxChanges: buildStyles_1.addPxToAttributes });
+    const outerContainerStyles = (0, buildStyles_1.buildStyles)({
+        ...style,
+        width: undefined,
+        borderColor: undefined,
+        borderRadius: undefined,
+        borderWidth: undefined,
+        borderStyle: undefined,
+    }, { perChanges: buildStyles_1.addPxOrPerToAttributes, pxChanges: buildStyles_1.addPxToAttributes });
     const align = style?.textAlign || 'left';
     const playIconW = 65;
     const playIconH = 46;
+    // ── Industry-standard VML + background-image table approach ──────────────────
+    // Mirrors the pattern used by professional email builders (e.g. Beefree):
+    //
+    // VML (<!--[if vml]>): all Outlook / Word rendering engine versions.
+    //   v:group wraps thumbnail (v:rect frame fill) + vector play button
+    //   (v:oval white circle + v:shape black triangle). No external image needed.
+    //
+    // Non-VML (<!--[if !vml]>): Gmail, Apple Mail, Yahoo, Outlook.com, EML viewers.
+    //   thumbnail as `background` attribute + inline background-image on <table>.
+    //   3-column layout: [25% spacer GIF] [50% play icon, centred] [25% spacer].
+    //   The spacer GIF has a 4:9 aspect ratio — when it fills the 25% column its
+    //   rendered height equals thumbnailWidth × 9/16, keeping the table at 16:9
+    //   without any fixed `height` CSS (which is stripped by many clients).
+    // VML coordinate positions for the play button (in the v:group coord space).
     const ovalSize = 65;
     const ovalLeft = Math.round(thumbnailW / 2 - ovalSize / 2);
     const ovalTop = Math.round(thumbnailH / 2 - ovalSize / 2);
     const triW = 23;
     const triH = 33;
+    // Triangle centre is slightly right of geometric centre for visual balance.
     const triLeft = Math.round(thumbnailW / 2 - triW / 2 + 3);
     const triTop = Math.round(thumbnailH / 2 - triH / 2);
-    const borderCss = borderWidth > 0 ? `border:${borderWidth}px ${borderStyleProp} ${borderColor};` : '';
+    const borderCss = borderWidth > 0
+        ? `border:${borderWidth}px ${borderStyleProp} ${borderColor};`
+        : '';
     const radiusCss = borderRadius > 0 ? `border-radius:${borderRadius}px; overflow:hidden;` : '';
+    // min-height fallback for clients that ignore the spacer GIF (e.g. some webmail).
     const minHeight = Math.round(thumbnailW * 0.3);
+    // VML block — shown only in Outlook (Word engine supports VML, not standard HTML).
     const outlookContent = hideOnDesktop ? '' : `<!--[if vml]>
 <v:group xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word"
   coordsize="${thumbnailW},${thumbnailH}" coordorigin="0,0"
@@ -76,6 +104,7 @@ async function convertVideoBlock(blockData, cellWidthInPx) {
     style="position:absolute;left:${triLeft};top:${triTop};width:${triW};height:${triH};" />
 </v:group>
 <![endif]-->`;
+    // Non-VML block — shown in all clients except Outlook.
     const nonMsoContent = `<!--[if !vml]><!-->
 <a href="${videoLink}" target="_blank"
     style="display:block; text-decoration:none; background-image:url('${resolvedThumbnail}'); background-size:cover; background-position:center; ${borderCss}${radiusCss}">
@@ -101,7 +130,10 @@ async function convertVideoBlock(blockData, cellWidthInPx) {
     return `
 <table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation"
   style="border-collapse:collapse; max-width:600px; margin:0; padding:0;"
-  class="${visibilityClass}">
+  class="${visibilityClass}" data-block-type="video"
+  data-video-url="${videoUrl || ''}" data-youtube-url="${youtubeVideoUrl || ''}"
+  data-thumbnail-url="${thumbnailUrl || ''}" data-alt-text="${altText || ''}"
+  data-width="${typeof style?.width === 'number' ? style.width : 100}">
   <tr>
     <td align="${align}" style="${outerContainerStyles}">
       <table border="0" cellpadding="0" cellspacing="0" role="presentation"

package/dist/utils/common.d.ts

@@ -4,4 +4,5 @@ export declare function getVisibilityClass(props?: {
     hideOnDesktop?: boolean;
     hideOnMobile?: boolean;
 }): string;
+export declare function encodeBlockPropsAttr(props: Record<string, any>): string;
 //# sourceMappingURL=common.d.ts.map

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

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

package/dist/utils/common.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.extractVimeoId = exports.extractYouTubeId = void 0;
 exports.getVisibilityClass = getVisibilityClass;
+exports.encodeBlockPropsAttr = encodeBlockPropsAttr;
 const extractYouTubeId = (url) => {
     try {
         const u = new URL(url);
@@ -43,3 +44,12 @@ function getVisibilityClass(props) {
         .filter(Boolean)
         .join(" ");
 }
+function encodeBlockPropsAttr(props) {
+    // HTML attribute-safe JSON string.
+    // Keep it minimal and deterministic: the importer reads it back via getAttribute + JSON.parse.
+    return JSON.stringify(props)
+        .replace(/&/g, "&")
+        .replace(/"/g, """)
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;");
+}

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,oBAwHpD,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

@@ -20,6 +20,7 @@ const convertJsonToHtml = async (jsonData) => {
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="x-apple-disable-message-reformatting" />
+    <meta name="format-detection" content="telephone=no,address=no,email=no,date=no,url=no" />
     <!--[if gte mso 9]><xml>
       <o:OfficeDocumentSettings>
         <o:AllowPNG/>
@@ -27,83 +28,145 @@ const convertJsonToHtml = async (jsonData) => {
       </o:OfficeDocumentSettings>
     </xml><![endif]-->
     <style>
-        .responsive-table {
-          width: 100%;
-          max-width: 600px;
+      html, body {
+        margin: 0 !important;
+        padding: 0 !important;
+        width: 100% !important;
+        -ms-text-size-adjust: 100%;
+        -webkit-text-size-adjust: 100%;
+      }
+
+      body, table, td, p, a {
+        font-family: ${(0, fontFallback_1.withFontFallback)(fontFamily)};
+      }
+
+      table, td {
+        mso-table-lspace: 0pt;
+        mso-table-rspace: 0pt;
+        border-collapse: collapse !important;
+      }
+
+      img {
+        -ms-interpolation-mode: bicubic;
+        border: 0;
+        outline: none;
+        text-decoration: none;
+        display: block;
+        height: auto;
+        line-height: 100%;
+      }
+
+      a {
+        text-decoration: none;
+        color: inherit;
+      }
+
+      .email-container {
+        width: 100%;
+        max-width: 600px;
+        margin: 0 auto;
+      }
+
+      .stack-column,
+      .stack-column-cell {
+        vertical-align: top;
+      }
+
+      .hide-mobile {
+        display: block !important;
+        max-height: none !important;
+        overflow: visible !important;
+      }
+
+      .hide-desktop {
+        display: none !important;
+        max-height: 0 !important;
+        overflow: hidden !important;
+        mso-hide: all !important;
+      }
+
+      @media only screen and (max-width: 600px) {
+        .email-container {
+          width: 100% !important;
+          max-width: 100% !important;
         }
-        @media only screen and (max-width: 600px) {
-          .responsive-table {
-            width: 100% !important;
-          }
-          .stack-column,
-          .stack-column td {
-            display: block !important;
-            width: 100% !important;
-            max-width: 100% !important;
-          }
+
+        .stack-column,
+        .stack-column-cell {
+          display: block !important;
+          width: 100% !important;
+          max-width: 100% !important;
         }
+
         .hide-mobile {
-         display: block !important;
-       }
-
-       .hide-desktop {
-         display: block !important;
-         mso-hide: all !important; /* Hide in Outlook (treated as desktop) */
-       }
-
-       @media only screen and (max-width: 600px) {
-         .hide-mobile {
-           display: none !important;
-           max-height: 0 !important;
-           overflow: hidden !important;
-           mso-hide: all !important;
-         }
-       }
-
-       @media only screen and (min-width: 601px) {
-         .hide-desktop {
-           display: none !important;
-           max-height: 0 !important;
-           overflow: hidden !important;
-           mso-hide: all !important;
-         }
-       }
-
-      </style>
-    </head>
-    <body style="margin:0; padding:0; background-color:${canvasColor};">
-      <center style="width:100%; background-color:${canvasColor};">
-        <table
-          class="responsive-table"
-          role="presentation"
-          bgcolor="${canvasColor}"
-          cellpadding="0"
-          cellspacing="0"
-          border="0"
-          width="600"
-          align="center"
-          style="
-            font-family: ${(0, fontFallback_1.withFontFallback)(fontFamily)};
-            margin: 0 auto;
-            table-layout:fixed;
-            width:600px;
-            max-width:600px;
-            background-color: ${canvasColor};
-            ${textColor ? `color: ${textColor};` : ''}
-            ${borderWidth ? `border: ${borderWidth}px ${borderStyle || 'solid'} ${borderColor || 'transparent'};` : ''}
-            ${borderRadius ? `border-radius: ${borderRadius}px;` : ''}"
-        >
-          <tbody>
-            <tr>
-              <td style="padding: ${top}px ${right}px ${bottom}px ${left}px;">
-                ${blocksHtml.join("")}
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </center>
-    </body>
-  </html>`;
+          display: none !important;
+          max-height: 0 !important;
+          overflow: hidden !important;
+          mso-hide: all !important;
+        }
+
+        .hide-desktop {
+          display: block !important;
+          max-height: none !important;
+          overflow: visible !important;
+        }
+      }
+    </style>
+  </head>
+  <body style="margin:0; padding:0; background-color:${canvasColor || '#ffffff'};">
+    <center style="width:100%; background-color:${canvasColor || '#ffffff'};">
+
+      <table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="${canvasColor || '#ffffff'}">
+        <tr>
+          <td align="center">
+
+            <!--[if mso]>
+            <table role="presentation" border="0" cellspacing="0" cellpadding="0" width="600">
+              <tr>
+                <td>
+            <![endif]-->
+
+            <table
+              role="presentation"
+              class="email-container"
+              bgcolor="${canvasColor || '#ffffff'}"
+              cellpadding="0"
+              cellspacing="0"
+              border="0"
+              width="100%"
+              style="
+                font-family: ${(0, fontFallback_1.withFontFallback)(fontFamily)};
+                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'};` : ''}
+                ${borderRadius ? `border-radius: ${borderRadius}px;` : ''}"
+            >
+              <tbody>
+                <tr>
+                  <td style="padding: ${top}px ${right}px ${bottom}px ${left}px;">
+                    ${blocksHtml.join("")}
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+
+            <!--[if mso]>
+                </td>
+              </tr>
+            </table>
+            <![endif]-->
+
+          </td>
+        </tr>
+      </table>
+
+    </center>
+  </body>
+</html>`;
     return rawHtml;
 };
 exports.convertJsonToHtml = convertJsonToHtml;

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.47",
+  "version": "1.1.49",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [