email-builder-utils 1.1.40 → 1.1.44

package/dist/utils/jsonToHTML.js

@@ -3,9 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.tableCommonStyle = void 0;
 exports.convertToHtml = convertToHtml;
 exports.convertVideoBlock = convertVideoBlock;
-const jimp_1 = require("jimp");
 const types_1 = require("../types");
 const common_1 = require("./common");
+const fontFallback_1 = require("./fontFallback");
 const addPxToAttributes = [
     "fontSize",
     "lineHeight",
@@ -15,23 +15,18 @@ const addPxToAttributes = [
 const addPxOrPerToAttributes = ["width", "height"];
 const allPxAttributes = [...addPxToAttributes, ...addPxOrPerToAttributes];
 exports.tableCommonStyle = "border-collapse:collapse; table-layout:fixed;";
-function cleanJson(obj) {
-    if (typeof obj !== "object" || obj === null)
-        return obj;
-    if (Array.isArray(obj))
-        return obj.map(cleanJson);
-    return Object.fromEntries(Object.entries(obj)
-        .filter(([_, value]) => value !== undefined && value !== null && value !== "")
-        .map(([key, value]) => [key, cleanJson(value)]));
+function encodeBlockProps(props) {
+    return JSON.stringify(props)
+        .replace(/&/g, '&')
+        .replace(/"/g, '"');
 }
-function jsonToPlainString(obj) {
-    if (typeof obj !== "object" || obj === null)
-        return String(obj);
-    if (Array.isArray(obj))
-        return obj.map(jsonToPlainString).join(", ");
-    return Object.entries(obj)
-        .map(([key, value]) => `${key}:${jsonToPlainString(value)}; `)
-        .join("");
+async function loadImageNaturalDimensions(imageUrl) {
+    return new Promise((resolve, reject) => {
+        const img = new Image();
+        img.onload = () => resolve({ width: img.naturalWidth, height: img.naturalHeight });
+        img.onerror = () => reject(new Error(`Failed to load image: ${imageUrl}`));
+        img.src = imageUrl;
+    });
 }
 function buildStyles(style, { pxChanges, perChanges }) {
     if (!style)
@@ -47,7 +42,9 @@ function buildStyles(style, { pxChanges, perChanges }) {
             "childWidth",
             "visibility",
             "hideOnMobile",
-            "hideOnDesktop"
+            "hideOnDesktop",
+            "label",
+            "alignment",
         ];
         if (INVALID_KEYS.includes(key))
             return;
@@ -66,11 +63,26 @@ function buildStyles(style, { pxChanges, perChanges }) {
             };
             value = `${safePad.top}px ${safePad.right}px ${safePad.bottom}px ${safePad.left}px`;
         }
+        if (key === "fontFamily" && typeof value === "string") {
+            value = (0, fontFallback_1.withFontFallback)(value).replace(/"/g, "'");
+        }
+        // Wrap backgroundImage values in url() if not already wrapped — skip gradients
+        if (key === "backgroundImage" && typeof value === "string"
+            && !String(value).startsWith("url(")
+            && !String(value).toLowerCase().includes("gradient(")) {
+            value = `url('${value}')`;
+        }
+        // lineHeight: values >= 4 are pixel values; smaller values are unitless multipliers (e.g. 1.5)
+        if (key === "lineHeight" && typeof value === "number") {
+            stylesObj["line-height"] = value >= 4 ? `${value}px` : String(value);
+            return;
+        }
         const cssKey = key.replace(/([A-Z])/g, "-$1").toLowerCase();
         // FIX 2 — Sanitize invalid px/per values
         if (pxChanges.includes(key)) {
             if (typeof value === "number") {
-                stylesObj[cssKey] = `${value}px`;
+                const rounded = Math.round(value * 100) / 100;
+                stylesObj[cssKey] = `${rounded}px`;
             }
             else if (typeof value === "string" && value.includes("null")) {
                 // Skip invalid styles
@@ -92,12 +104,17 @@ function buildStyles(style, { pxChanges, perChanges }) {
             stylesObj[cssKey] = value;
         }
     });
-    return `${jsonToPlainString(cleanJson(stylesObj))}${style.customCss || ""}`.trim();
+    const parts = Object.entries(stylesObj)
+        .filter(([, v]) => v !== undefined && v !== null && v !== '')
+        .map(([k, v]) => `${k}:${v}`);
+    if (style.customCss)
+        parts.push(style.customCss);
+    return parts.join('; ').replace(/;\s*$/, '').trim();
 }
 async function convertToHtml(blockData, rootData, cellWidthInPx) {
     switch (blockData.type) {
         case types_1.BlockType.TEXT:
-            return convertTextBlock(blockData);
+            return convertTextBlock(blockData, cellWidthInPx);
         case types_1.BlockType.IMAGE:
             return await convertImageBlock(blockData, cellWidthInPx);
         case types_1.BlockType.BUTTON:
@@ -118,26 +135,36 @@ async function convertToHtml(blockData, rootData, cellWidthInPx) {
             return "";
     }
 }
-// function appendOutlookSupport(content: string, contentStyle: string) {
-//   return `
-//   <table width="100%" style="${tableCommonStyle}"><tr><td style="${contentStyle}">${content}</td></tr></table>
-//   `;
-// }
-function appendOutlookSupport(content, contentStyle, className) {
+function appendOutlookSupport(content, contentStyle, className, msoWidth) {
     const visibilityClass = className || "";
     const shouldHideInOutlook = visibilityClass.includes("hide-desktop");
     if (shouldHideInOutlook) {
-        return `
-    <!--[if !mso]><!-->
-    <table width="100%" style="${exports.tableCommonStyle}" class="${visibilityClass}"><tr><td style="${contentStyle}">${content}</td></tr></table>
-    <!--<![endif]-->
+        return `
+    <!--[if !mso]><!-->
+    <table width="100%" style="${exports.tableCommonStyle}" class="${visibilityClass}"><tr><td style="${contentStyle}">${content}</td></tr></table>
+    <!--<![endif]-->
+    `;
+    }
+    // When an explicit pixel width is provided (e.g. inside a column cell), use dual MSO/non-MSO
+    // tables. Old Outlook (Word engine) ignores max-width and can resolve width="100%" to the
+    // full email width (600px) rather than the column width, causing images/buttons to expand.
+    if (msoWidth) {
+        return `
+<!--[if mso]>
+<table border="0" cellpadding="0" cellspacing="0" width="${msoWidth}" style="border-collapse:collapse;width:${msoWidth}px;"><tr><td width="${msoWidth}" style="${contentStyle}">
+<![endif]-->
+<!--[if !mso]><!-->
+<table width="100%" border="0" cellpadding="0" cellspacing="0" style="${exports.tableCommonStyle}; max-width:600px;" class="${visibilityClass}"><tr><td width="100%" style="${contentStyle}">
+<!--<![endif]-->
+${content}
+<!--[if mso]></td></tr></table><![endif]-->
+<!--[if !mso]><!-->
+</td></tr></table>
+<!--<![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%" border="0" cellpadding="0" cellspacing="0" style="${exports.tableCommonStyle}; max-width:600px;" class="${visibilityClass}"><tr><td width="100%" style="${contentStyle}">${content}</td></tr></table>
+    return `
+  <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) {
@@ -156,21 +183,21 @@ function convertDividerBlockToHtml(blockData) {
     ]
         .filter(Boolean)
         .join(" ");
-    const dividerContent = `
-    <table
-      width="${dividerWidth}%"
-      cellpadding="0"
-      cellspacing="0"
-    >
-      <tr>
-        <td
-          height="${thickness}"
-          style="font-size:1px; line-height:1px; background:${dividerColor}; width:${dividerWidth};"
-        >
-          &nbsp;
-        </td>
-      </tr>
-    </table>
+    const dividerContent = `
+    <table
+      width="${dividerWidth}%"
+      cellpadding="0"
+      cellspacing="0"
+    >
+      <tr>
+        <td
+          height="${thickness}"
+          style="font-size:1px; line-height:1px; background:${dividerColor}; width:${dividerWidth};"
+        >
+          &nbsp;
+        </td>
+      </tr>
+    </table>
   `;
     return appendOutlookSupport(dividerContent, convertedStyle, visibilityClass);
 }
@@ -183,28 +210,13 @@ function convertSpacerBlockToHtml(blockData) {
     });
     return appendOutlookSupport(``, styles, visibilityClass);
 }
-// function convertTextBlock(blockData: IBlockData) {
-//   const { style, props } = blockData.data;
-//   const styles = buildStyles(style, {
-//     perChanges: [],
-//     pxChanges: allPxAttributes,
-//   });
-//   const text = props.text || "";
-//   const navigateToUrl = props.navigateToUrl || "";
-//   const textContent = appendOutlookSupport(
-//     text.replaceAll(/\n/g, "<br>"),
-//     styles
-//   );
-//   return navigateToUrl
-//     ? `<a href="${navigateToUrl}" rel="noreferrer noopener" style="color:inherit; text-decoration:none; cursor:pointer;">${textContent}</a>`
-//     : textContent;
-// }
-function convertTextBlock(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, ...rest } = style;
+    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
+    ...rest } = style;
+    // Text box decoration styles (border, background, padding) — no width
     const textBoxStyle = {
-        width,
         backgroundColor,
         padding,
         borderRadius,
@@ -216,6 +228,7 @@ function convertTextBlock(blockData) {
         perChanges: [],
         pxChanges: allPxAttributes,
     });
+    // Outer td styles: layout only, no typography, no white-space
     const styles = buildStyles({
         padding: textContainerPadding,
         backgroundColor: textContainerBackgroundColor,
@@ -225,11 +238,15 @@ function convertTextBlock(blockData) {
         pxChanges: allPxAttributes,
     });
     const sanitizedText = (props.text ?? "")
-        .replaceAll(/<p>/g, "<div>")
-        .replaceAll(/<\/p>/g, "</div>");
+        .replace(/<p(\s[^>]*)?>/gi, (_, attrs) => `<div${attrs || ""}>`)
+        .replace(/<\/p>/gi, "</div>");
     const navigateToUrl = props.navigateToUrl || "";
-    const convertedTextBox = `<div style="display: inline-block; max-width: 100%; box-sizing: border-box; ${convertedTextStyle}">${sanitizedText.replaceAll(/\n/g, "<br>")}</div>`;
-    const textContent = appendOutlookSupport(convertedTextBox, styles, visibilityClass);
+    const fontSizeStyle = fontSize != null ? `font-size:${fontSize}px;` : "";
+    // Use display:block + width:100% so text fills the column naturally.
+    // 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; ${fontSizeStyle}${convertedTextStyle}">${sanitizedText.replaceAll(/\n/g, "<br>")}</div>`;
+    const safeCellWidth = cellWidthInPx ? Math.min(cellWidthInPx, 600) : undefined;
+    const textContent = appendOutlookSupport(convertedTextBox, styles, visibilityClass, safeCellWidth);
     return navigateToUrl
         ? `<a href="${navigateToUrl}" rel="noreferrer noopener" style="color:inherit;text-decoration:none;cursor:pointer;">${textContent}</a>`
         : textContent;
@@ -243,15 +260,21 @@ async function appendOutlookForImage(content, outerContainerWidth, innerContaine
         vmlWidth = finalWidth;
         vmlHeight = finalHeight;
     }
+    else if (imageUrl) {
+        try {
+            const { width: originalWidth, height: originalHeight } = await loadImageNaturalDimensions(imageUrl);
+            const widthScalingFactor = Math.min(outerContainerWidth / originalWidth, innerContainerWidth / originalWidth, 1);
+            vmlWidth = Math.round(originalWidth * widthScalingFactor);
+            vmlHeight = Math.round(originalHeight * widthScalingFactor);
+        }
+        catch {
+            vmlWidth = innerContainerWidth;
+            vmlHeight = innerContainerWidth;
+        }
+    }
     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);
+        vmlWidth = innerContainerWidth;
+        vmlHeight = innerContainerWidth;
     }
     const borderWidth = parseInt(style?.borderWidth) || 0;
     const borderColor = style?.borderColor || "transparent";
@@ -269,21 +292,21 @@ async function appendOutlookForImage(content, outerContainerWidth, innerContaine
     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>
+        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 {
@@ -292,31 +315,41 @@ async function appendOutlookForImage(content, outerContainerWidth, innerContaine
         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>
+        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]><!-->
-      ${content}
-    <!--<![endif]-->
+    return `
+    ${outlookImage}
+    <!--[if !mso]><!-->
+      ${content}
+    <!--<![endif]-->
   `;
 }
 async function computeScaledDimensions(imageUrl, maxContainerWidthPx) {
-    const image = await jimp_1.Jimp.read(imageUrl);
-    const originalWidth = image.bitmap.width;
-    const originalHeight = image.bitmap.height;
-    const widthScalingFactor = Math.min(maxContainerWidthPx / originalWidth, 1);
-    const scaledWidth = Math.round(originalWidth * widthScalingFactor);
-    const scaledHeight = Math.round(originalHeight * widthScalingFactor);
-    return { originalWidth, originalHeight, scaledWidth, scaledHeight };
+    if (!imageUrl) {
+        const w = Math.max(maxContainerWidthPx, 1);
+        const h = Math.round(w * (2 / 3));
+        return { originalWidth: w, originalHeight: h, scaledWidth: w, scaledHeight: h };
+    }
+    try {
+        const { width: originalWidth, height: originalHeight } = await loadImageNaturalDimensions(imageUrl);
+        const widthScalingFactor = Math.min(maxContainerWidthPx / originalWidth, 1);
+        const scaledWidth = Math.round(originalWidth * widthScalingFactor);
+        const scaledHeight = Math.round(originalHeight * widthScalingFactor);
+        return { originalWidth, originalHeight, scaledWidth, scaledHeight };
+    }
+    catch {
+        const w = Math.max(maxContainerWidthPx, 1);
+        const h = Math.round(w * (2 / 3));
+        return { originalWidth: w, originalHeight: h, scaledWidth: w, scaledHeight: h };
+    }
 }
 async function convertImageBlock(blockData, cellWidthInPx) {
     const { style, props } = blockData.data;
@@ -359,83 +392,302 @@ async function convertImageBlock(blockData, cellWidthInPx) {
     // 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 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 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>`;
+    // Non-MSO wrapper: display:block removes the phantom inline-baseline gap that
+    // display:inline-block creates in Gmail / Apple Mail / Yahoo between images.
+    // margin handles alignment since text-align won't move block elements.
+    const imgTextAlign = containerStyle.textAlign || "left";
+    const imgMargin = imgTextAlign === "center" ? "margin:0 auto;" :
+        imgTextAlign === "right" ? "margin-left:auto; margin-right:0;" : "";
+    // OUTLOOK FIX: Use finalWidth (the actual displayed size) as max-width so the div
+    // doesn't claim more space than the image occupies. originalWidth is the natural
+    // image size (e.g. 636px for the Beefree logo rendered at 35px) which was
+    // misleadingly large and could confuse some rendering engines.
+    const nonMsoWrapper = `<div style="display:block; width:${percentWidth}; max-width:${finalWidth}px; line-height:0; font-size:0; ${imgMargin}">${imageElement}</div>`;
     // OUTLOOK FIX: Generate VML with corrected dimensions
     const outlookImage = await appendOutlookForImage(nonMsoWrapper, safeCellWidth, innerContainerWidth, imageUrl, style, finalWidth, finalHeight);
-    const imageContent = appendOutlookSupport(outlookImage, containerStyles, visibilityClass);
+    const imageContent = appendOutlookSupport(outlookImage, containerStyles, visibilityClass, safeCellWidth);
     return navigateToUrl
         ? `<a href="${navigateToUrl}" target="_blank" rel="noreferrer noopener" style="display:block;">${imageContent}</a>`
         : imageContent;
 }
 function appendOutlookForButton(content, buttonStyle, navigateToUrl, text) {
-    const { width = 200, height = 44, borderRadius = 0, borderColor = "transparent", borderWidth = 0, buttonColor = "none", buttonPadding = { top: 0, bottom: 0, left: 0, right: 0 }, color = "#000000", fontFamily = "Arial, sans-serif", fontSize = 16, fontWeight = 400, } = buttonStyle;
-    const borderAttributes = borderWidth > 0
-        ? `strokeweight="${borderWidth}px" strokecolor="${borderColor}"`
-        : `stroked="false"`;
-    return `
-<!--[if mso]>
-<v:${borderRadius ? "roundrect" : "rect"} xmlns:v="urn:schemas-microsoft-com:vml" href="${navigateToUrl}"
-  style="height:${height}px;v-text-anchor:middle;width:${width}px;"
-  arcsize="${borderRadius / height}" ${borderAttributes}
-  fillcolor="${buttonColor}">
-  <w:anchorlock/>
-  <v:textbox inset="${buttonPadding.top}px,${buttonPadding.left}px,${buttonPadding.bottom}px,${buttonPadding.right}px">
-    <center style="font-family:${fontFamily};font-size:${fontSize}px;font-weight:${fontWeight};color:${color};">
-      ${text}
-    </center>
-  </v:textbox>
-</v:${borderRadius ? "roundrect" : "rect"}>
-<![endif]-->
-<!--[if !mso]><!-->
-  ${content}
-<!--<![endif]-->
-`;
+    const pad = buttonStyle.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 = (0, fontFallback_1.withFontFallback)(buttonStyle.fontFamily).replace(/"/g, "'");
+    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;">
+  <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>
+  </tr>
+</table>
+<![endif]-->
+<!--[if !mso]><!-->
+${content}
+<!--<![endif]-->`;
 }
 function convertButtonBlock(blockData) {
     const { style, props } = blockData.data;
     const { text, navigateToUrl } = props;
-    const visibilityClass = (0, common_1.getVisibilityClass)(props);
-    const { fontFamily, fontSize, fontWeight, borderColor, borderRadius, borderWidth, borderStyle, buttonPadding, color, buttonColor, width, height, ...rest } = style;
-    const buttonStyle = {
-        width,
-        height,
-        fontFamily,
-        fontSize,
-        fontWeight,
-        borderColor,
-        borderRadius,
-        borderWidth,
-        borderStyle,
-        padding: buttonPadding,
-        color,
-        backgroundColor: buttonColor,
+    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 = (0, fontFallback_1.withFontFallback)(fontFamily).replace(/"/g, "'");
+    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);
+    return `
+<table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation">
+  <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>
+  </tr>
+</table>
+`;
+}
+// Words inside a gradient() that are NOT color names
+const GRADIENT_KEYWORDS = new Set([
+    'linear', 'radial', 'conic', 'gradient',
+    'to', 'at', 'top', 'bottom', 'left', 'right', 'center',
+    'closest', 'farthest', 'corner', 'side', 'circle', 'ellipse',
+    'deg', 'turn', 'rad', 'grad', 'from', 'in',
+    'url', // url() prefix sometimes appears when gradient is wrapped incorrectly
+]);
+/** Extract the first color stop (hex, rgb, or named CSS color) from a gradient string. */
+function firstGradientColor(gradient) {
+    const tokenRe = /#[0-9a-fA-F]{3,8}|rgba?\([^)]+\)|([a-zA-Z-]+)/g;
+    let m;
+    while ((m = tokenRe.exec(gradient)) !== null) {
+        const namedWord = m[1];
+        if (namedWord) {
+            if (!GRADIENT_KEYWORDS.has(namedWord.toLowerCase()))
+                return namedWord;
+        }
+        else {
+            return m[0]; // hex or rgb()
+        }
+    }
+    return '';
+}
+/**
+ * Extract the first solid-color stop from a CSS gradient in customCss.
+ * Used as a MSO/Outlook bgcolor fallback. Handles hex, rgb, and named colors.
+ */
+function extractCssFallbackColor(customCss) {
+    if (!customCss)
+        return '';
+    const gradientMatch = customCss.match(/(?:linear|radial|conic)-gradient\(([^)]+(?:\([^)]*\)[^)]*)*)\)/);
+    if (!gradientMatch)
+        return '';
+    return firstGradientColor(gradientMatch[1]);
+}
+function parseGradient(gradient) {
+    if (!gradient)
+        return null;
+    const lower = gradient.toLowerCase();
+    // Determine angle from deg value or direction keyword
+    const degMatch = gradient.match(/(\d+(?:\.\d+)?)deg/);
+    let angle = 180;
+    if (degMatch) {
+        angle = parseFloat(degMatch[1]);
+    }
+    else if (lower.includes('to right'))
+        angle = 90;
+    else if (lower.includes('to left'))
+        angle = 270;
+    else if (lower.includes('to top'))
+        angle = 0;
+    // 'to bottom' and bare gradient() both default to 180
+    // Extract ALL color tokens: hex, rgb/rgba, and named CSS color words
+    const colors = [];
+    const tokenRe = /#[0-9a-fA-F]{3,8}|rgba?\([^)]+\)|([a-zA-Z-]+)/g;
+    let m;
+    while ((m = tokenRe.exec(gradient)) !== null) {
+        const namedWord = m[1];
+        if (namedWord) {
+            if (!GRADIENT_KEYWORDS.has(namedWord.toLowerCase()))
+                colors.push(namedWord);
+        }
+        else {
+            colors.push(m[0]);
+        }
+    }
+    return {
+        angle,
+        colors,
+        fallback: colors[0] || '#ffffff',
     };
-    const convertedButtonStyle = buildStyles(buttonStyle, {
-        perChanges: [],
-        pxChanges: allPxAttributes,
-    });
-    const convertedStyles = buildStyles({ maxWidth: "100%", boxSizing: "border-box", ...rest }, {
-        perChanges: [],
-        pxChanges: allPxAttributes,
-    });
-    const buttonElement = `<a href="${navigateToUrl}" rel="noreferrer noopener" style="display:inline-block; text-decoration:none; cursor:pointer;"><button style="${convertedButtonStyle}">${text}</button></a>`;
-    const buttonContent = appendOutlookSupport(appendOutlookForButton(buttonElement, style, navigateToUrl, text), convertedStyles, visibilityClass);
-    return buttonContent;
+}
+function cssAngleToVml(angle) {
+    return (angle + 90) % 360;
 }
 async function convertGridBlock(blockData, rootData, cellWidthInPx) {
     const { style = {}, childrenIds = [], props } = blockData.data;
     const { columns = 1, cellWidths = [], responsive = true } = props;
-    const { columnGap = 0, ...restStyle } = style;
+    const { columnGap = 0, backgroundImage, backgroundColor, ...restStyle } = style;
     const gridVisibilityClass = (0, common_1.getVisibilityClass)(props);
-    // FIX: avoid table-layout:fixed – causes shrink in many clients
-    const tableStyles = buildStyles(restStyle, {
+    // Detect gradient — check both backgroundImage prop and customCss (gradient may land in
+    // customCss when the block was built via CSS shorthand or custom CSS input).
+    const bgImageStr = typeof backgroundImage === "string" ? backgroundImage : '';
+    const customCssStr = restStyle.customCss || '';
+    // Extract gradient string from customCss if not already in backgroundImage
+    const gradientInCustomCss = !bgImageStr.includes('gradient(') && customCssStr.includes('gradient(')
+        ? (customCssStr.match(/(?:linear|radial|conic)-gradient\([^)]+(?:\([^)]*\)[^)]*)*\)/)?.[0] || '')
+        : '';
+    const effectiveGradient = bgImageStr.includes('gradient(')
+        ? bgImageStr
+        : gradientInCustomCss;
+    const isGradient = Boolean(effectiveGradient);
+    const parsedGradient = isGradient ? parseGradient(effectiveGradient) : null;
+    const fallbackBgColor = backgroundColor ||
+        parsedGradient?.fallback ||
+        extractCssFallbackColor(customCssStr) ||
+        "#ffffff";
+    const rawBgImageUrl = !isGradient && bgImageStr
+        ? bgImageStr.replace(/^url\(['"]?/, "").replace(/['"]?\)$/, "")
+        : null;
+    // When gradient came from customCss, strip background-image from customCss so it
+    // doesn't duplicate into the inner table style (the outer <td> wrapper carries it).
+    const innerCustomCss = gradientInCustomCss
+        ? customCssStr.replace(/background-image\s*:[^;]+;?/gi, '').trim()
+        : customCssStr;
+    // Build inner table styles — when gradient/bg-image is on the outer wrapper, strip
+    // background props from the inner table so the outer <td> background shows through.
+    const innerRestStyle = (rawBgImageUrl || isGradient)
+        ? { ...restStyle, customCss: innerCustomCss, backgroundSize: undefined, backgroundPosition: undefined, backgroundRepeat: undefined }
+        : { ...restStyle, customCss: innerCustomCss };
+    const tableStyles = buildStyles({ backgroundColor: (rawBgImageUrl || isGradient) ? undefined : backgroundColor, ...innerRestStyle }, {
         perChanges: [],
         pxChanges: allPxAttributes,
     });
@@ -443,45 +695,58 @@ async function convertGridBlock(blockData, rootData, cellWidthInPx) {
     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="${msoTableWidth}"
-     style="border-collapse:separate;border-spacing:${columnGap}px;width:${msoTableWidth}px;"
-     class="${gridVisibilityClass}">
-  <![endif]-->
-  <!--[if !mso]><!-->
-  <table border="0" cellpadding="0" cellspacing="${columnGap}" width="100%"
-     role="presentation"
-     style="border-collapse:separate;border-spacing:${columnGap}px; ${tableStyles}; max-width:600px;"
-     class="${gridVisibilityClass}">
-  <!--<![endif]-->
+    // When a background image/gradient is present, the background is applied on an outer
+    // wrapper <td> (see bottom of function). The inner grid tables must be clean.
+    // When no background, the MSO table gets bgcolor for solid-color sections.
+    const msoBgColor = !rawBgImageUrl && !isGradient
+        ? (backgroundColor || '')
+        : '';
+    const msoBgAttr = msoBgColor ? ` bgcolor="${msoBgColor}"` : '';
+    const msoBgStyle = msoBgColor ? `background-color:${msoBgColor};` : '';
+    // Inner tables must be explicitly transparent when outer <td> carries the background.
+    const innerBgTransparent = (rawBgImageUrl || isGradient)
+        ? 'background-color:transparent;'
+        : '';
+    const nonMsoBgAttr = !rawBgImageUrl && !isGradient && backgroundColor ? ` bgcolor="${backgroundColor}"` : '';
+    let html = `
+  <!--[if mso]>
+  <table border="0" cellpadding="0" cellspacing="0" width="${msoTableWidth}"${msoBgAttr}
+     style="border-collapse:collapse;width:${msoTableWidth}px;${msoBgStyle}${innerBgTransparent}"
+     class="${gridVisibilityClass}">
+  <![endif]-->
+  <!--[if !mso]><!-->
+  <table border="0" cellpadding="0" cellspacing="0" width="100%"
+     role="presentation"${nonMsoBgAttr}
+     style="border-collapse:collapse; ${innerBgTransparent}${tableStyles}; max-width:600px;"
+     class="${gridVisibilityClass}">
+  <!--<![endif]-->
   `;
     for (let r = 0; r < visualRows; r++) {
         html += "<tr>";
-        // COUNT visible cells only
+        // COUNT visible cells and find last visible column index
         let visibleCells = 0;
+        let lastVisibleCol = 0;
         const rowIds = [];
         for (let c = 0; c < columns; c++) {
             const idx = r * columns + c;
             const id = childrenIds[idx] ?? null;
             rowIds.push(id);
-            if (id) {
-                const child = rootData[id];
-                const isHidden = child?.data?.props?.hideOnDesktop;
-                if (!isHidden)
-                    visibleCells++;
+            const child = id ? rootData[id] : null;
+            const isHidden = child?.data?.props?.hideOnDesktop;
+            if (!isHidden) {
+                visibleCells++;
+                lastVisibleCol = c;
             }
         }
-        // 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
+        // Reserve pixel space for spacer tds between visible cells (N-1 gaps for N visible cells)
+        const totalGapPx = columnGap * Math.max(visibleCells - 1, 0);
+        const adjustedTableWidth = Math.max(msoTableWidth - totalGapPx, 1);
         let totalWidth = 0;
         const cellWidthPercents = [];
         for (let c = 0; c < columns; c++) {
             const id = rowIds[c];
             let widthPercent = cellWidths[c] ?? safeWidth;
-            // Validate width
             if (widthPercent <= 0 || widthPercent > 100) {
                 widthPercent = safeWidth;
             }
@@ -494,62 +759,115 @@ async function convertGridBlock(blockData, rootData, cellWidthInPx) {
                 }
             }
         }
-        // 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);
+            // Cell pixel width is a share of the gap-adjusted table width
+            const cellWidthPx = Math.round((widthPercent / 100) * adjustedTableWidth);
             if (id) {
                 const child = rootData[id];
                 const { style: cellStyle = {}, props: childProps = {} } = child.data;
                 const verticalAlign = cellStyle.verticalAlign || "top";
                 const childVisible = !childProps.hideOnDesktop;
                 const visibilityClass = (0, common_1.getVisibilityClass)(childProps);
-                // 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)}%"
-            class="${[
-                        responsive ? "stack-column" : "",
-                        visibilityClass,
-                    ].filter(Boolean).join(" ")}"
-            style="width:${cellWidthPx}px;vertical-align:${verticalAlign};word-break:break-word;${styles}"
-          >
-            ${childHtml}
+                    const { html: childHtml, styles } = await convertGridCellBlock(child, rootData, widthPercent, adjustedTableWidth);
+                    // bgcolor on the cell <td> ensures background-color survives Outlook
+                    // compose paste (Word/Web editors strip CSS but keep bgcolor attribute).
+                    const cellBgColor = cellStyle.backgroundColor || '';
+                    const cellBgAttr = cellBgColor ? ` bgcolor="${cellBgColor}"` : '';
+                    html += `
+          <td
+            width="${cellWidthPx}"${cellBgAttr}
+            class="${[responsive ? "stack-column" : "", visibilityClass].filter(Boolean).join(" ")}"
+            style="width:${cellWidthPx}px;vertical-align:${verticalAlign};word-break:break-word;${styles}"
+          >
+            ${childHtml}
           </td>`;
+                    // Spacer td between columns — fixed pixel width, invisible to screen readers
+                    if (columnGap > 0 && c !== lastVisibleCol) {
+                        html += `<td width="${columnGap}" style="width:${columnGap}px;font-size:0;line-height:0;padding:0;" aria-hidden="true"></td>`;
+                    }
                 }
             }
             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)}%"
-            ${responsive ? 'class="stack-column"' : ""}
-            style="width:${cellWidthPx}px;vertical-align:top;">
+                html += `
+        <td width="${cellWidthPx}"
+            ${responsive ? 'class="stack-column"' : ""}
+            style="width:${cellWidthPx}px;vertical-align:top;">
         </td>`;
+                if (columnGap > 0 && c !== lastVisibleCol) {
+                    html += `<td width="${columnGap}" style="width:${columnGap}px;font-size:0;line-height:0;padding:0;" aria-hidden="true"></td>`;
+                }
             }
         }
         html += "</tr>";
     }
     // Close both MSO and non-MSO tables
-    html += `
-  <!--[if mso]>
-  </table>
-  <![endif]-->
-  <!--[if !mso]><!-->
-  </table>
-  <!--<![endif]-->
+    html += `
+  <!--[if mso]>
+  </table>
+  <![endif]-->
+  <!--[if !mso]><!-->
+  </table>
+  <!--<![endif]-->
   `;
+    // ── Background image: canonical multi-client approach ────────────────────
+    //
+    // Problem: `background-image` on a <table> element is stripped by:
+    //   • New Outlook Mac / Windows (Chromium-based app)
+    //   • Outlook.com
+    //   • Old Outlook (Word engine) — ignores CSS entirely
+    //
+    // Solution: wrap the grid in an outer <table><tr><td> where the <td> carries
+    // the background. Different clients pick it up via different mechanisms:
+    //
+    //   background="" attribute on <td>  → Yahoo Mail, older webmail
+    //   CSS background-image on <td>     → Gmail, Apple Mail, new Outlook Mac ✓
+    //   VML v:rect inside the <td>       → Old Outlook (Word engine) ✓
+    //
+    // The inner grid tables have NO background so the outer <td> bg shows through.
+    if (rawBgImageUrl || isGradient) {
+        const vmlFill = isGradient
+            ? (() => {
+                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}" />`;
+        html = `
+<table border="0" cellpadding="0" cellspacing="0" width="${msoTableWidth}" role="presentation"
+  style="border-collapse:collapse;width:${msoTableWidth}px;">
+  <tr>
+    <td width="${msoTableWidth}" bgcolor="${fallbackBgColor}" valign="top"
+      style="
+        width:${msoTableWidth}px;
+        background-color:${fallbackBgColor};
+        ${isGradient ? `background:${effectiveGradient};` : `background:url('${rawBgImageUrl}') center/cover no-repeat;`}
+      ">
+
+      <!--[if gte mso 9]>
+      <v:rect xmlns:v="urn:schemas-microsoft-com:vml"
+        fill="true" stroke="false"
+        style="width:${msoTableWidth}px;">
+        ${vmlFill}
+        <v:textbox inset="0,0,0,0">
+      <![endif]-->
+
+      ${html}
+
+      <!--[if gte mso 9]>
+        </v:textbox>
+      </v:rect>
+      <![endif]-->
+
+    </td>
+  </tr>
+</table>`;
+    }
     return html;
 }
 async function convertGridCellBlock(blockData, rootData, cellWidthPercent, parentCellWidthPx) {
@@ -563,16 +881,39 @@ async function convertGridCellBlock(blockData, rootData, cellWidthPercent, paren
     // 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);
+    // Subtract the cell's own padding so children receive the actual content-area width.
+    // Old Outlook honours explicit img/table width attributes — if a child is sized to the
+    // full column width (ignoring padding) it overflows and expands the column.
+    const cellPad = style?.padding || {};
+    const cellPadLeft = Number.isFinite(cellPad.left) ? cellPad.left : 0;
+    const cellPadRight = Number.isFinite(cellPad.right) ? cellPad.right : 0;
+    const contentWidthPx = Math.max(cellWidthPx - cellPadLeft - cellPadRight, 20);
     // OUTLOOK FIX: Ensure cell width is reasonable and capped at 600px
-    const safeCellWidthPx = Math.min(Math.max(cellWidthPx, 20), 600);
+    const safeCellWidthPx = Math.min(contentWidthPx, 600);
     for (const childId of childrenIds) {
         const child = rootData[childId];
         if (child) {
             parts.push(await convertToHtml(child, rootData, safeCellWidthPx));
         }
     }
+    const borderRadius = style?.borderRadius || 0;
+    const bgColor = style?.backgroundColor || "transparent";
+    // IMPORTANT: radius only for non-Outlook
+    const wrapped = `
+<!--[if !mso]><!-->
+<div style="
+  border-radius:${borderRadius}px;
+  overflow:hidden;
+  background-color:${bgColor};
+">
+<!--<![endif]-->
+  ${parts.join("")}
+<!--[if !mso]><!-->
+</div>
+<!--<![endif]-->
+`;
     return {
-        html: parts.join(""),
+        html: wrapped,
         styles,
     };
 }
@@ -583,7 +924,9 @@ async function convertVideoBlock(blockData, cellWidthInPx) {
     const { hideOnDesktop } = props; // Get the hideOnDesktop prop
     const { videoUrl, youtubeVideoUrl, thumbnailUrl, altText } = props;
     const videoLink = youtubeVideoUrl || videoUrl || "#";
-    let resolvedThumbnail = thumbnailUrl || "https://via.placeholder.com/480x360?text=No+Thumbnail";
+    // via.placeholder.com is defunct — use a data-URI grey box as the default thumbnail
+    const FALLBACK_THUMBNAIL = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='360'%3E%3Crect width='480' height='360' fill='%23cccccc'/%3E%3C/svg%3E`;
+    let resolvedThumbnail = thumbnailUrl || FALLBACK_THUMBNAIL;
     if (youtubeVideoUrl) {
         const youtubeId = (0, common_1.extractYouTubeId)(youtubeVideoUrl);
         const vimeoId = (0, common_1.extractVimeoId)(youtubeVideoUrl);
@@ -637,116 +980,103 @@ async function convertVideoBlock(blockData, cellWidthInPx) {
     const vmlTop = calculatedHeight / 2 - playIconHeight / 2;
     const shouldHideInOutlook = hideOnDesktop;
     const outlookVideoContent = shouldHideInOutlook
-        ? `<!--[if !mso]><!-->
-       <v:group xmlns:v="urn:schemas-microsoft-com:vml"
-         coordsize="${innerContainerWidth},${calculatedHeight}"
-         href="${videoLink}"
-         style="width:${innerContainerWidth}px;height:${calculatedHeight}px;">
-         <v:rect fill="t" style="position:absolute;width:${innerContainerWidth}px;height:${calculatedHeight}px;" stroked="t"
-           strokeweight="${borderWidth}px"
-           strokecolor="${borderColor}"
-           ${borderRadius > 0 ? `arcsize="${Math.min(borderRadius / calculatedHeight, 1).toFixed(2)}"` : ""}
-         >
-           <v:fill src="${resolvedThumbnail}" type="frame" color="${style?.backgroundColor || "#FFFFFF"}"/>
-         </v:rect>
-         <v:shape type="#_x0000_t75"
-           style="position:absolute;
-                  left:${vmlLeft.toFixed(1)}px;
-                  top:${vmlTop.toFixed(1)}px;
-                  width:${playIconWidth}px;
-                  height:${playIconHeight}px;"
-           alt="Play" href="${videoLink}" title="${altText || "Video"}"
-           stroked="f" filled="t">
-           <v:imagedata src="https://app-rsrc.getbee.io/public/resources/components/widgetBar/video-content-icon-sets/light/type-01.png" />
-         </v:shape>
-       </v:group>
+        ? `<!--[if !mso]><!-->
+       <v:group xmlns:v="urn:schemas-microsoft-com:vml"
+         coordsize="${innerContainerWidth},${calculatedHeight}"
+         href="${videoLink}"
+         style="width:${innerContainerWidth}px;height:${calculatedHeight}px;">
+         <v:rect fill="t" style="position:absolute;width:${innerContainerWidth}px;height:${calculatedHeight}px;"
+           ${borderWidth > 0 ? `stroked="t" strokeweight="${borderWidth}px" strokecolor="${borderColor}"` : `stroked="f"`}
+           ${borderRadius > 0 ? `arcsize="${Math.min(borderRadius / calculatedHeight, 1).toFixed(2)}"` : ""}
+         >
+           <v:fill src="${resolvedThumbnail}" type="frame" color="${style?.backgroundColor || "#FFFFFF"}"/>
+         </v:rect>
+         <v:shape type="#_x0000_t75"
+           style="position:absolute;
+                  left:${vmlLeft.toFixed(1)}px;
+                  top:${vmlTop.toFixed(1)}px;
+                  width:${playIconWidth}px;
+                  height:${playIconHeight}px;"
+           alt="Play" href="${videoLink}" title="${altText || "Video"}"
+           stroked="f" filled="t">
+           <v:imagedata src="https://app-rsrc.getbee.io/public/resources/components/widgetBar/video-content-icon-sets/light/type-01.png" />
+         </v:shape>
+       </v:group>
        <!--<![endif]-->`
-        : `<!--[if mso]>
-       <v:group xmlns:v="urn:schemas-microsoft-com:vml"
-         coordsize="${innerContainerWidth},${calculatedHeight}"
-         href="${videoLink}"
-         style="width:${innerContainerWidth}px;height:${calculatedHeight}px;">
-         <v:rect fill="t" style="position:absolute;width:${innerContainerWidth}px;height:${calculatedHeight}px; stroked="t"
-           strokeweight="${borderWidth}px"
-           strokecolor="${borderColor}"
-           ${borderRadius > 0 ? `arcsize="${Math.min(borderRadius / calculatedHeight, 1).toFixed(2)}"` : ""}
-         >
-           <v:fill src="${resolvedThumbnail}" type="frame" color="${style?.backgroundColor || "#FFFFFF"}"/>
-         </v:rect>
-         <v:shape type="#_x0000_t75"
-           style="position:absolute;
-                  left:${vmlLeft.toFixed(1)}px;
-                  top:${vmlTop.toFixed(1)}px;
-                  width:${playIconWidth}px;
-                  height:${playIconHeight}px;"
-           alt="Play" href="${videoLink}" title="${altText || "Video"}"
-           stroked="f" filled="t">
-           <v:imagedata src="https://app-rsrc.getbee.io/public/resources/components/widgetBar/video-content-icon-sets/light/type-01.png" />
-         </v:shape>
-       </v:group>
+        : `<!--[if mso]>
+       <v:group xmlns:v="urn:schemas-microsoft-com:vml"
+         coordsize="${innerContainerWidth},${calculatedHeight}"
+         href="${videoLink}"
+         style="width:${innerContainerWidth}px;height:${calculatedHeight}px;">
+         <v:rect fill="t" style="position:absolute;width:${innerContainerWidth}px;height:${calculatedHeight}px;"
+           ${borderWidth > 0 ? `stroked="t" strokeweight="${borderWidth}px" strokecolor="${borderColor}"` : `stroked="f"`}
+           ${borderRadius > 0 ? `arcsize="${Math.min(borderRadius / calculatedHeight, 1).toFixed(2)}"` : ""}
+         >
+           <v:fill src="${resolvedThumbnail}" type="frame" color="${style?.backgroundColor || "#FFFFFF"}"/>
+         </v:rect>
+         <v:shape type="#_x0000_t75"
+           style="position:absolute;
+                  left:${vmlLeft.toFixed(1)}px;
+                  top:${vmlTop.toFixed(1)}px;
+                  width:${playIconWidth}px;
+                  height:${playIconHeight}px;"
+           alt="Play" href="${videoLink}" title="${altText || "Video"}"
+           stroked="f" filled="t">
+           <v:imagedata src="https://app-rsrc.getbee.io/public/resources/components/widgetBar/video-content-icon-sets/light/type-01.png" />
+         </v:shape>
+       </v:group>
        <![endif]-->`;
-    const nonOutlookVideoContent = `<!--[if !mso]><!-->
-    <table
-      width="${innerContainerWidth}"
-      cellpadding="0"
-      cellspacing="0"
-      border="0"
-      role="presentation"
-      align="${style?.textAlign || "left"}"
-      style="
-        max-width: ${innerContainerWidth}px;
-        width: 100%;
-        height: ${calculatedHeight}px;
-        background-color: ${style?.backgroundColor || "#FFFFFF"};
-        background-image: url('${resolvedThumbnail}');
-        background-size: contain;
-        background-position: center;
-        background-repeat: no-repeat;
-        box-sizing: border-box;
-        border: ${borderWidth}px ${style?.borderStyle || "solid"} ${borderColor};
-        border-radius: ${borderRadius}px;
-      "
-    >
-      <tr>
-        <td style="padding: 0; height: ${calculatedHeight}px; text-align: center; vertical-align: middle;" valign="middle">
-          <a href="${videoLink}" target="_blank" style="display:inline-block; border: 0; outline: none; text-decoration: none;">
-            <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;
-              border: 0;
-                outline: none;
-                text-decoration: none;
-                height: auto;"
-            />
-          </a>
-        </td>
-      </tr>
-    </table>
-    <!--<![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;` : "";
+    const nonOutlookVideoContent = `<!--[if !mso]><!-->
+<div style="display:block; width:100%; max-width:${thumbnailW}px; position:relative; 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}"
+      width="${thumbnailW}"
+      height="${thumbnailH}"
+      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>
+</div>
+<!--<![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; max-width:600px;" class="${visibilityClass}">
-    <tr>
-      <td align="${style?.textAlign || "left"}" style="padding:0; ${outerContainerStyles}">
-        <table border="0" cellpadding="0" cellspacing="0" role="presentation" 
-          align="${style?.textAlign || "left"}"
-          style="
-            margin:0;
-            max-width:${cellWidthInPx}px;
-            width:${percentWidth};
-            border-collapse:collapse;
-          ">
-          <tr>
-            <td align="${style?.textAlign || "left"}" style="text-align:${style?.textAlign || "left"}; padding:0;">
-              ${videoContent}
-            </td>
-          </tr>
-        </table>
-      </td>
-    </tr>
-  </table>
+    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}">
+    <tr>
+      <td align="${style?.textAlign || "left"}" style="padding:0; ${outerContainerStyles}">
+        <table border="0" cellpadding="0" cellspacing="0" role="presentation" 
+          align="${style?.textAlign || "left"}"
+          style="
+            margin:0;
+            max-width:${cellWidthInPx}px;
+            width:${percentWidth};
+            border-collapse:collapse;
+          ">
+          <tr>
+            <td align="${style?.textAlign || "left"}" style="text-align:${style?.textAlign || "left"}; padding:0;">
+              ${videoContent}
+            </td>
+          </tr>
+        </table>
+      </td>
+    </tr>
+  </table>
 `;
     return wrapperHtml;
 }
@@ -828,48 +1158,48 @@ async function convertShapeBlock(blockData) {
     let nonMsoContent = "";
     // --- Case 1: Image + Text ---
     if (imageUrl && text) {
-        nonMsoContent = `
-<div style="display:inline-block;width:${resolvedWidthPx}px;height:${resolvedHeightPx}px;
-  border:${borderWidth}px ${borderStyle} ${borderColor};
-  border-radius:${resolvedBorderRadius};
-  background:${finalBackgroundColor} url('${imageUrl}') center/cover no-repeat;
-  overflow:hidden;${alignmentStyle}${customCss || ""}">
-  <div style="width:100%;height:100%;display:flex;justify-content:${flexJustify};align-items:${flexAlign};overflow:hidden;padding:6px;box-sizing:border-box;">
-    <div style="${textSizeStyle}text-align:${textAlignStyle};max-width:90%;overflow:hidden;">
-      ${text}
-    </div>
-  </div>
+        nonMsoContent = `
+<div style="display:inline-block;width:${resolvedWidthPx}px;height:${resolvedHeightPx}px;
+  border:${borderWidth}px ${borderStyle} ${borderColor};
+  border-radius:${resolvedBorderRadius};
+  background:${finalBackgroundColor} url('${imageUrl}') center/cover no-repeat;
+  overflow:hidden;${alignmentStyle}${customCss || ""}">
+  <div style="width:100%;height:100%;display:flex;justify-content:${flexJustify};align-items:${flexAlign};overflow:hidden;padding:6px;box-sizing:border-box;">
+    <div style="${textSizeStyle}text-align:${textAlignStyle};max-width:90%;overflow:hidden;">
+      ${text}
+    </div>
+  </div>
 </div>`;
     }
     // --- Case 2: Image only ---
     else if (imageUrl) {
-        nonMsoContent = `
-<div style="display:inline-block;width:${resolvedWidthPx}px;height:${resolvedHeightPx}px;
-  border:${borderWidth}px ${borderStyle} ${borderColor};
-  border-radius:${resolvedBorderRadius};
-  overflow:hidden;${alignmentStyle}${customCss || ""}">
-  <img src="${imageUrl}" alt="${text || "shape image"}"
-    width="${resolvedWidthPx}" height="${resolvedHeightPx}"
-    style="width:100%;height:100%;object-fit:cover;border-radius:${resolvedBorderRadius};display:block;" />
+        nonMsoContent = `
+<div style="display:inline-block;width:${resolvedWidthPx}px;height:${resolvedHeightPx}px;
+  border:${borderWidth}px ${borderStyle} ${borderColor};
+  border-radius:${resolvedBorderRadius};
+  overflow:hidden;${alignmentStyle}${customCss || ""}">
+  <img src="${imageUrl}" alt="${text || "shape image"}"
+    width="${resolvedWidthPx}" height="${resolvedHeightPx}"
+    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;
-  background:${finalBackgroundColor};
-  border:${borderWidth}px ${borderStyle} ${borderColor};
-  border-radius:${resolvedBorderRadius};
-  overflow:hidden;${alignmentStyle}${customCss || ""}">
-  <div style="width:100%;height:100%;display:flex;justify-content:${flexJustify};align-items:${flexAlign};padding:8px;box-sizing:border-box;">
-    <div style="${textSizeStyle}text-align:${textAlignStyle};max-width:90%;overflow:hidden;">
-      ${text || ""}
-    </div>
-  </div>
+        nonMsoContent = `
+<div style="display:inline-block;width:${resolvedWidthPx}px;height:${resolvedHeightPx}px;
+  background:${finalBackgroundColor};
+  border:${borderWidth}px ${borderStyle} ${borderColor};
+  border-radius:${resolvedBorderRadius};
+  overflow:hidden;${alignmentStyle}${customCss || ""}">
+  <div style="width:100%;height:100%;display:flex;justify-content:${flexJustify};align-items:${flexAlign};padding:8px;box-sizing:border-box;">
+    <div style="${textSizeStyle}text-align:${textAlignStyle};max-width:90%;overflow:hidden;">
+      ${text || ""}
+    </div>
+  </div>
 </div>`;
     }
     // Outlook (VML) fallback
-    const outlookContent = await appendOutlookForShape(nonMsoContent, resolvedWidthPx, resolvedWidthPx, {
+    const outlookContent = appendOutlookForShape(nonMsoContent, resolvedWidthPx, resolvedWidthPx, {
         shape,
         imageUrl,
         backgroundColor,
@@ -887,17 +1217,45 @@ async function convertShapeBlock(blockData) {
         padding,
         msoBakeImageWithText,
     }, visibilityClass);
+    // Embed block metadata so the HTML importer can reconstruct the Shape block exactly.
+    const shapeProps = encodeBlockProps({
+        shape,
+        width: resolvedWidthPx,
+        height: resolvedHeightPx,
+        shapeColor: String(finalBackgroundColor || '#BEBEBE'),
+        backgroundColor: String(finalBackgroundColor || '#BEBEBE'),
+        borderRadius: borderRadius !== undefined ? borderRadius : 0,
+        borderWidth: borderWidth || 0,
+        borderColor: borderColor || 'transparent',
+        borderStyle: borderStyle || 'solid',
+        imageUrl: imageUrl || '',
+        text: text || '',
+        color: String(color || '#000000'),
+        fontSize: fontSize || 14,
+        textAlign: textAlignStyle,
+        verticalAlign: verticalAlign || 'middle',
+        alignment: alignment || 'left',
+        padding: {
+            top: padding.top || 0,
+            right: padding.right || 0,
+            bottom: padding.bottom || 0,
+            left: padding.left || 0,
+        },
+        hideOnDesktop: Boolean(props.hideOnDesktop),
+        hideOnMobile: Boolean(props.hideOnMobile),
+        customCss: customCss || '',
+    });
     // Combine into table wrapper
-    return `
-<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}
-      <!--[if !mso]><!-->
-      ${nonMsoContent}
-      <!--<![endif]-->
-    </td>
-  </tr>
+    return `
+<table width="100%" style="border-collapse:collapse;table-layout:fixed;max-width:600px;" class="${visibilityClass}" data-block-type="shape" data-block-props="${shapeProps}">
+  <tr>
+    <td style="padding:${padding.top || 0}px ${padding.right || 0}px ${padding.bottom || 0}px ${padding.left || 0}px;text-align:${alignment};">
+      ${outlookContent}
+      <!--[if !mso]><!-->
+      ${nonMsoContent}
+      <!--<![endif]-->
+    </td>
+  </tr>
 </table>`;
 }
 // ---------- Updated VML builder ----------
@@ -930,24 +1288,24 @@ function buildVMLShape({ shape, widthPx, heightPx, imageUrl, backgroundColor, bo
     const safeFontSize = Math.max(Math.round(textSize), 10);
     // Build the textbox with table/cell for reliable vertical centering in Outlook
     const textboxMarkup = text && !msoHasBakedText
-        ? `<v:textbox inset="6pt,6pt,6pt,6pt" style="mso-fit-shape-to-text:false;">
-           <div style="display:table;width:100%;height:100%;">
-             <div style="display:table-cell;vertical-align:${vAlign};text-align:${hAlign};padding:0 6px;">
-               <div style="color:${textColor};font-family:Arial, sans-serif;font-size:${safeFontSize}px;line-height:1.3;word-wrap:break-word;">
-                 ${text}
-               </div>
-             </div>
-           </div>
+        ? `<v:textbox inset="6pt,6pt,6pt,6pt" style="mso-fit-shape-to-text:false;">
+           <div style="display:table;width:100%;height:100%;">
+             <div style="display:table-cell;vertical-align:${vAlign};text-align:${hAlign};padding:0 6px;">
+               <div style="color:${textColor};font-family:Arial, sans-serif;font-size:${safeFontSize}px;line-height:1.3;word-wrap:break-word;">
+                 ${text}
+               </div>
+             </div>
+           </div>
          </v:textbox>`
         : `<v:textbox inset="0,0,0,0"><div style="display:none;">.</div></v:textbox>`;
     // Return VML shape
-    return `
-<v:${tag} xmlns:v="urn:schemas-microsoft-com:vml"
-  style="width:${widthPx}px;height:${heightPx}px;display:inline-block;"
-  ${borderAttrs}
-  fill="true" fillcolor="${fillColor}"${extraAttr}>
-  ${fillMarkup}
-  ${textboxMarkup}
+    return `
+<v:${tag} xmlns:v="urn:schemas-microsoft-com:vml"
+  style="width:${widthPx}px;height:${heightPx}px;display:inline-block;"
+  ${borderAttrs}
+  fill="true" fillcolor="${fillColor}"${extraAttr}>
+  ${fillMarkup}
+  ${textboxMarkup}
 </v:${tag}>`;
 }
 function appendOutlookForShape(content, outerContainerWidth, innerContainerWidth, opts, visibilityClass) {
@@ -975,53 +1333,60 @@ function appendOutlookForShape(content, outerContainerWidth, innerContainerWidth
     const shouldHideInOutlook = visibilityClass.includes("hide-desktop");
     // Fix: Properly handle Outlook visibility with conditional comments
     if (shouldHideInOutlook) {
-        return `<!--[if !mso]><!-->
-    <table align="${align}" border="0" cellpadding="0" cellspacing="0"
-           style="width:${widthPx}px;height:${heightPx}px;border-collapse:collapse;" class="${visibilityClass}">
-      <tr>
-        <td valign="${valign}"
-            style="padding:${pad.top || 0}px ${pad.right || 0}px ${pad.bottom || 0}px ${pad.left || 0}px;">
-          ${vml}
-        </td>
-      </tr>
-    </table>
+        return `<!--[if !mso]><!-->
+    <table align="${align}" border="0" cellpadding="0" cellspacing="0"
+           style="width:${widthPx}px;height:${heightPx}px;border-collapse:collapse;" class="${visibilityClass}">
+      <tr>
+        <td valign="${valign}"
+            style="padding:${pad.top || 0}px ${pad.right || 0}px ${pad.bottom || 0}px ${pad.left || 0}px;">
+          ${vml}
+        </td>
+      </tr>
+    </table>
     <!--<![endif]-->`;
     }
-    return `<!--[if mso]>
-  <table align="${align}" border="0" cellpadding="0" cellspacing="0"
-         style="width:${widthPx}px;height:${heightPx}px;border-collapse:collapse;" class="${visibilityClass}">
-    <tr>
-      <td valign="${valign}"
-          style="padding:${pad.top || 0}px ${pad.right || 0}px ${pad.bottom || 0}px ${pad.left || 0}px;">
-        ${vml}
-      </td>
-    </tr>
-  </table>
+    return `<!--[if mso]>
+  <table align="${align}" border="0" cellpadding="0" cellspacing="0"
+         style="width:${widthPx}px;height:${heightPx}px;border-collapse:collapse;" class="${visibilityClass}">
+    <tr>
+      <td valign="${valign}"
+          style="padding:${pad.top || 0}px ${pad.right || 0}px ${pad.bottom || 0}px ${pad.left || 0}px;">
+        ${vml}
+      </td>
+    </tr>
+  </table>
 <![endif]-->`;
 }
 function convertVerticalDividerBlockToHtml(blockData) {
     const { style, props } = blockData.data;
-    const { width, height, dividerColor, ...rest } = style;
+    const { width, height, dividerColor, padding, backgroundColor } = style;
     const visibilityClass = (0, common_1.getVisibilityClass)(props);
-    // Convert other styles to inline-safe HTML attributes
-    const convertedStyle = buildStyles(rest, {
+    const outerStyles = buildStyles({ padding, backgroundColor }, {
         perChanges: [],
         pxChanges: allPxAttributes,
     });
-    // Outlook-safe vertical divider
-    const dividerContent = `
-    <table cellpadding="0" cellspacing="0" border="0" align="center" style="width:auto; ${convertedStyle}">
-      <tr>
-        <td style="vertical-align: middle; text-align: center;">
-          <!--[if mso | IE]>
-          <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fillcolor="${dividerColor}" style="width:${width}px;height:${height}px;" stroke="f"></v:rect>
-          <![endif]-->
-          <!--[if !mso]><!-- -->
-          <div style="display:inline-block;width:${width}px;height:${height}px;background:${dividerColor};line-height:0;font-size:0;">&nbsp;</div>
-          <!--<![endif]-->
-        </td>
-      </tr>
-    </table>
-  `;
-    return appendOutlookSupport(dividerContent, convertedStyle, visibilityClass);
+    const vDividerProps = encodeBlockProps({
+        width: width || 5,
+        height: height || 100,
+        dividerColor: dividerColor || '#808080',
+        backgroundColor: backgroundColor || '',
+        alignment: 'left',
+        padding: padding || { top: 0, right: 0, bottom: 0, left: 0 },
+        hideOnDesktop: Boolean(props.hideOnDesktop),
+        hideOnMobile: Boolean(props.hideOnMobile),
+    });
+    return `
+  <table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation"
+         style="${exports.tableCommonStyle} max-width:600px;" class="${visibilityClass}" data-block-type="vdivider" data-block-props="${vDividerProps}">
+    <tr>
+      <td style="${outerStyles}; text-align:center; vertical-align:middle;">
+        <!--[if mso | IE]>
+        <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fillcolor="${dividerColor}" style="width:${width}px;height:${height}px;" stroke="f"></v:rect>
+        <![endif]-->
+        <!--[if !mso]><!-->
+        <div style="display:inline-block;width:${width}px;height:${height}px;background:${dividerColor};line-height:0;font-size:0;">&nbsp;</div>
+        <!--<![endif]-->
+      </td>
+    </tr>
+  </table>`;
 }