email-builder-utils 1.1.52 → 1.1.54

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;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>
+        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;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;" />
+        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;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>
+        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":"AASA,wBAAgB,gBAAgB,CAAC,SAAS,EAAE,GAAG,EAAE,aAAa,CAAC,EAAE,MAAM,UAkLtE"}
+{"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,UAoKtE"}

package/dist/utils/blocks/text.js

@@ -13,24 +13,22 @@ function convertTextBlock(blockData, cellWidthInPx) {
     // 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 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";
+        '#ffffff';
     // Text box decoration styles (border, background, padding) — no width
     const textBoxStyle = {
         backgroundColor,
@@ -46,11 +44,9 @@ function convertTextBlock(blockData, cellWidthInPx) {
     });
     // 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)({
@@ -62,41 +58,37 @@ function convertTextBlock(blockData, cellWidthInPx) {
         pxChanges: buildStyles_1.allPxAttributes,
     });
     const sanitizedText = (props.text ?? "")
-        .replace(/<p(\s[^>]*)?>/gi, (_, attrs) => `<div${attrs || ""}>`)
+        .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.
+    // Email clients apply `a { color: blue; text-decoration: underline }` which
+    // overrides inherited styles. Inject block color (if available) and reset
+    // text-decoration so inline links match the surrounding text appearance.
     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};` : "";
+    const processedText = sanitizedText.replace(/<a(\s[^>]*)?>/gi, (_match, attrs = '') => {
+        const hasExistingColor = /style\s*=\s*["'][^"']*\bcolor\s*:/i.test(attrs);
+        const colorPart = (!hasExistingColor && blockTextColor) ? `color:${blockTextColor};` : '';
+        const injected = `${colorPart}text-decoration:none;`;
+        if (/\bstyle\s*=/i.test(attrs)) {
+            return `<a${attrs.replace(/(\bstyle\s*=\s*["'])/, `$1${injected}`)}>`;
+        }
+        return `<a${attrs} style="${injected}">`;
+    });
+    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 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;";
+    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}" />`;
             })()
@@ -104,31 +96,31 @@ function convertTextBlock(blockData, cellWidthInPx) {
         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="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>
+        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/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;AAYD,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAGxD"}
+{"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;AAcD,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAGxD"}

package/dist/utils/common.js

@@ -57,8 +57,11 @@ function encodeBlockPropsAttr(props) {
 function toOutlookBgColor(color) {
     if (!color || color === 'transparent')
         return '';
-    const m = color.match(/rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)(?:\s*,\s*[\d.]+)?\s*\)/);
+    const m = color.match(/rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)(?:\s*,\s*([\d.]+))?\s*\)/);
     if (m) {
+        const alpha = m[4] !== undefined ? parseFloat(m[4]) : 1;
+        if (alpha < 1)
+            return '';
         return '#' + [m[1], m[2], m[3]].map(n => parseInt(n).toString(16).padStart(2, '0')).join('');
     }
     return color;