email-builder-utils 1.1.44 → 1.1.45

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;AA0lCD,wBAAsB,iBAAiB,CAAC,SAAS,EAAE,GAAG,EAAE,aAAa,EAAE,MAAM,mBA+K5E"}

package/dist/utils/jsonToHTML.js

@@ -14,7 +14,7 @@ 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, '&')
@@ -28,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 = {};
@@ -64,7 +96,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 +202,17 @@ ${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';
+    // 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,6 +222,7 @@ function convertDividerBlockToHtml(blockData) {
         .join(" ");
     const dividerContent = `
     <table
+      align="${alignAttr}"
       width="${dividerWidth}%"
       cellpadding="0"
       cellspacing="0"
@@ -192,14 +230,14 @@ function convertDividerBlockToHtml(blockData) {
       <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;
@@ -242,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) {
@@ -435,7 +488,7 @@ 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}"`
@@ -502,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";
@@ -684,10 +737,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 +779,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 +853,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 +923,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 +949,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 +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);
@@ -896,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,
@@ -1140,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};`;
     // ============================
@@ -1162,13 +1266,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 +1300,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 +1495,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.45",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [