email-builder-utils 1.1.45 → 1.1.46

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

@@ -1 +1 @@
-{"version":3,"file":"jsonToHTML.d.ts","sourceRoot":"","sources":["../../src/utils/jsonToHTML.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAIrC,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,iDAAiD,CAAC;AA2I/E,wBAAsB,aAAa,CACjC,SAAS,EAAE,UAAU,EACrB,QAAQ,EAAE,GAAG,EACb,aAAa,EAAE,MAAM,mBAwBtB;AA0lCD,wBAAsB,iBAAiB,CAAC,SAAS,EAAE,GAAG,EAAE,aAAa,EAAE,MAAM,mBA+K5E"}
+{"version":3,"file":"jsonToHTML.d.ts","sourceRoot":"","sources":["../../src/utils/jsonToHTML.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAIrC,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,iDAAiD,CAAC;AA2I/E,wBAAsB,aAAa,CACjC,SAAS,EAAE,UAAU,EACrB,QAAQ,EAAE,GAAG,EACb,aAAa,EAAE,MAAM,mBAwBtB;AAqoCD,wBAAsB,iBAAiB,CAAC,SAAS,EAAE,GAAG,EAAE,aAAa,EAAE,MAAM,mBAwM5E"}

package/dist/utils/jsonToHTML.js

@@ -8,7 +8,6 @@ const common_1 = require("./common");
 const fontFallback_1 = require("./fontFallback");
 const addPxToAttributes = [
     "fontSize",
-    "lineHeight",
     "borderRadius",
     "borderWidth",
 ];
@@ -209,6 +208,7 @@ function convertDividerBlockToHtml(blockData) {
     });
     const dividerWidth = width || 100;
     const alignAttr = alignment === 'center' ? 'center' : alignment === 'right' ? 'right' : 'left';
+    const alignMargin = alignAttr === 'center' ? '0 auto' : alignAttr === 'right' ? '0 0 0 auto' : '0 auto 0 0';
     // Append text-align so the import parser can recover alignment via inheritance
     const contentStyle = convertedStyle
         ? `${convertedStyle}; text-align:${alignAttr};`
@@ -226,6 +226,7 @@ function convertDividerBlockToHtml(blockData) {
       width="${dividerWidth}%"
       cellpadding="0"
       cellspacing="0"
+      style="margin:${alignMargin};"
     >
       <tr>
         <td
@@ -251,8 +252,27 @@ function convertSpacerBlockToHtml(blockData) {
 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, whiteSpace: _whiteSpace, // strip from outer td — pre-wrap on a td preserves editor whitespace
+    const { width, backgroundColor, padding, borderRadius, borderStyle, borderColor, borderWidth, textContainerBackgroundColor, textContainerPadding, fontSize, backgroundImage, whiteSpace: _whiteSpace, // strip from outer td — pre-wrap on a td preserves editor whitespace
     ...rest } = style;
+    // Detect background image or gradient (may live in backgroundImage or customCss).
+    // Same multi-client approach as Grid block: outer wrapper <td> carries the background
+    // via CSS (Gmail/New Outlook), background attribute (Yahoo), and VML (Old Outlook).
+    const bgImageStr = typeof backgroundImage === 'string' ? backgroundImage : '';
+    const customCssStr = rest.customCss || '';
+    const gradientInCustomCss = !bgImageStr.includes('gradient(') && customCssStr.includes('gradient(')
+        ? (customCssStr.match(/(?:linear|radial|conic)-gradient\([^)]+(?:\([^)]*\)[^)]*)*\)/)?.[0] || '')
+        : '';
+    const effectiveGradient = bgImageStr.includes('gradient(') ? bgImageStr : gradientInCustomCss;
+    const isGradient = Boolean(effectiveGradient);
+    const parsedGradient = isGradient ? parseGradient(effectiveGradient) : null;
+    const rawBgImageUrl = !isGradient && bgImageStr
+        ? bgImageStr.replace(/^url\(['"]?/, '').replace(/['"]?\)$/, '')
+        : null;
+    const hasBgImage = Boolean(rawBgImageUrl || isGradient);
+    const fallbackBgColor = textContainerBackgroundColor ||
+        parsedGradient?.fallback ||
+        extractCssFallbackColor(customCssStr) ||
+        '#ffffff';
     // Text box decoration styles (border, background, padding) — no width
     const textBoxStyle = {
         backgroundColor,
@@ -266,11 +286,17 @@ function convertTextBlock(blockData, cellWidthInPx) {
         perChanges: [],
         pxChanges: allPxAttributes,
     });
-    // Outer td styles: layout only, no typography, no white-space
+    // Strip gradient from customCss when it is hoisted to the outer bg wrapper.
+    const innerCustomCss = gradientInCustomCss
+        ? customCssStr.replace(/background-image\s*:[^;]+;?/gi, '').trim()
+        : customCssStr;
+    const restForStyles = gradientInCustomCss ? { ...rest, customCss: innerCustomCss } : rest;
+    // Outer td styles: strip container background when a bg-image wrapper is present
+    // so the outer wrapper's background is not double-applied.
     const styles = buildStyles({
         padding: textContainerPadding,
-        backgroundColor: textContainerBackgroundColor,
-        ...rest,
+        backgroundColor: hasBgImage ? undefined : textContainerBackgroundColor,
+        ...restForStyles,
     }, {
         perChanges: [],
         pxChanges: allPxAttributes,
@@ -298,8 +324,52 @@ function convertTextBlock(blockData, cellWidthInPx) {
     // display:inline-block with a pixel width (e.g. 400px) breaks narrow grid cells.
     const convertedTextBox = `<div style="display:block; width:100%; box-sizing:border-box; ${colorStyle}${fontSizeStyle}${convertedTextStyle}">${processedText.replaceAll(/\n/g, "<br>")}</div>`;
     const safeCellWidth = cellWidthInPx ? Math.min(cellWidthInPx, 600) : undefined;
-    const textContent = appendOutlookSupport(convertedTextBox, styles, visibilityClass, safeCellWidth);
+    // When a bg-image wrapper is present, visibilityClass moves to the outer table.
+    const textContent = appendOutlookSupport(convertedTextBox, styles, hasBgImage ? '' : visibilityClass, safeCellWidth);
     const linkColorStyle = blockTextColor ? `color:${blockTextColor};` : 'color:inherit;';
+    if (hasBgImage) {
+        const msoWidth = cellWidthInPx ? Math.min(cellWidthInPx, 600) : 600;
+        const vmlFill = isGradient
+            ? (() => {
+                const vmlAngle = cssAngleToVml(parsedGradient?.angle || 180);
+                const c1 = parsedGradient?.fallback || '#ffffff';
+                const c2 = parsedGradient?.colors[parsedGradient.colors.length - 1] || c1;
+                return `<v:fill type="gradient" color="${c1}" color2="${c2}" angle="${vmlAngle}" />`;
+            })()
+            : `<v:fill type="frame" src="${rawBgImageUrl}" color="${fallbackBgColor}" />`;
+        const bgCss = isGradient
+            ? `background:${effectiveGradient};`
+            : `background-image:url('${rawBgImageUrl}'); background-position:center center; background-size:cover; background-repeat:no-repeat;`;
+        const wrappedContent = `
+<table border="0" cellpadding="0" cellspacing="0" width="${msoWidth}" role="presentation"
+  style="border-collapse:collapse;width:${msoWidth}px;" class="${visibilityClass}">
+  <tr>
+    <td width="${msoWidth}" bgcolor="${fallbackBgColor}" valign="top"
+      ${!isGradient && rawBgImageUrl ? `background="${rawBgImageUrl}"` : ''}
+      style="width:${msoWidth}px;background-color:${fallbackBgColor};${bgCss}">
+
+      <!--[if gte mso 9]>
+      <v:rect xmlns:v="urn:schemas-microsoft-com:vml"
+        fill="true" stroke="false"
+        style="width:${msoWidth}px;">
+        ${vmlFill}
+        <v:textbox inset="0,0,0,0">
+      <![endif]-->
+
+      ${textContent}
+
+      <!--[if gte mso 9]>
+        </v:textbox>
+      </v:rect>
+      <![endif]-->
+
+    </td>
+  </tr>
+</table>`;
+        return navigateToUrl
+            ? `<a href="${navigateToUrl}" rel="noreferrer noopener" style="${linkColorStyle}text-decoration:none;cursor:pointer;">${wrappedContent}</a>`
+            : wrappedContent;
+    }
     return navigateToUrl
         ? `<a href="${navigateToUrl}" rel="noreferrer noopener" style="${linkColorStyle}text-decoration:none;cursor:pointer;">${textContent}</a>`
         : textContent;
@@ -469,161 +539,138 @@ async function convertImageBlock(blockData, cellWidthInPx) {
         ? `<a href="${navigateToUrl}" target="_blank" rel="noreferrer noopener" style="display:block;">${imageContent}</a>`
         : imageContent;
 }
-function appendOutlookForButton(content, buttonStyle, navigateToUrl, text) {
-    const pad = buttonStyle.buttonPadding || {};
+function appendOutlookForButton(buttonData) {
+    const { style, text, navigateToUrl } = buttonData;
+    const pad = style.buttonPadding || {};
     const padTop = Number.isFinite(pad.top) ? pad.top : 10;
     const padBottom = Number.isFinite(pad.bottom) ? pad.bottom : 10;
     const padLeft = Number.isFinite(pad.left) ? pad.left : 20;
     const padRight = Number.isFinite(pad.right) ? pad.right : 20;
-    const fontSize = buttonStyle.fontSize || 16;
-    const height = typeof buttonStyle.height === "number" && buttonStyle.height > 0
-        ? buttonStyle.height
-        : null;
-    // prevent layout break
-    const minHeight = padTop + padBottom + fontSize;
-    const finalHeight = height ? Math.max(height, minHeight) : null;
-    const borderRadius = buttonStyle.borderRadius || 0;
-    const borderColor = buttonStyle.borderColor || "transparent";
-    const borderWidth = buttonStyle.borderWidth || 0;
-    const borderStyle = buttonStyle.borderStyle || "solid";
-    const bgColor = buttonStyle.buttonColor || "transparent";
-    const color = buttonStyle.color || "#ffffff";
-    const fontFamily = sanitizeFontFamily((0, fontFallback_1.withFontFallback)(buttonStyle.fontFamily));
-    const fontWeight = buttonStyle.fontWeight || 400;
-    const width = typeof buttonStyle.width === "number"
-        ? `width="${buttonStyle.width}"`
-        : "";
-    return `<!--[if mso]>
-<table role="presentation" cellspacing="0" cellpadding="0" border="0" style="display:inline-table;">
+    const fs = style.fontSize || 16;
+    const minHeight = padTop + padBottom + fs;
+    const finalHeight = typeof style.height === "number" && style.height > 0
+        ? Math.max(style.height, minHeight)
+        : minHeight;
+    const safeFF = sanitizeFontFamily((0, fontFallback_1.withFontFallback)(style.fontFamily));
+    const safeColor = style.color || "#ffffff";
+    const bgColor = style.buttonColor || "transparent";
+    const bdColor = style.borderColor || "transparent";
+    const bdStyle = style.borderStyle || "solid";
+    const bw = typeof style.borderWidth === "number" ? style.borderWidth : 0;
+    const br = typeof style.borderRadius === "number" ? style.borderRadius : 0;
+    const fontWeight = style.fontWeight || 400;
+    const containerAlign = style.alignment || style.textAlign || "left";
+    const explicitWidth = typeof style.width === "number" && style.width > 0 ? style.width : 0;
+    const borderCss = bw > 0 ? `border:${bw}px ${bdStyle} ${bdColor};` : "";
+    const widthCss = explicitWidth ? `width:${explicitWidth}px;` : "";
+    // ── Non-MSO: <a display:inline-block> — border-radius works in modern clients ──
+    const nonMsoAnchor = `<!--[if !mso]><!-->
+<a href="${navigateToUrl}"
+   target="_blank" rel="noreferrer noopener"
+   style="display:inline-block;background-color:${bgColor};border-radius:${br}px;${borderCss}color:${safeColor};font-family:${safeFF};font-size:${fs}px;font-weight:${fontWeight};text-decoration:none;padding:${padTop}px ${padRight}px ${padBottom}px ${padLeft}px;line-height:${fs}px;text-align:center;white-space:nowrap;-webkit-text-size-adjust:none;box-sizing:border-box;${widthCss}mso-hide:all;">${text}</a>
+<!--<![endif]-->`;
+    // ── MSO: table-based bulletproof button.
+    // <v:roundrect arcsize="50%"> renders its half-circle arcs as visible bracket shapes
+    // in Outlook, so we use a plain <table>+<td> instead. bgcolor on <td> is reliable in
+    // all classic Outlook versions; border-radius is not (square corners in Outlook).
+    const tdStyleParts = [`padding:${padTop}px ${padRight}px ${padBottom}px ${padLeft}px`];
+    if (bw > 0)
+        tdStyleParts.push(`border:${bw}px ${bdStyle} ${bdColor}`);
+    if (explicitWidth)
+        tdStyleParts.push(`width:${explicitWidth}px`);
+    const tdStyle = tdStyleParts.join(";");
+    const msoButton = `<!--[if mso]>
+<table cellspacing="0" cellpadding="0" border="0">
   <tr>
-    <td align="center"
-        valign="middle"
-        ${width}
-        ${finalHeight ? `height="${finalHeight}"` : ""}
-        bgcolor="${bgColor}"
-        style="
-          ${finalHeight ? `height:${finalHeight}px;` : ""}
-          background-color:${bgColor};
-          border-radius:${borderRadius}px;
-          border:${borderWidth}px ${borderStyle} ${borderColor};
-          overflow:hidden;
-          mso-line-height-rule:exactly;
-        ">
-
-      <table role="presentation" cellspacing="0" cellpadding="0" border="0">
-        <tr>
-          <td align="center" valign="middle"
-              style="padding:${padTop}px ${padRight}px ${padBottom}px ${padLeft}px;">
-
-            <a href="${navigateToUrl}"
-               style="
-                 display:inline-block;
-                 color:${color};
-                 text-decoration:none;
-                 font-family:${fontFamily};
-                 font-size:${fontSize}px;
-                 font-weight:${fontWeight};
-                 line-height:normal;
-               ">
-              ${text}
-            </a>
-
-          </td>
-        </tr>
-      </table>
-
+    <td bgcolor="${bgColor}" style="${tdStyle};">
+      <a href="${navigateToUrl}" target="_blank" rel="noreferrer noopener"
+         style="color:${safeColor};font-family:${safeFF};font-size:${fs}px;font-weight:${fontWeight};text-decoration:none;display:inline-block;line-height:${fs}px;">${text}</a>
     </td>
   </tr>
 </table>
-<![endif]-->
-<!--[if !mso]><!-->
-${content}
-<!--<![endif]-->`;
+<![endif]-->`;
+    const innerContent = containerAlign === "center"
+        ? `<center>${msoButton}${nonMsoAnchor}</center>`
+        : `<div style="text-align:${containerAlign};">${msoButton}${nonMsoAnchor}</div>`;
+    return {
+        innerContent,
+        computed: {
+            fs,
+            fontWeight,
+            containerAlign,
+            padTop,
+            padRight,
+            padBottom,
+            padLeft,
+            explicitWidth,
+            safeColor,
+            bgColor,
+            safeFF,
+            finalHeight,
+            bw,
+            br,
+            bdColor,
+            bdStyle,
+        },
+    };
 }
 function convertButtonBlock(blockData) {
     const { style, props } = blockData.data;
     const { text, navigateToUrl } = props;
-    const { fontFamily, fontSize, fontWeight, textAlign, borderColor, borderRadius, borderWidth, borderStyle, buttonPadding, color, buttonColor, width, height, alignment, padding, backgroundColor: containerBg, margin, } = style;
-    const pad = buttonPadding || {};
-    const padTop = Number.isFinite(pad.top) ? pad.top : 10;
-    const padBottom = Number.isFinite(pad.bottom) ? pad.bottom : 10;
-    const padLeft = Number.isFinite(pad.left) ? pad.left : 20;
-    const padRight = Number.isFinite(pad.right) ? pad.right : 20;
-    const fs = fontSize || 16;
-    // prevent layout break
-    const minHeight = padTop + padBottom + fs;
-    const finalHeight = typeof height === "number" && height > 0
-        ? Math.max(height, minHeight)
-        : null;
-    const safeFF = sanitizeFontFamily((0, fontFallback_1.withFontFallback)(fontFamily));
-    const safeColor = color || "#ffffff";
-    const bgColor = buttonColor || "transparent";
-    const bdColor = borderColor || "transparent";
-    const bdStyle = borderStyle || "solid";
-    const bw = borderWidth || 0;
-    const br = borderRadius || 0;
-    const containerAlign = alignment || textAlign || "left";
-    const widthAttr = typeof width === "number"
-        ? `width="${width}"`
-        : "";
-    // ✅ FIX: no width=100% anywhere
-    const buttonTable = `
-<table role="presentation" cellspacing="0" cellpadding="0" border="0"
-  style="display:inline-table; border-collapse:separate;"
-  ${widthAttr}>
-  <tr>
-    <td
-      align="center"
-      valign="middle"
-      ${finalHeight ? `height="${finalHeight}"` : ""}
-      style="
-        ${finalHeight ? `height:${finalHeight}px;` : ""}
-        background-color:${bgColor};
-        border-radius:${br}px;
-        border:${bw}px ${bdStyle} ${bdColor};
-        overflow:hidden;
-        mso-line-height-rule:exactly;
-      "
-    >
-
-      <table role="presentation" cellspacing="0" cellpadding="0" border="0">
-        <tr>
-          <td align="center" valign="middle"
-              style="padding:${padTop}px ${padRight}px ${padBottom}px ${padLeft}px;">
-
-            <a href="${navigateToUrl}"
-               style="
-                 display:inline-block;
-                 color:${safeColor};
-                 text-decoration:none;
-                 font-family:${safeFF};
-                 font-size:${fs}px;
-                 font-weight:${fontWeight || 400};
-                 line-height:normal;
-                 white-space:nowrap;
-               ">
-              ${text}
-            </a>
-
-          </td>
-        </tr>
-      </table>
-
-    </td>
-  </tr>
-</table>
-`;
-    const aligned = containerAlign === "center"
-        ? `<center>${buttonTable}</center>`
-        : `<div style="text-align:${containerAlign};">${buttonTable}</div>`;
-    const buttonWithOutlook = appendOutlookForButton(aligned, style, navigateToUrl, text);
+    const { fontFamily, fontSize, fontWeight, textAlign, borderColor, borderRadius, borderWidth, borderStyle, buttonPadding, color, buttonColor, width, height, alignment, padding, backgroundColor: containerBg, } = style;
+    const visibilityClass = (0, common_1.getVisibilityClass)(props);
+    const { innerContent, computed } = appendOutlookForButton({
+        style: {
+            fontFamily,
+            fontSize,
+            fontWeight,
+            textAlign,
+            borderColor,
+            borderRadius,
+            borderWidth,
+            borderStyle,
+            buttonPadding,
+            color,
+            buttonColor,
+            width,
+            height,
+            alignment,
+        },
+        text: text || "",
+        navigateToUrl: navigateToUrl || "",
+    });
+    const buttonBlockProps = encodeBlockProps({
+        buttonText: text || '',
+        navigateToUrl: navigateToUrl || '',
+        buttonColor: computed.bgColor,
+        color: computed.safeColor,
+        fontFamily: fontFamily || '',
+        fontSize: computed.fs,
+        fontWeight: computed.fontWeight,
+        alignment: computed.containerAlign,
+        padding: {
+            top: padding?.top || 0,
+            right: padding?.right || 0,
+            bottom: padding?.bottom || 0,
+            left: padding?.left || 0,
+        },
+        buttonPadding: { top: computed.padTop, right: computed.padRight, bottom: computed.padBottom, left: computed.padLeft },
+        width: computed.explicitWidth,
+        height: typeof height === 'number' && height > 0 ? height : 0,
+        backgroundColor: containerBg || '',
+        borderRadius: computed.br,
+        borderColor: computed.bdColor,
+        borderWidth: computed.bw,
+        borderStyle: computed.bdStyle,
+        hideOnDesktop: Boolean(props.hideOnDesktop),
+        hideOnMobile: Boolean(props.hideOnMobile),
+    });
     return `
-<table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation">
+<table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" class="${visibilityClass}" data-block-type="button" data-block-props="${buttonBlockProps}">
   <tr>
-    <td align="${containerAlign}"
-        style="padding:${padding?.top || 0}px ${padding?.right || 0}px ${padding?.bottom || 0}px ${padding?.left || 0}px;
-               background-color:${containerBg || "transparent"};">
-      ${buttonWithOutlook}
+    <td align="${computed.containerAlign}"
+        style="padding:${padding?.top || 0}px ${padding?.right || 0}px ${padding?.bottom || 0}px ${padding?.left || 0}px;background-color:${containerBg || 'transparent'};">
+      ${innerContent}
     </td>
   </tr>
 </table>
@@ -1142,16 +1189,28 @@ async function convertVideoBlock(blockData, cellWidthInPx) {
        <![endif]-->`;
     // Non-Outlook: use a real <img> for the thumbnail so it renders in Gmail / Yahoo / webmail.
     // background-image on <table> is stripped by virtually every email client.
-    // position:absolute for the play-button overlay is safe here because this block
-    // is already inside <!--[if !mso]> — Outlook is handled separately via VML above.
     const thumbnailW = Math.round(innerContainerWidth);
     const thumbnailH = Math.round(calculatedHeight);
-    const playMarginTop = -Math.round(playIconHeight / 2);
-    const playMarginLeft = -Math.round(playIconWidth / 2);
     const borderAttr = borderWidth > 0 ? `border:${borderWidth}px ${style?.borderStyle || "solid"} ${borderColor};` : "border:0;";
     const radiusAttr = borderRadius > 0 ? `border-radius:${borderRadius}px; overflow:hidden;` : "";
+    // Overlay the play button using negative margin-top + line-height centering.
+    // This avoids both position:absolute (stripped by Gmail/Yahoo) and
+    // height:0/overflow:visible (clipped by New Outlook at <td> boundaries).
+    // The play button <a> is pulled up by margin-top:-thumbnailH to sit over the thumbnail,
+    // then line-height:thumbnailH + vertical-align:middle centres the icon vertically.
+    // Elements later in DOM flow render on top of earlier ones, so the play icon overlays the image.
+    const playButtonHtml = `<a href="${videoLink}" target="_blank" data-play-button="true"
+      style="display:block; margin-top:-${thumbnailH}px; text-align:center; line-height:${thumbnailH}px; font-size:0; text-decoration:none; border:0; outline:none;">
+      <img
+        src="https://app-rsrc.getbee.io/public/resources/components/widgetBar/video-content-icon-sets/light/type-01.png"
+        width="${playIconWidth}"
+        height="${playIconHeight}"
+        alt="Play"
+        style="display:inline-block; vertical-align:middle; border:0; outline:none;"
+      />
+    </a>`;
     const nonOutlookVideoContent = `<!--[if !mso]><!-->
-<div style="display:block; width:100%; max-width:${thumbnailW}px; position:relative; line-height:0; font-size:0; ${borderAttr}${radiusAttr}">
+<div style="display:block; width:100%; max-width:${thumbnailW}px; line-height:0; font-size:0; ${borderAttr}${radiusAttr}">
   <a href="${videoLink}" target="_blank" style="display:block; text-decoration:none; line-height:0; font-size:0;">
     <img
       src="${resolvedThumbnail}"
@@ -1160,21 +1219,32 @@ async function convertVideoBlock(blockData, cellWidthInPx) {
       alt="${altText || "Video"}"
       style="display:block; width:100%; max-width:${thumbnailW}px; height:auto; border:0;"
     />
-    <img
-      src="https://app-rsrc.getbee.io/public/resources/components/widgetBar/video-content-icon-sets/light/type-01.png"
-      width="${playIconWidth}"
-      alt="Play"
-      style="display:block; position:absolute; top:50%; left:50%; margin-top:${playMarginTop}px; margin-left:${playMarginLeft}px; border:0; outline:none;"
-    />
   </a>
+  ${playButtonHtml}
 </div>
 <!--<![endif]-->`;
     const videoContent = `${outlookVideoContent}${nonOutlookVideoContent}`;
+    const videoBlockProps = encodeBlockProps({
+        videoUrl: videoUrl || '',
+        youtubeVideoUrl: youtubeVideoUrl || '',
+        thumbnailUrl: thumbnailUrl || resolvedThumbnail,
+        altText: altText || '',
+        width: parseFloat(percentWidth) || 100,
+        padding: style?.padding || { top: 0, right: 0, bottom: 0, left: 0 },
+        backgroundColor: style?.backgroundColor || '',
+        textAlign: style?.textAlign || 'left',
+        borderRadius: style?.borderRadius || 0,
+        borderColor: style?.borderColor || '',
+        borderWidth: style?.borderWidth || 0,
+        borderStyle: style?.borderStyle || 'none',
+        hideOnDesktop: Boolean(props.hideOnDesktop),
+        hideOnMobile: Boolean(props.hideOnMobile),
+    });
     const wrapperHtml = `
-  <table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="margin:0; padding:0; border-collapse: collapse; max-width:600px;" 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}" data-block-type="video" data-block-props="${videoBlockProps}">
     <tr>
       <td align="${style?.textAlign || "left"}" style="padding:0; ${outerContainerStyles}">
-        <table border="0" cellpadding="0" cellspacing="0" role="presentation" 
+        <table border="0" cellpadding="0" cellspacing="0" role="presentation"
           align="${style?.textAlign || "left"}"
           style="
             margin:0;

package/package.json

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