email-builder-utils 1.1.49 → 1.1.52

package/dist/utils/blocks/shape.js

@@ -33,23 +33,23 @@ function buildVMLShape({ shape, widthPx, heightPx, imageUrl, backgroundColor, bo
     const hAlign = hAlignMap[textAlign] || "center";
     const safeFontSize = Math.max(Math.round(textSize), 10);
     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 `
-<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) {
@@ -70,28 +70,28 @@ function appendOutlookForShape(content, outerContainerWidth, innerContainerWidth
     const valign = opts.verticalAlign || "middle";
     const shouldHideInOutlook = visibilityClass.includes("hide-desktop");
     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]-->`;
 }
 async function convertShapeBlock(blockData) {
@@ -146,58 +146,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-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>
+        nonMsoContent = `
+<div style="display:inline-block;width:${resolvedWidthPx}px;height:${resolvedHeightPx}px;max-width:100%;box-sizing:border-box;
+  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="100%"
+    style="width:100%;height:${resolvedHeightPx}px;border-collapse:collapse;">
+    <tr>
+      <td align="${textAlignStyle}" valign="${verticalAlign}"
+          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;max-width:100%;box-sizing:border-box;
+  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-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>
+        nonMsoContent = `
+<div style="display:inline-block;width:${resolvedWidthPx}px;height:${resolvedHeightPx}px;max-width:100%;box-sizing:border-box;
+  background-color:${finalBackgroundColor};
+  border:${borderWidth}px ${borderStyle} ${borderColor};
+  border-radius:${resolvedBorderRadius};
+  overflow:hidden;${alignmentStyle}${customCss || ""}">
+  <table border="0" cellpadding="0" cellspacing="0" width="100%"
+    style="width:100%;height:${resolvedHeightPx}px;border-collapse:collapse;">
+    <tr>
+      <td align="${textAlignStyle}" valign="${verticalAlign}"
+          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
@@ -242,15 +242,15 @@ async function convertShapeBlock(blockData) {
         hideOnMobile: Boolean(props.hideOnMobile),
     });
     // Combine into table wrapper
-    return `
-<table width="100%" style="border-collapse:collapse;table-layout:fixed;max-width:600px;" class="${visibilityClass}" data-block-type="shape" data-block-props="${shapeBlockProps}">
-  <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="${shapeBlockProps}">
+  <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>`;
 }

package/dist/utils/blocks/text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../src/utils/blocks/text.ts"],"names":[],"mappings":"AAKA,wBAAgB,gBAAgB,CAAC,SAAS,EAAE,GAAG,EAAE,aAAa,CAAC,EAAE,MAAM,UA4ItE"}
+{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../src/utils/blocks/text.ts"],"names":[],"mappings":"AASA,wBAAgB,gBAAgB,CAAC,SAAS,EAAE,GAAG,EAAE,aAAa,CAAC,EAAE,MAAM,UAkLtE"}

package/dist/utils/blocks/text.js

@@ -8,42 +8,69 @@ const common_1 = require("../common");
 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, backgroundImage, backgroundPosition, backgroundRepeat, backgroundSize, whiteSpace: _whiteSpace, ...rest } = style;
-    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 { 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 ? (0, gradientUtils_1.parseGradient)(effectiveGradient) : null;
     const rawBgImageUrl = !isGradient && bgImageStr
-        ? bgImageStr.replace(/^url\(['"]?/, '').replace(/['"]?\)$/, '')
+        ? bgImageStr.replace(/^url\(['"]?/, "").replace(/['"]?\)$/, "")
         : null;
     const hasBgImage = Boolean(rawBgImageUrl || isGradient);
     const fallbackBgColor = textContainerBackgroundColor ||
         parsedGradient?.fallback ||
         (0, gradientUtils_1.extractCssFallbackColor)(customCssStr) ||
-        '#ffffff';
-    const textBoxStyle = { backgroundColor, padding, borderRadius, borderStyle, borderColor, borderWidth };
-    const convertedTextStyle = (0, buildStyles_1.buildStyles)(textBoxStyle, { perChanges: [], pxChanges: buildStyles_1.allPxAttributes });
+        "#ffffff";
+    // Text box decoration styles (border, background, padding) — no width
+    const textBoxStyle = {
+        backgroundColor,
+        padding,
+        borderRadius,
+        borderStyle,
+        borderColor,
+        borderWidth,
+    };
+    const convertedTextStyle = (0, buildStyles_1.buildStyles)(textBoxStyle, {
+        perChanges: [],
+        pxChanges: buildStyles_1.allPxAttributes,
+    });
+    // Strip gradient from customCss when it is hoisted to the outer bg wrapper.
     const innerCustomCss = gradientInCustomCss
-        ? customCssStr.replace(/background-image\s*:[^;]+;?/gi, '').trim()
+        ? customCssStr.replace(/background-image\s*:[^;]+;?/gi, "").trim()
         : customCssStr;
-    const restForStyles = gradientInCustomCss ? { ...rest, customCss: innerCustomCss } : rest;
+    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 = (0, buildStyles_1.buildStyles)({
         padding: textContainerPadding,
         backgroundColor: hasBgImage ? undefined : textContainerBackgroundColor,
         ...restForStyles,
-    }, { perChanges: [], pxChanges: buildStyles_1.allPxAttributes });
+    }, {
+        perChanges: [],
+        pxChanges: buildStyles_1.allPxAttributes,
+    });
     const sanitizedText = (props.text ?? "")
         .replace(/<p(\s[^>]*)?>/gi, (_, attrs) => `<div${attrs || ""}>`)
         .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 = '') => {
+        ? sanitizedText.replace(/<a(\s[^>]*)?>/gi, (match, attrs = "") => {
             if (/style\s*=\s*["'][^"']*\bcolor\s*:/i.test(attrs))
                 return match;
             if (/\bstyle\s*=/i.test(attrs)) {
@@ -52,52 +79,56 @@ function convertTextBlock(blockData, cellWidthInPx) {
             return `<a${attrs} style="color:${blockTextColor};">`;
         })
         : sanitizedText;
-    const colorStyle = blockTextColor ? `color:${blockTextColor};` : '';
+    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; ${colorStyle}${fontSizeStyle}${convertedTextStyle}">${processedText.replaceAll(/\n/g, "<br>")}</div>`;
-    const safeCellWidth = cellWidthInPx ? Math.min(cellWidthInPx, 600) : undefined;
-    const textContent = (0, outlookSupport_1.appendOutlookSupport)(convertedTextBox, styles, hasBgImage ? '' : visibilityClass, safeCellWidth);
-    const linkColorStyle = blockTextColor ? `color:${blockTextColor};` : 'color:inherit;';
+    const safeCellWidth = cellWidthInPx
+        ? Math.min(cellWidthInPx, 600)
+        : undefined;
+    // When a bg-image wrapper is present, visibilityClass moves to the outer table.
+    const textContent = (0, outlookSupport_1.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 = (0, gradientUtils_1.cssAngleToVml)(parsedGradient?.angle || 180);
-                const c1 = parsedGradient?.fallback || '#ffffff';
+                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 bgPosition = backgroundPosition ?? 'center center';
-        const bgSize = backgroundSize ?? 'cover';
-        const bgRepeat = backgroundRepeat ?? 'no-repeat';
         const bgCss = isGradient
             ? `background:${effectiveGradient};`
-            : `background-image:url('${rawBgImageUrl}'); background-position:${bgPosition}; background-size:${bgSize}; background-repeat:${bgRepeat};`;
-        const wrappedContent = `
-<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation"
-  style="border-collapse:collapse;width:100%;max-width:${msoWidth}px;" class="${visibilityClass}">
-  <tr>
-    <td width="100%" bgcolor="${fallbackBgColor}" valign="top"
-      ${!isGradient && rawBgImageUrl ? `background="${rawBgImageUrl}"` : ''}
-      style="width:100%;max-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>
+            : `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="100%" role="presentation"
+  style="border-collapse:collapse;width:100%;max-width:${msoWidth}px;" class="${visibilityClass}">
+  <tr>
+    <td width="100%"${(0, common_1.buildOutlookBgAttr)(fallbackBgColor)} valign="top"
+      ${!isGradient && rawBgImageUrl ? `background="${rawBgImageUrl}"` : ""}
+      style="width:100%;max-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>`

package/dist/utils/blocks/video.js

@@ -88,64 +88,64 @@ async function convertVideoBlock(blockData, cellWidthInPx) {
     // min-height fallback for clients that ignore the spacer GIF (e.g. some webmail).
     const minHeight = Math.round(thumbnailW * 0.3);
     // VML block — shown only in Outlook (Word engine supports VML, not standard HTML).
-    const outlookContent = hideOnDesktop ? '' : `<!--[if vml]>
-<v:group xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word"
-  coordsize="${thumbnailW},${thumbnailH}" coordorigin="0,0"
-  href="${videoLink}"
-  style="width:${thumbnailW}px;height:${thumbnailH}px;">
-  <v:rect fill="t" stroked="f" style="position:absolute;width:${thumbnailW};height:${thumbnailH};">
-    <v:fill src="${resolvedThumbnail}" type="frame"/>
-  </v:rect>
-  <v:oval fill="t" strokecolor="#ffffff" strokeweight="3px"
-    style="position:absolute;left:${ovalLeft};top:${ovalTop};width:${ovalSize};height:${ovalSize}">
-    <v:fill color="#ffffff" opacity="100%" />
-  </v:oval>
-  <v:shape coordsize="24,32" path="m,l,32,24,16,xe" fillcolor="#000000" stroked="f"
-    style="position:absolute;left:${triLeft};top:${triTop};width:${triW};height:${triH};" />
-</v:group>
+    const outlookContent = hideOnDesktop ? '' : `<!--[if vml]>
+<v:group xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word"
+  coordsize="${thumbnailW},${thumbnailH}" coordorigin="0,0"
+  href="${videoLink}"
+  style="width:${thumbnailW}px;height:${thumbnailH}px;">
+  <v:rect fill="t" stroked="f" style="position:absolute;width:${thumbnailW};height:${thumbnailH};">
+    <v:fill src="${resolvedThumbnail}" type="frame"/>
+  </v:rect>
+  <v:oval fill="t" strokecolor="#ffffff" strokeweight="3px"
+    style="position:absolute;left:${ovalLeft};top:${ovalTop};width:${ovalSize};height:${ovalSize}">
+    <v:fill color="#ffffff" opacity="100%" />
+  </v:oval>
+  <v:shape coordsize="24,32" path="m,l,32,24,16,xe" fillcolor="#000000" stroked="f"
+    style="position:absolute;left:${triLeft};top:${triTop};width:${triW};height:${triH};" />
+</v:group>
 <![endif]-->`;
     // Non-VML block — shown in all clients except Outlook.
-    const nonMsoContent = `<!--[if !vml]><!-->
-<a href="${videoLink}" target="_blank"
-    style="display:block; text-decoration:none; background-image:url('${resolvedThumbnail}'); background-size:cover; background-position:center; ${borderCss}${radiusCss}">
-  <table cellpadding="0" cellspacing="0" border="0" width="100%"
-    background="${resolvedThumbnail}"
-    role="presentation"
-    style="background-image:url('${resolvedThumbnail}'); background-size:cover; background-position:center center; background-repeat:no-repeat; min-height:${minHeight}px;">
-    <tr>
-      <td width="25%" style="line-height:0; font-size:0; padding:0;">
-        <img src="${SPACER_GIF_URL}" width="100%" border="0" alt=""
-          style="display:block; height:auto; opacity:0; visibility:hidden;" />
-      </td>
-      <td width="50%" align="center" valign="middle"
-          style="text-align:center; vertical-align:middle; padding:0;">
-        <img src="${PLAY_ICON_URL}" width="${playIconW}" height="${playIconH}" alt="Play"
-          style="display:block; width:${playIconW}px; height:${playIconH}px; border:0; margin:0 auto;" />
-      </td>
-      <td width="25%" style="padding:0;">&nbsp;</td>
-    </tr>
-  </table>
-</a>
+    const nonMsoContent = `<!--[if !vml]><!-->
+<a href="${videoLink}" target="_blank"
+    style="display:block; text-decoration:none; background-image:url('${resolvedThumbnail}'); background-size:cover; background-position:center; ${borderCss}${radiusCss}">
+  <table cellpadding="0" cellspacing="0" border="0" width="100%"
+    background="${resolvedThumbnail}"
+    role="presentation"
+    style="background-image:url('${resolvedThumbnail}'); background-size:cover; background-position:center center; background-repeat:no-repeat; min-height:${minHeight}px;">
+    <tr>
+      <td width="25%" style="line-height:0; font-size:0; padding:0;">
+        <img src="${SPACER_GIF_URL}" width="100%" border="0" alt=""
+          style="display:block; height:auto; opacity:0; visibility:hidden;" />
+      </td>
+      <td width="50%" align="center" valign="middle"
+          style="text-align:center; vertical-align:middle; padding:0;">
+        <img src="${PLAY_ICON_URL}" width="${playIconW}" height="${playIconH}" alt="Play"
+          style="display:block; width:${playIconW}px; height:${playIconH}px; border:0; margin:0 auto;" />
+      </td>
+      <td width="25%" style="padding:0;">&nbsp;</td>
+    </tr>
+  </table>
+</a>
 <!--<![endif]-->`;
-    return `
-<table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation"
-  style="border-collapse:collapse; max-width:600px; margin:0; padding:0;"
-  class="${visibilityClass}" data-block-type="video"
-  data-video-url="${videoUrl || ''}" data-youtube-url="${youtubeVideoUrl || ''}"
-  data-thumbnail-url="${thumbnailUrl || ''}" data-alt-text="${altText || ''}"
-  data-width="${typeof style?.width === 'number' ? style.width : 100}">
-  <tr>
-    <td align="${align}" style="${outerContainerStyles}">
-      <table border="0" cellpadding="0" cellspacing="0" role="presentation"
-        align="${align}"
-        style="border-collapse:collapse; max-width:${thumbnailW}px; width:${percentWidth};">
-        <tr>
-          <td align="${align}" style="padding:0;">
-            ${outlookContent}${nonMsoContent}
-          </td>
-        </tr>
-      </table>
-    </td>
-  </tr>
+    return `
+<table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation"
+  style="border-collapse:collapse; max-width:600px; margin:0; padding:0;"
+  class="${visibilityClass}" data-block-type="video"
+  data-video-url="${videoUrl || ''}" data-youtube-url="${youtubeVideoUrl || ''}"
+  data-thumbnail-url="${thumbnailUrl || ''}" data-alt-text="${altText || ''}"
+  data-width="${typeof style?.width === 'number' ? style.width : 100}">
+  <tr>
+    <td align="${align}" style="${outerContainerStyles}">
+      <table border="0" cellpadding="0" cellspacing="0" role="presentation"
+        align="${align}"
+        style="border-collapse:collapse; max-width:${thumbnailW}px; width:${percentWidth};">
+        <tr>
+          <td align="${align}" style="padding:0;">
+            ${outlookContent}${nonMsoContent}
+          </td>
+        </tr>
+      </table>
+    </td>
+  </tr>
 </table>`;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"buildStyles.d.ts","sourceRoot":"","sources":["../../src/utils/buildStyles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB,UAA8C,CAAC;AAC7E,eAAO,MAAM,sBAAsB,UAAsB,CAAC;AAC1D,eAAO,MAAM,eAAe,UAAoD,CAAC;AAEjF,eAAO,MAAM,gBAAgB,iDAAiD,CAAC;AAQ/E,wBAAgB,kBAAkB,CAAC,UAAU,EAAE,MAAM,GAAG,MAAM,CAe7D;AAED,wBAAgB,WAAW,CACzB,KAAK,EAAE,GAAG,EACV,EAAE,SAAS,EAAE,UAAU,EAAE,EAAE;IAAE,SAAS,EAAE,MAAM,EAAE,CAAC;IAAC,UAAU,EAAE,MAAM,EAAE,CAAA;CAAE,UAmEzE"}
+{"version":3,"file":"buildStyles.d.ts","sourceRoot":"","sources":["../../src/utils/buildStyles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB,UAA8C,CAAC;AAC7E,eAAO,MAAM,sBAAsB,UAAsB,CAAC;AAC1D,eAAO,MAAM,eAAe,UAAoD,CAAC;AAEjF,eAAO,MAAM,gBAAgB,iDAAiD,CAAC;AAQ/E,wBAAgB,kBAAkB,CAAC,UAAU,EAAE,MAAM,GAAG,MAAM,CAkB7D;AACD,wBAAgB,WAAW,CACzB,KAAK,EAAE,GAAG,EACV,EAAE,SAAS,EAAE,UAAU,EAAE,EAAE;IAAE,SAAS,EAAE,MAAM,EAAE,CAAC;IAAC,UAAU,EAAE,MAAM,EAAE,CAAA;CAAE,UAqFzE"}

package/dist/utils/buildStyles.js

@@ -20,12 +20,15 @@ function sanitizeFontFamily(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)
@@ -35,18 +38,28 @@ function buildStyles(style, { pxChanges, perChanges }) {
     if (!style)
         style = {};
     const stylesObj = {};
-    const INVALID_KEYS = [
-        "columns", "cellWidths", "cellWidth", "childWidth",
-        "visibility", "hideOnMobile", "hideOnDesktop", "label", "alignment",
-    ];
     Object.entries(style).forEach(([key, value]) => {
         if (key === "customCss")
             return;
+        const INVALID_KEYS = [
+            "columns",
+            "cellWidths",
+            "cellWidth",
+            "childWidth",
+            "visibility",
+            "hideOnMobile",
+            "hideOnDesktop",
+            "label",
+            "alignment",
+        ];
         if (INVALID_KEYS.includes(key))
             return;
+        // Prevent null/undefined/"" from leaking into CSS
         if (value === undefined || value === null || value === "")
             return;
-        if ((key === "padding" || key === "buttonPadding") && typeof value === "object") {
+        // FIX 1 — SANITIZE padding objects
+        if ((key === "padding" || key === "buttonPadding") &&
+            typeof value === "object") {
             const pad = value;
             const safePad = {
                 top: Number.isFinite(pad.top) ? pad.top : 0,
@@ -59,21 +72,26 @@ function buildStyles(style, { pxChanges, perChanges }) {
         if (key === "fontFamily" && typeof value === "string") {
             value = sanitizeFontFamily((0, fontFallback_1.withFontFallback)(value));
         }
+        // Wrap backgroundImage values in url() if not already wrapped — skip gradients
         if (key === "backgroundImage" && typeof value === "string"
             && !String(value).startsWith("url(")
             && !String(value).toLowerCase().includes("gradient(")) {
             value = `url('${value}')`;
         }
+        // lineHeight: values >= 4 are pixel values; smaller values are unitless multipliers (e.g. 1.5)
         if (key === "lineHeight" && typeof value === "number") {
             stylesObj["line-height"] = value >= 4 ? `${value}px` : String(value);
             return;
         }
         const cssKey = key.replace(/([A-Z])/g, "-$1").toLowerCase();
+        // FIX 2 — Sanitize invalid px/per values
         if (pxChanges.includes(key)) {
             if (typeof value === "number") {
-                stylesObj[cssKey] = `${Math.round(value * 100) / 100}px`;
+                const rounded = Math.round(value * 100) / 100;
+                stylesObj[cssKey] = `${rounded}px`;
             }
             else if (typeof value === "string" && value.includes("null")) {
+                // Skip invalid styles
                 return;
             }
             else {

package/dist/utils/common.d.ts

@@ -5,4 +5,5 @@ export declare function getVisibilityClass(props?: {
     hideOnMobile?: boolean;
 }): string;
 export declare function encodeBlockPropsAttr(props: Record<string, any>): string;
+export declare function buildOutlookBgAttr(color: string): string;
 //# sourceMappingURL=common.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../src/utils/common.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,gBAAgB,GAAI,KAAK,MAAM,KAAG,MAAM,GAAG,IAqBvD,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,KAAK,MAAM,KAAG,MAAM,GAAG,IAIrD,CAAC;AAGF,wBAAgB,kBAAkB,CAAC,KAAK,CAAC,EAAE;IACzC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,UASA;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,MAAM,CAQvE"}
+{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../src/utils/common.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,gBAAgB,GAAI,KAAK,MAAM,KAAG,MAAM,GAAG,IAqBvD,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,KAAK,MAAM,KAAG,MAAM,GAAG,IAIrD,CAAC;AAGF,wBAAgB,kBAAkB,CAAC,KAAK,CAAC,EAAE;IACzC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,UASA;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,MAAM,CAQvE;AAYD,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAGxD"}