email-builder-utils 1.1.42 → 1.1.45

package/dist/utils/jsonToHTML.js

@@ -14,7 +14,12 @@ const addPxToAttributes = [
 ];
 const addPxOrPerToAttributes = ["width", "height"];
 const allPxAttributes = [...addPxToAttributes, ...addPxOrPerToAttributes];
-exports.tableCommonStyle = "border-collapse:collapse; table-layout:fixed;";
+exports.tableCommonStyle = "border-collapse:collapse; table-layout:fixed";
+function encodeBlockProps(props) {
+    return JSON.stringify(props)
+        .replace(/&/g, '&')
+        .replace(/"/g, '"');
+}
 async function loadImageNaturalDimensions(imageUrl) {
     return new Promise((resolve, reject) => {
         const img = new Image();
@@ -23,6 +28,38 @@ async function loadImageNaturalDimensions(imageUrl) {
         img.src = imageUrl;
     });
 }
+const GENERIC_FONT_FAMILIES = new Set([
+    'serif', 'sans-serif', 'monospace', 'cursive', 'fantasy',
+    'system-ui', 'ui-serif', 'ui-sans-serif', 'ui-monospace',
+    'ui-rounded', 'emoji', 'math', 'fangsong',
+]);
+/**
+ * Normalises a CSS font-family string so every multi-word family name is wrapped
+ * in single quotes — safe inside double-quoted HTML style attributes.
+ * Handles already-quoted names (single or double), generic keywords, and any
+ * number of comma-separated families.
+ */
+function sanitizeFontFamily(fontFamily) {
+    if (!fontFamily)
+        return fontFamily;
+    return fontFamily
+        .split(',')
+        .map(font => {
+        const trimmed = font.trim();
+        // Strip any surrounding quotes (single or double) from either end
+        const unquoted = trimmed.replace(/^["']|["']$/g, '').trim();
+        if (!unquoted)
+            return '';
+        // Generic families and single-token names need no quotes
+        if (GENERIC_FONT_FAMILIES.has(unquoted.toLowerCase()) || !/\s/.test(unquoted)) {
+            return unquoted;
+        }
+        // Multi-word font name: wrap in single quotes, escaping any embedded single quotes
+        return `'${unquoted.replace(/'/g, "\\'")}'`;
+    })
+        .filter(Boolean)
+        .join(', ');
+}
 function buildStyles(style, { pxChanges, perChanges }) {
     if (!style)
         style = {};
@@ -58,13 +95,13 @@ function buildStyles(style, { pxChanges, perChanges }) {
             };
             value = `${safePad.top}px ${safePad.right}px ${safePad.bottom}px ${safePad.left}px`;
         }
-        // Sanitize fontFamily: replace double quotes with single quotes to avoid
-        // breaking the surrounding style="..." HTML attribute
         if (key === "fontFamily" && typeof value === "string") {
-            value = (0, fontFallback_1.withFontFallback)(value).replace(/"/g, "'");
+            value = sanitizeFontFamily((0, fontFallback_1.withFontFallback)(value));
         }
-        // Wrap backgroundImage values in url() if not already wrapped
-        if (key === "backgroundImage" && typeof value === "string" && !String(value).startsWith("url(")) {
+        // 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)
@@ -104,7 +141,7 @@ function buildStyles(style, { pxChanges, perChanges }) {
         .map(([k, v]) => `${k}:${v}`);
     if (style.customCss)
         parts.push(style.customCss);
-    return parts.join('; ').trim();
+    return parts.join('; ').replace(/;\s*$/, '').trim();
 }
 async function convertToHtml(blockData, rootData, cellWidthInPx) {
     switch (blockData.type) {
@@ -134,43 +171,48 @@ 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]-->
+        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]-->
     `;
     }
-    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) {
     const { style, props } = blockData.data;
     const { hideOnMobile, hideOnDesktop } = props;
-    const { thickness, dividerColor, width, ...rest } = style;
+    const { thickness, dividerColor, width, alignment, ...rest } = style;
     const convertedStyle = buildStyles(rest, {
         perChanges: [],
         pxChanges: allPxAttributes,
     });
-    const dividerWidth = width || "100%";
+    const dividerWidth = width || 100;
+    const alignAttr = alignment === 'center' ? 'center' : alignment === 'right' ? 'right' : 'left';
+    // Append text-align so the import parser can recover alignment via inheritance
+    const contentStyle = convertedStyle
+        ? `${convertedStyle}; text-align:${alignAttr};`
+        : `text-align:${alignAttr};`;
     // Build class name based on visibility
     const visibilityClass = [
         hideOnMobile ? "hide-mobile" : "",
@@ -178,23 +220,24 @@ 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
+      align="${alignAttr}"
+      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);
+    return appendOutlookSupport(dividerContent, contentStyle, visibilityClass);
 }
 function convertSpacerBlockToHtml(blockData) {
     const { style, props } = blockData.data;
@@ -237,13 +280,28 @@ function convertTextBlock(blockData, cellWidthInPx) {
         .replace(/<\/p>/gi, "</div>");
     const navigateToUrl = props.navigateToUrl || "";
     const fontSizeStyle = fontSize != null ? `font-size:${fontSize}px;` : "";
+    // Email clients apply `a { color: blue }` which overrides inherited color.
+    // Inject the block color directly onto <a> tags that don't already have one.
+    const blockTextColor = rest.color;
+    const processedText = blockTextColor
+        ? sanitizedText.replace(/<a(\s[^>]*)?>/gi, (match, attrs = '') => {
+            if (/style\s*=\s*["'][^"']*\bcolor\s*:/i.test(attrs))
+                return match;
+            if (/\bstyle\s*=/i.test(attrs)) {
+                return `<a${attrs.replace(/(\bstyle\s*=\s*["'])/, `$1color:${blockTextColor};`)}>`;
+            }
+            return `<a${attrs} style="color:${blockTextColor};">`;
+        })
+        : sanitizedText;
+    const colorStyle = blockTextColor ? `color:${blockTextColor};` : '';
     // 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 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);
+    const linkColorStyle = blockTextColor ? `color:${blockTextColor};` : 'color:inherit;';
     return navigateToUrl
-        ? `<a href="${navigateToUrl}" rel="noreferrer noopener" style="color:inherit;text-decoration:none;cursor:pointer;">${textContent}</a>`
+        ? `<a href="${navigateToUrl}" rel="noreferrer noopener" style="${linkColorStyle}text-decoration:none;cursor:pointer;">${textContent}</a>`
         : textContent;
 }
 async function appendOutlookForImage(content, outerContainerWidth, innerContainerWidth, imageUrl, style = {}, finalWidth, finalHeight) {
@@ -287,21 +345,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 {
@@ -310,21 +368,21 @@ 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) {
@@ -430,56 +488,56 @@ function appendOutlookForButton(content, buttonStyle, navigateToUrl, text) {
     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 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;">
-  <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}
+    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) {
@@ -497,7 +555,7 @@ function convertButtonBlock(blockData) {
     const finalHeight = typeof height === "number" && height > 0
         ? Math.max(height, minHeight)
         : null;
-    const safeFF = (0, fontFallback_1.withFontFallback)(fontFamily).replace(/"/g, "'");
+    const safeFF = sanitizeFontFamily((0, fontFallback_1.withFontFallback)(fontFamily));
     const safeColor = color || "#ffffff";
     const bgColor = buttonColor || "transparent";
     const bdColor = borderColor || "transparent";
@@ -509,89 +567,139 @@ function convertButtonBlock(blockData) {
         ? `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 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>
+    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 when backgroundColor is not set
- * but the block has a gradient in customCss (e.g. linear-gradient imports).
+ * Used as a MSO/Outlook bgcolor fallback. Handles hex, rgb, and named colors.
  */
 function extractCssFallbackColor(customCss) {
     if (!customCss)
         return '';
-    const m = customCss.match(/(?:linear|radial|conic)-gradient\([^)]*?(#[0-9a-fA-F]{3,8}|rgb\([^)]+\)|rgba\([^)]+\))/);
-    return m?.[1] ?? '';
+    const gradientMatch = customCss.match(/(?:linear|radial|conic)-gradient\(([^)]+(?:\([^)]*\)[^)]*)*)\)/);
+    if (!gradientMatch)
+        return '';
+    return firstGradientColor(gradientMatch[1]);
 }
 function parseGradient(gradient) {
     if (!gradient)
         return null;
-    const angleMatch = gradient.match(/(\d+)deg/);
-    const angle = angleMatch ? parseInt(angleMatch[1]) : 180;
-    const colors = gradient.match(/#([0-9a-fA-F]{3,8})|rgb[a]?\([^)]+\)/g) || [];
+    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",
+        fallback: colors[0] || '#ffffff',
     };
 }
 function cssAngleToVml(angle) {
@@ -602,18 +710,56 @@ async function convertGridBlock(blockData, rootData, cellWidthInPx) {
     const { columns = 1, cellWidths = [], responsive = true } = props;
     const { columnGap = 0, backgroundImage, backgroundColor, ...restStyle } = style;
     const gridVisibilityClass = (0, common_1.getVisibilityClass)(props);
-    // Strip url() wrapper if already present, so we have a raw URL for VML
-    const isGradient = typeof backgroundImage === "string" && backgroundImage.includes("gradient");
-    const parsedGradient = isGradient ? parseGradient(backgroundImage) : null;
+    // 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(restStyle.customCss) ||
+        extractCssFallbackColor(customCssStr) ||
         "#ffffff";
-    const rawBgImageUrl = !isGradient && backgroundImage
-        ? String(backgroundImage).replace(/^url\(['"]?/, "").replace(/['"]?\)$/, "")
+    const rawBgImageUrl = !isGradient && bgImageStr
+        ? bgImageStr.replace(/^url\(['"]?/, "").replace(/['"]?\)$/, "")
         : null;
-    // FIX: avoid table-layout:fixed – causes shrink in many clients
-    const tableStyles = buildStyles({ backgroundColor, ...restStyle }, {
+    // 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 innerRestStyleRaw = (rawBgImageUrl || isGradient)
+        ? { ...restStyle, customCss: innerCustomCss, backgroundSize: undefined, backgroundPosition: undefined, backgroundRepeat: undefined }
+        : { ...restStyle, customCss: innerCustomCss };
+    // Extract border/radius props — applied via a div wrapper for non-MSO clients so that
+    // border-radius is honoured (Gmail/Outlook compose strip border-radius from <table>).
+    const { borderRadius, border, borderColor, borderWidth, borderStyle: borderStyleProp, ...innerRestStyle } = innerRestStyleRaw;
+    const divBorderParts = [];
+    if (borderRadius)
+        divBorderParts.push(`border-radius:${typeof borderRadius === 'number' ? borderRadius + 'px' : borderRadius};`, `overflow:hidden;`);
+    if (border) {
+        divBorderParts.push(`border:${border};`);
+    }
+    else if (borderWidth || borderColor || borderStyleProp) {
+        const bw = borderWidth ? (typeof borderWidth === 'number' ? borderWidth + 'px' : borderWidth) : '1px';
+        const bs = borderStyleProp || 'solid';
+        const bc = borderColor || '#000000';
+        divBorderParts.push(`border:${bw} ${bs} ${bc};`);
+    }
+    const divBorderStyle = divBorderParts.join(' ');
+    const tableBgForNonMso = divBorderStyle
+        ? 'transparent'
+        : ((rawBgImageUrl || isGradient) ? undefined : backgroundColor);
+    const tableStyles = buildStyles({ backgroundColor: tableBgForNonMso, ...innerRestStyle }, {
         perChanges: [],
         pxChanges: allPxAttributes,
     });
@@ -621,48 +767,39 @@ 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);
-    // When a background image is present, the background is applied on an outer
-    // wrapper <td> (see bottom of function). The inner grid tables must be clean
-    // (no background) so that outer td background shows through.
-    // When no background image, the MSO table gets bgcolor for solid-color sections.
-    const msoBgColor = !rawBgImageUrl
-        ? (backgroundColor || extractCssFallbackColor(restStyle.customCss))
+    // 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 non-MSO table: strip ALL background-related props when an outer bg-td
-    // wrapper is used. background-position/repeat/size without a background-image
-    // are harmless, but keeping them in the inner table style is confusing and
-    // could conflict with email client default styles.
-    const innerNonMsoStyle = rawBgImageUrl
-        ? buildStyles({
-            ...restStyle,
-            customCss: '',
-            backgroundSize: undefined,
-            backgroundPosition: undefined,
-            backgroundRepeat: undefined,
-        }, { perChanges: [], pxChanges: allPxAttributes })
-        : tableStyles;
-    // When bg image is present, inner tables must be explicitly transparent so the
-    // outer <td> background shows through (email clients may default table bg to white).
+    // Inner tables must be explicitly transparent when outer <td> carries the background.
     const innerBgTransparent = (rawBgImageUrl || isGradient)
         ? 'background-color:transparent;'
         : '';
-    // bgcolor attribute on both tables: survives Outlook compose paste (Word + Web
-    // both strip background-image CSS but keep the bgcolor HTML attribute).
-    const nonMsoBgAttr = !rawBgImageUrl && 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}${innerNonMsoStyle}; max-width:600px;"
-     class="${gridVisibilityClass}">
-  <!--<![endif]-->
+    const nonMsoBgAttr = !rawBgImageUrl && !isGradient && backgroundColor && !divBorderStyle ? ` bgcolor="${backgroundColor}"` : '';
+    // When divBorderStyle is set the non-MSO <table> is transparent, so the Grid's
+    // backgroundColor must move onto the div wrapper — otherwise it vanishes in modern clients.
+    // Skip this for bg-image/gradient blocks; they apply their background via a separate wrapper.
+    const divWrapBg = divBorderStyle && backgroundColor && !rawBgImageUrl && !isGradient
+        ? ` background-color:${backgroundColor};`
+        : '';
+    const divWrapOpen = divBorderStyle ? `<div style="${divBorderStyle}${divWrapBg}">` : '';
+    const divWrapClose = divBorderStyle ? `</div>` : '';
+    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>";
@@ -716,18 +853,18 @@ async function convertGridBlock(blockData, rootData, cellWidthInPx) {
                 const childVisible = !childProps.hideOnDesktop;
                 const visibilityClass = (0, common_1.getVisibilityClass)(childProps);
                 if (childVisible) {
-                    const { html: childHtml, styles } = await convertGridCellBlock(child, rootData, widthPercent, adjustedTableWidth);
+                    const { html: childHtml, styles } = await convertGridCellBlock(child, rootData, widthPercent, adjustedTableWidth, Boolean(divBorderStyle));
                     // 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}
+                    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) {
@@ -736,10 +873,10 @@ async function convertGridBlock(blockData, rootData, cellWidthInPx) {
                 }
             }
             else {
-                html += `
-        <td width="${cellWidthPx}"
-            ${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>`;
@@ -749,13 +886,13 @@ async function convertGridBlock(blockData, rootData, cellWidthInPx) {
         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 ────────────────────
     //
@@ -781,42 +918,63 @@ async function convertGridBlock(blockData, rootData, cellWidthInPx) {
                 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:${backgroundImage};` : `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>
+        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"
+      ${!isGradient && rawBgImageUrl ? `background="${rawBgImageUrl}"` : ""}
+      style="
+        width:${msoTableWidth}px;
+        background-color:${fallbackBgColor};
+        ${isGradient ? `background:${effectiveGradient};` : `background-image:url('${rawBgImageUrl}'); background-position:center center; background-size:cover; background-repeat: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>`;
     }
+    // Wrap the entire grid (including any bg-image outer table) in a div when the block
+    // has border/radius. An unconditional <div> is used — not gated behind <!--[if !mso]>-->
+    // — so Gmail compose paste renders the border-radius reliably. Old Outlook ignores
+    // border-radius on <div> but still shows the rectangular border; new Outlook works fully.
+    if (divBorderStyle)
+        html = `${divWrapOpen}${html}${divWrapClose}`;
     return html;
 }
-async function convertGridCellBlock(blockData, rootData, cellWidthPercent, parentCellWidthPx) {
+async function convertGridCellBlock(blockData, rootData, cellWidthPercent, parentCellWidthPx, parentGridHasBorder = false) {
     const { style = {}, childrenIds = [], props = {} } = blockData.data;
     const visibilityClass = (0, common_1.getVisibilityClass)(props);
-    const styles = buildStyles(style, {
+    // Extract border + radius from style so they move to the div wrapper (not the <td>).
+    // Gmail strips border-radius from <td> but honours it on <div>. By putting border and
+    // radius on the same unconditional <div>, the rounded card border renders in all clients.
+    // The <td> keeps bgcolor (via attribute) for Old Outlook background fallback.
+    const { borderRadius: cellBorderRadius, borderWidth: cellBorderWidth, borderStyle: cellBorderStyleProp, borderColor: cellBorderColor, border: cellBorderShorthand, ...styleWithoutBorder } = style;
+    // backgroundColor must stay on the div wrapper (not the <td>) in two cases:
+    // 1. Cell has its own border-radius — the div's overflow:hidden clips the background.
+    // 2. Parent grid has a border div (divBorderStyle) — the grid's overflow:hidden clips it.
+    // In both cases, the rectangular <td> background bleeds through rounded corners if kept
+    // in CSS, creating visible corner squares. The bgcolor attribute stays for Outlook fallback.
+    const stripBgFromTd = Boolean(cellBorderRadius) || parentGridHasBorder;
+    const styleForTd = stripBgFromTd
+        ? { ...styleWithoutBorder, backgroundColor: 'transparent' }
+        : styleWithoutBorder;
+    const styles = buildStyles(styleForTd, {
         perChanges: [],
         pxChanges: allPxAttributes,
     });
@@ -827,7 +985,7 @@ async function convertGridCellBlock(blockData, rootData, cellWidthPercent, paren
     // 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 cellPad = styleWithoutBorder?.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);
@@ -839,22 +997,35 @@ async function convertGridCellBlock(blockData, rootData, cellWidthPercent, paren
             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]-->
-`;
+    const borderRadius = cellBorderRadius || 0;
+    const bgColor = styleWithoutBorder?.backgroundColor || "transparent";
+    // Build border CSS for the div wrapper.
+    // When the parent grid already has a divBorderStyle wrapper (border + border-radius +
+    // overflow:hidden), the cell must NOT duplicate the same border/radius — that causes
+    // two concentric borders of the same colour (double-border). The grid's wrapper div
+    // already provides the visual container; the cell div only needs background-color.
+    const cellDivBorderParts = [];
+    if (!parentGridHasBorder) {
+        if (borderRadius)
+            cellDivBorderParts.push(`border-radius:${typeof borderRadius === 'number' ? borderRadius + 'px' : borderRadius};`, `overflow:hidden;`);
+        if (cellBorderShorthand) {
+            cellDivBorderParts.push(`border:${cellBorderShorthand};`);
+        }
+        else if (cellBorderWidth || cellBorderColor || cellBorderStyleProp) {
+            const bw = cellBorderWidth ? (typeof cellBorderWidth === 'number' ? cellBorderWidth + 'px' : cellBorderWidth) : '1px';
+            const bs = cellBorderStyleProp || 'solid';
+            const bc = cellBorderColor || '#000000';
+            cellDivBorderParts.push(`border:${bw} ${bs} ${bc};`);
+        }
+    }
+    const cellDivBorderStyle = cellDivBorderParts.join(' ');
+    // Unconditional div — visible to all clients (Gmail, Outlook new/old, Apple Mail).
+    // background-color on the div covers modern clients; bgcolor on <td> covers Old Outlook.
+    const divStyleParts = [`background-color:${bgColor};`];
+    if (cellDivBorderStyle)
+        divStyleParts.push(cellDivBorderStyle);
+    const divStyleStr = divStyleParts.join(' ');
+    const wrapped = `<div style="${divStyleStr}">${parts.join("")}</div>`;
     return {
         html: wrapped,
         styles,
@@ -867,7 +1038,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);
@@ -921,117 +1094,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;
 }
@@ -1095,16 +1254,6 @@ async function convertShapeBlock(blockData) {
         justify: "justify",
     };
     const textAlignStyle = textAlignMap[textAlign] || "center";
-    const flexJustify = textAlign === "left"
-        ? "flex-start"
-        : textAlign === "right"
-            ? "flex-end"
-            : "center";
-    const flexAlign = verticalAlign === "top"
-        ? "flex-start"
-        : verticalAlign === "bottom"
-            ? "flex-end"
-            : "center";
     // --- Text styling ---
     const textSizeStyle = `font-size:${fontSize}px;line-height:1.3;word-break:break-word;overflow-wrap:break-word;color:${color};`;
     // ============================
@@ -1113,44 +1262,58 @@ 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-color:${finalBackgroundColor};
+  background-image:url('${imageUrl}');
+  background-position:center center;
+  background-size:cover;
+  background-repeat:no-repeat;
+  overflow:hidden;${alignmentStyle}${customCss || ""}">
+  <table border="0" cellpadding="0" cellspacing="0" width="${resolvedWidthPx}"
+    style="width:${resolvedWidthPx}px;height:${resolvedHeightPx}px;border-collapse:collapse;">
+    <tr>
+      <td align="${textAlignStyle}" valign="${verticalAlign}"
+          width="${resolvedWidthPx}" height="${resolvedHeightPx}"
+          style="padding:6px;vertical-align:${verticalAlign};text-align:${textAlignStyle};overflow:hidden;box-sizing:border-box;">
+        <div style="${textSizeStyle}text-align:${textAlignStyle};max-width:90%;overflow:hidden;">${text}</div>
+      </td>
+    </tr>
+  </table>
 </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-color:${finalBackgroundColor};
+  border:${borderWidth}px ${borderStyle} ${borderColor};
+  border-radius:${resolvedBorderRadius};
+  overflow:hidden;${alignmentStyle}${customCss || ""}">
+  <table border="0" cellpadding="0" cellspacing="0" width="${resolvedWidthPx}"
+    style="width:${resolvedWidthPx}px;height:${resolvedHeightPx}px;border-collapse:collapse;">
+    <tr>
+      <td align="${textAlignStyle}" valign="${verticalAlign}"
+          width="${resolvedWidthPx}" height="${resolvedHeightPx}"
+          style="padding:8px;vertical-align:${verticalAlign};text-align:${textAlignStyle};box-sizing:border-box;">
+        <div style="${textSizeStyle}text-align:${textAlignStyle};max-width:90%;overflow:hidden;">${text || ""}</div>
+      </td>
+    </tr>
+  </table>
 </div>`;
     }
     // Outlook (VML) fallback
@@ -1172,17 +1335,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 ----------
@@ -1215,24 +1406,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) {
@@ -1260,28 +1451,28 @@ 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) {
@@ -1292,18 +1483,28 @@ function convertVerticalDividerBlockToHtml(blockData) {
         perChanges: [],
         pxChanges: allPxAttributes,
     });
-    return `
-  <table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation"
-         style="${exports.tableCommonStyle} max-width:600px;" class="${visibilityClass}">
-    <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>
+    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>`;
 }