email-builder-utils 1.1.49 → 1.1.52

package/dist/utils/blocks/button.d.ts

@@ -1,29 +1,2 @@
-export declare function appendOutlookForButton(buttonData: {
-    style: any;
-    text: string;
-    navigateToUrl: string;
-}): {
-    innerContent: string;
-    computed: {
-        fs: any;
-        fontWeight: any;
-        containerAlign: any;
-        padTop: any;
-        padRight: any;
-        padBottom: any;
-        padLeft: any;
-        explicitWidth: any;
-        vmlWidth: number;
-        safeColor: any;
-        bgColor: any;
-        safeFF: string;
-        finalHeight: any;
-        explicitHeight: any;
-        bw: any;
-        br: any;
-        bdColor: any;
-        bdStyle: any;
-    };
-};
 export declare function convertButtonBlock(blockData: any): string;
 //# sourceMappingURL=button.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/utils/blocks/button.ts"],"names":[],"mappings":"AAIA,wBAAgB,sBAAsB,CAAC,UAAU,EAAE;IAAE,KAAK,EAAE,GAAG,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,aAAa,EAAE,MAAM,CAAA;CAAE;;;;;;;;;;;;;;;;;;;;;;EA6ErG;AAED,wBAAgB,kBAAkB,CAAC,SAAS,EAAE,GAAG,UAgEhD"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/utils/blocks/button.ts"],"names":[],"mappings":"AA6IA,wBAAgB,kBAAkB,CAAC,SAAS,EAAE,GAAG,UAuFhD"}

package/dist/utils/blocks/button.js

@@ -1,6 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.appendOutlookForButton = appendOutlookForButton;
 exports.convertButtonBlock = convertButtonBlock;
 const buildStyles_1 = require("../buildStyles");
 const fontFallback_1 = require("../fontFallback");
@@ -26,36 +25,64 @@ function appendOutlookForButton(buttonData) {
     const fontWeight = style.fontWeight || 400;
     const containerAlign = style.alignment || style.textAlign || "left";
     const explicitWidth = typeof style.width === "number" && style.width > 0 ? style.width : 0;
+    // VML requires explicit pixel width — estimate from text + padding when not set.
+    // Slightly conservative multiplier to reduce clipping risk in Outlook.
     const estimatedTextWidth = Math.ceil((text || "").length * fs * 0.62);
     const vmlWidthBase = explicitWidth || Math.max(120, estimatedTextWidth + padLeft + padRight + bw * 2);
+    // For pill buttons (large radius), ensure enough width so the curved ends don't encroach.
     const minPillWidth = br > 0 ? Math.ceil(finalHeight * 2) : 0;
     const vmlWidth = Math.max(vmlWidthBase, minPillWidth);
     const borderCss = bw > 0 ? `border:${bw}px ${bdStyle} ${bdColor};` : "";
-    const widthCss = explicitWidth ? `width:${explicitWidth}px;` : "";
-    const nonMsoVerticalSizing = explicitHeight > 0
-        ? `height:${finalHeight}px;line-height:${finalHeight}px;padding:0 ${padRight}px 0 ${padLeft}px;`
-        : `padding:${padTop}px ${padRight}px ${padBottom}px ${padLeft}px;line-height:${fs}px;`;
-    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;${nonMsoVerticalSizing}text-align:center;white-space:nowrap;-webkit-text-size-adjust:none;box-sizing:border-box;${widthCss}mso-hide:all;">${text}</a>
+    // Empty href triggers New Outlook's link sanitizer to strip surrounding styles.
+    const safeHref = navigateToUrl && navigateToUrl.trim() ? navigateToUrl : "#";
+    // ── Non-MSO fallback ──
+    // All visual box styling (bg, border, radius, width, height) lives on the <td>.
+    // New Outlook (and many web mail clients) strip these from <a> inline styles,
+    // treating anchors as inline text. The <td> is a block container and is preserved.
+    // The <a> fills the cell so the entire button is the click target — typography only.
+    // Down-level-hidden conditional comments hide this branch from classic Outlook
+    // (which renders the VML below), so both engines see exactly one button.
+    const tdWidthCss = explicitWidth ? `width:${explicitWidth}px;` : "";
+    const tdHeightCss = explicitHeight > 0 ? `height:${finalHeight}px;` : "";
+    const tdWidthAttr = explicitWidth ? ` width="${explicitWidth}"` : "";
+    const tdHeightAttr = explicitHeight > 0 ? ` height="${finalHeight}"` : "";
+    // <a> fills the cell. When height is explicit, line-height = inner height for vertical
+    // centering. When not, padding provides the vertical sizing (matches canvas behavior).
+    const anchorBoxStyles = explicitHeight > 0
+        ? `display:block;line-height:${finalHeight - 2 * bw}px;padding:0 ${padRight}px;`
+        : `display:block;padding:${padTop}px ${padRight}px ${padBottom}px ${padLeft}px;line-height:${fs}px;`;
+    const tableAlignAttr = ` align="${containerAlign}"`;
+    const tableMargin = containerAlign === 'center' ? 'margin:0 auto;'
+        : containerAlign === 'right' ? 'margin-left:auto;margin-right:0;'
+            : '';
+    const nonMsoAnchor = `<!--[if !mso]><!-->
+<table border="0" cellpadding="0" cellspacing="0" role="presentation"${tableAlignAttr} style="border-collapse:separate;${tableMargin}">
+  <tr>
+    <td bgcolor="${bgColor}" align="center" valign="middle"${tdWidthAttr}${tdHeightAttr} style="background-color:${bgColor};border-radius:${br}px;${borderCss}${tdWidthCss}${tdHeightCss}box-sizing:border-box;mso-padding-alt:0;text-align:center;">
+      <a href="${safeHref}" target="_blank" rel="noreferrer noopener"
+         style="${anchorBoxStyles}color:${safeColor};font-family:${safeFF};font-size:${fs}px;font-weight:${fontWeight};text-decoration:none;text-align:center;white-space:nowrap;-webkit-text-size-adjust:none;box-sizing:border-box;">${text}</a>
+    </td>
+  </tr>
+</table>
 <!--<![endif]-->`;
+    // ── MSO: VML bulletproof button (classic Outlook / Word engine) ──
+    // VML arcsize is a percentage of half the shorter side. Clamp to 50% (pill).
     const arcSizePct = br > 0 ? Math.min(Math.round((br / (finalHeight / 2)) * 100), 50) : 0;
     const strokeAttrs = bw > 0
         ? `stroke="true" strokecolor="${bdColor}" strokeweight="${bw}px"`
         : `stroke="false"`;
-    const msoButton = `<!--[if mso]>
-<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word"
-  href="${navigateToUrl}"
-  style="height:${finalHeight}px;v-text-anchor:middle;width:${vmlWidth}px;"
-  arcsize="${arcSizePct}%"
-  ${strokeAttrs}
-  fillcolor="${bgColor}">
-  <w:anchorlock/>
-  <v:textbox inset="0,0,0,0">
-    <center style="color:${safeColor};font-family:${safeFF};font-size:${fs}px;font-weight:${fontWeight};mso-line-height-rule:exactly;line-height:${finalHeight}px;text-decoration:none;">${text}</center>
-  </v:textbox>
-</v:roundrect>
+    const msoButton = `<!--[if mso]>
+<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word"
+  href="${safeHref}"
+  style="height:${finalHeight}px;v-text-anchor:middle;width:${vmlWidth}px;"
+  arcsize="${arcSizePct}%"
+  ${strokeAttrs}
+  fillcolor="${bgColor}">
+  <w:anchorlock/>
+  <v:textbox inset="0,0,0,0">
+    <center style="color:${safeColor};font-family:${safeFF};font-size:${fs}px;font-weight:${fontWeight};mso-line-height-rule:exactly;line-height:${finalHeight}px;text-decoration:none;">${text}</center>
+  </v:textbox>
+</v:roundrect>
 <![endif]-->`;
     const innerContent = containerAlign === "center"
         ? `<center>${msoButton}${nonMsoAnchor}</center>`
@@ -63,12 +90,24 @@ function appendOutlookForButton(buttonData) {
     return {
         innerContent,
         computed: {
-            fs, fontWeight, containerAlign,
-            padTop, padRight, padBottom, padLeft,
-            explicitWidth, vmlWidth,
-            safeColor, bgColor, safeFF,
-            finalHeight, explicitHeight,
-            bw, br, bdColor, bdStyle,
+            fs,
+            fontWeight,
+            containerAlign,
+            padTop,
+            padRight,
+            padBottom,
+            padLeft,
+            explicitWidth,
+            vmlWidth,
+            safeColor,
+            bgColor,
+            safeFF,
+            finalHeight,
+            explicitHeight,
+            bw,
+            br,
+            bdColor,
+            bdStyle,
         },
     };
 }
@@ -79,9 +118,20 @@ function convertButtonBlock(blockData) {
     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,
+            fontFamily,
+            fontSize,
+            fontWeight,
+            textAlign,
+            borderColor,
+            borderRadius,
+            borderWidth,
+            borderStyle,
+            buttonPadding,
+            color,
+            buttonColor,
+            width,
+            height,
+            alignment,
         },
         text: text || "",
         navigateToUrl: navigateToUrl || "",
@@ -117,14 +167,14 @@ function convertButtonBlock(blockData) {
         hideOnDesktop: Boolean(props.hideOnDesktop),
         hideOnMobile: Boolean(props.hideOnMobile),
     });
-    return `
-<table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" class="${visibilityClass}" data-block-type="button" data-block-props="${buttonBlockProps}">
-  <tr>
-    <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>
+    return `
+<table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" class="${visibilityClass}" data-block-type="button" data-block-props="${buttonBlockProps}" style="border-collapse:collapse;table-layout:fixed;">
+  <tr>
+    <td align="${computed.containerAlign}"${(0, common_1.buildOutlookBgAttr)(containerBg)}
+        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>
 `;
 }

package/dist/utils/blocks/dividers.js

@@ -21,23 +21,23 @@ function convertDividerBlockToHtml(blockData) {
         hideOnMobile ? "hide-mobile" : "",
         hideOnDesktop ? "hide-desktop" : "",
     ].filter(Boolean).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:100%;"
-        >
-          &nbsp;
-        </td>
-      </tr>
-    </table>
+    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:100%;"
+        >
+          &nbsp;
+        </td>
+      </tr>
+    </table>
   `;
     return (0, outlookSupport_1.appendOutlookSupport)(dividerContent, contentStyle, visibilityClass);
 }
@@ -55,18 +55,18 @@ function convertVerticalDividerBlockToHtml(blockData) {
         perChanges: [],
         pxChanges: buildStyles_1.allPxAttributes,
     });
-    return `
-  <table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation"
-         style="${buildStyles_1.tableCommonStyle}; max-width:600px;" class="${visibilityClass}" data-block-type="vdivider">
-    <tr>
-      <td style="${outerStyles}; text-align:center; vertical-align:middle;">
-        <!--[if mso | IE]>
-        <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fillcolor="${dividerColor}" style="width:${width}px;height:${height}px;" stroke="f"></v:rect>
-        <![endif]-->
-        <!--[if !mso]><!-->
-        <div style="display:inline-block;width:${width}px;height:${height}px;background:${dividerColor};line-height:0;font-size:0;">&nbsp;</div>
-        <!--<![endif]-->
-      </td>
-    </tr>
+    return `
+  <table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation"
+         style="${buildStyles_1.tableCommonStyle}; max-width:600px;" class="${visibilityClass}" data-block-type="vdivider">
+    <tr>
+      <td style="${outerStyles}; text-align:center; vertical-align:middle;">
+        <!--[if mso | IE]>
+        <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fillcolor="${dividerColor}" style="width:${width}px;height:${height}px;" stroke="f"></v:rect>
+        <![endif]-->
+        <!--[if !mso]><!-->
+        <div style="display:inline-block;width:${width}px;height:${height}px;background:${dividerColor};line-height:0;font-size:0;">&nbsp;</div>
+        <!--<![endif]-->
+      </td>
+    </tr>
   </table>`;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../../src/utils/blocks/grid.ts"],"names":[],"mappings":"AAMA,wBAAsB,gBAAgB,CAAC,SAAS,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAE,aAAa,EAAE,MAAM,mBAiO1F;AAED,wBAAsB,oBAAoB,CACxC,SAAS,EAAE,GAAG,EACd,QAAQ,EAAE,GAAG,EACb,gBAAgB,EAAE,MAAM,EACxB,iBAAiB,EAAE,MAAM,EACzB,mBAAmB,UAAQ;;;GAoE5B"}
+{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../../src/utils/blocks/grid.ts"],"names":[],"mappings":"AAMA,wBAAsB,gBAAgB,CACpC,SAAS,EAAE,GAAG,EACd,QAAQ,EAAE,GAAG,EACb,aAAa,EAAE,MAAM,mBA0TtB;AAED,wBAAsB,oBAAoB,CACxC,SAAS,EAAE,GAAG,EACd,QAAQ,EAAE,GAAG,EACb,gBAAgB,EAAE,MAAM,EACxB,iBAAiB,EAAE,MAAM,EACzB,mBAAmB,UAAQ;;;GAwG5B"}