email-builder-utils 1.1.44 → 1.1.46

package/dist/utils/jsonToHTML.d.ts

@@ -23,7 +23,7 @@ interface IBlockData {
         childrenIds?: Array<string>;
     };
 }
-export declare const tableCommonStyle = "border-collapse:collapse; table-layout:fixed;";
+export declare const tableCommonStyle = "border-collapse:collapse; table-layout:fixed";
 export declare function convertToHtml(blockData: IBlockData, rootData: any, cellWidthInPx: number): Promise<string>;
 export declare function convertVideoBlock(blockData: any, cellWidthInPx: number): Promise<string>;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"jsonToHTML.d.ts","sourceRoot":"","sources":["../../src/utils/jsonToHTML.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAIrC,UAAU,cAAc;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC1B,aAAa,EAAE,MAAM,CAAC;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,UAAU,UAAU;IAClB,IAAI,EAAE,SAAS,CAAC;IAChB,IAAI,EAAE;QACJ,KAAK,EAAE,cAAc,CAAC;QACtB,KAAK,EAAE,GAAG,CAAC;QACX,WAAW,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;KAC7B,CAAC;CACH;AAYD,eAAO,MAAM,gBAAgB,kDAAkD,CAAC;AA2GhF,wBAAsB,aAAa,CACjC,SAAS,EAAE,UAAU,EACrB,QAAQ,EAAE,GAAG,EACb,aAAa,EAAE,MAAM,mBAwBtB;AA2/BD,wBAAsB,iBAAiB,CAAC,SAAS,EAAE,GAAG,EAAE,aAAa,EAAE,MAAM,mBA+K5E"}
+{"version":3,"file":"jsonToHTML.d.ts","sourceRoot":"","sources":["../../src/utils/jsonToHTML.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAIrC,UAAU,cAAc;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC1B,aAAa,EAAE,MAAM,CAAC;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,UAAU,UAAU;IAClB,IAAI,EAAE,SAAS,CAAC;IAChB,IAAI,EAAE;QACJ,KAAK,EAAE,cAAc,CAAC;QACtB,KAAK,EAAE,GAAG,CAAC;QACX,WAAW,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;KAC7B,CAAC;CACH;AAYD,eAAO,MAAM,gBAAgB,iDAAiD,CAAC;AA2I/E,wBAAsB,aAAa,CACjC,SAAS,EAAE,UAAU,EACrB,QAAQ,EAAE,GAAG,EACb,aAAa,EAAE,MAAM,mBAwBtB;AAqoCD,wBAAsB,iBAAiB,CAAC,SAAS,EAAE,GAAG,EAAE,aAAa,EAAE,MAAM,mBAwM5E"}

package/dist/utils/jsonToHTML.js

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

package/package.json

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