email-builder-utils 1.1.24 → 1.1.27

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

@@ -1 +1 @@
-{"version":3,"file":"jsonToHTML.d.ts","sourceRoot":"","sources":["../../src/utils/jsonToHTML.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAUrC,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;CAChB;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;AAOD,eAAO,MAAM,gBAAgB,kDAAkD,CAAC;AAiDhF,wBAAsB,aAAa,CAAC,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,aAAa,EAAE,MAAM,mBAqB9F;AA2UD,wBAAsB,iBAAiB,CAAC,SAAS,EAAE,GAAG,EAAE,aAAa,EAAE,MAAM,mBAgJ5E"}
+{"version":3,"file":"jsonToHTML.d.ts","sourceRoot":"","sources":["../../src/utils/jsonToHTML.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAUrC,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;CAChB;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;AAOD,eAAO,MAAM,gBAAgB,kDAAkD,CAAC;AAiDhF,wBAAsB,aAAa,CAAC,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,aAAa,EAAE,MAAM,mBAqB9F;AAsVD,wBAAsB,iBAAiB,CAAC,SAAS,EAAE,GAAG,EAAE,aAAa,EAAE,MAAM,mBAoK5E"}

package/dist/utils/jsonToHTML.js

@@ -173,6 +173,9 @@ async function convertImageBlock(blockData, cellWidthInPx) {
     const { style, props } = blockData.data;
     const { altText, imageUrl, navigateToUrl } = props;
     const { width, height, objectFit, borderRadius, borderWidth, borderColor, borderStyle, ...containerStyle } = style;
+    const image = await jimp_1.Jimp.read(imageUrl);
+    const originalWidth = image.bitmap.width;
+    const originalHeight = image.bitmap.height;
     // Ensure border styles are applied only to the container, not the image
     const imageStyle = {
         width,
@@ -181,10 +184,9 @@ async function convertImageBlock(blockData, cellWidthInPx) {
         borderStyle,
         borderRadius: borderRadius,
         borderColor,
+        maxWidth: `${originalWidth}px`, // Limit to original size
+        maxHeight: `${originalHeight}px`,
     };
-    const image = await jimp_1.Jimp.read(imageUrl);
-    const originalWidth = image.bitmap.width;
-    const originalHeight = image.bitmap.height;
     // Add border styles to container for fallback clients
     const containerStyles = buildStyles({
         ...containerStyle,
@@ -265,9 +267,9 @@ async function convertGridBlock(blockData, rootData, cellWidthInPx) {
     const visualRows = Math.ceil(total / columns);
     let html = `
   <!--[if mso]>
-  <table border="0" cellpadding="0" cellspacing="${columnGap}" width="100%" style="${exports.tableCommonStyle}">
+  <table border="0" cellpadding="0" cellspacing="${columnGap}" width="100%" style="${exports.tableCommonStyle}border-collapse: separate;border-spacing:${columnGap}px;">
   <![endif]-->
-  <table border="0" cellpadding="0" cellspacing="${columnGap}" width="100%" role="presentation" style="${exports.tableCommonStyle} ${tableStyles}">
+  <table border="0" cellpadding="0" cellspacing="${columnGap}" width="100%" role="presentation" style="${exports.tableCommonStyle} ${tableStyles}border-collapse: separate;border-spacing:${columnGap}px;">
   `;
     for (let r = 0; r < visualRows; r++) {
         html += "<tr>";
@@ -284,13 +286,13 @@ async function convertGridBlock(blockData, rootData, cellWidthInPx) {
    <td
     width="${widthPercent}%"
     ${responsive ? 'class="stack-column"' : ""}
-    style="vertical-align:${verticalAlign}; padding:0; word-break:break-word; ${styles}"
+    style="vertical-align:${verticalAlign}; word-break:break-word; ${styles} "
   >
     ${childHtml}
   </td>`;
             }
             else {
-                html += `<td width="${widthPercent}%" ${responsive ? 'class="stack-column"' : ""} style="padding:0;"></td>`;
+                html += `<td width="${widthPercent}%" ${responsive ? 'class="stack-column"' : ""} style=""></td>`;
             }
         }
         html += "</tr>";
@@ -359,6 +361,10 @@ async function convertVideoBlock(blockData, cellWidthInPx) {
     const outerContainerStyles = buildStyles({
         ...style,
         width: undefined,
+        borderColor: undefined,
+        borderRadius: undefined,
+        borderWidth: undefined,
+        borderStyle: undefined,
     }, {
         perChanges: addPxOrPerToAttributes,
         pxChanges: addPxToAttributes,
@@ -373,78 +379,94 @@ async function convertVideoBlock(blockData, cellWidthInPx) {
     const vmlLeft = innerContainerWidth / 2 - playIconWidth / 2;
     const vmlTop = calculatedHeight / 2 - playIconHeight / 2;
     const videoContent = `
-    <!--[if mso]>
-    <v:group xmlns:v="urn:schemas-microsoft-com:vml" coordsize="${innerContainerWidth},${calculatedHeight}"
-      coordorigin="0,0"
-      href="${videoLink}"
-      style="width:${innerContainerWidth}px;height:${calculatedHeight}px;">
-      <v:rect fill="t" stroked="f" style="position:absolute;width:${innerContainerWidth}px;height:${calculatedHeight}px;">
-        <v:fill src="${resolvedThumbnail}" type="frame"/>
-      </v:rect>
-      <v:shape type="#_x0000_t75"
-        style="position:absolute;
-               left:${vmlLeft.toFixed(1)}px;
-               top:${vmlTop.toFixed(1)}px;
-               width:${playIconWidth}px;
-               height:${playIconHeight}px;"
-        alt="Play" href="${videoLink}" title="${altText || "Video"}"
-        stroked="f" filled="t">
-        <v:imagedata src="https://app-rsrc.getbee.io/public/resources/components/widgetBar/video-content-icon-sets/light/type-01.png" />
-      </v:shape>
-    </v:group>
-    <![endif]-->
-
-    <!--[if !mso]><!-->
-    <table
-      width="${innerContainerWidth}"
-      cellpadding="0"
-      cellspacing="0"
-      border="0"
-      role="presentation"
-      style="
-        background-image: url('${resolvedThumbnail}');
-        background-size: cover;
-        background-position: center;
-        
-        max-width: ${innerContainerWidth}px;
-        height: ${calculatedHeight}px;
-        box-sizing: border-box;
-      "
-      align="center"
+  <!--[if mso]>
+  <v:group xmlns:v="urn:schemas-microsoft-com:vml"
+    coordsize="${innerContainerWidth},${calculatedHeight}"
+    href="${videoLink}"
+    style="width:${innerContainerWidth}px;height:${calculatedHeight}px;">
+    <v:rect fill="t"  style="position:absolute;width:${innerContainerWidth}px;height:${calculatedHeight}px; stroked="t"
+    strokeweight="${borderWidth}px"
+    strokecolor="${borderColor}"
+    ${borderRadius > 0 ? `arcsize="${Math.min(borderRadius / calculatedHeight, 1).toFixed(2)}"` : ""}
     >
-      <tr>
-        <td style="height: ${calculatedHeight}px; padding: 0; text-align: center; vertical-align: middle; border-radius: ${borderRadius}px;
-        border: ${borderWidth}px solid ${borderColor};" align="center" valign="middle">
-          <a href="${videoLink}" target="_blank" style="display:inline-block; border: 0; outline: none; text-decoration: none;">
-            <img
-              src="https://app-rsrc.getbee.io/public/resources/components/widgetBar/video-content-icon-sets/light/type-01.png"
-              width="${playIconWidth}"
-              alt="Play"
-              style="display: block; border: 0; outline: none; text-decoration: none; height: auto;"
-            />
-          </a>
-        </td>
-      </tr>
-    </table>
-    <!--<![endif]-->
-  `;
+      <v:fill src="${resolvedThumbnail}" type="frame" color="${style?.backgroundColor || "#FFFFFF"}"/>
+    </v:rect>
+    <v:shape type="#_x0000_t75"
+      style="position:absolute;
+             left:${vmlLeft.toFixed(1)}px;
+             top:${vmlTop.toFixed(1)}px;
+             width:${playIconWidth}px;
+             height:${playIconHeight}px;"
+      alt="Play" href="${videoLink}" title="${altText || "Video"}"
+      stroked="f" filled="t">
+      <v:imagedata src="https://app-rsrc.getbee.io/public/resources/components/widgetBar/video-content-icon-sets/light/type-01.png" />
+    </v:shape>
+  </v:group>
+  <![endif]-->
+
+  <!--[if !mso]><!-->
+  <table
+    width="${innerContainerWidth}"
+    cellpadding="0"
+    cellspacing="0"
+    border="0"
+    role="presentation"
+    align="${style?.textAlign || "left"}"
+    style="
+      max-width: ${innerContainerWidth}px;
+      width: 100%;
+      height: ${calculatedHeight}px;
+      background-color: ${style?.backgroundColor || "#FFFFFF"};
+      background-image: url('${resolvedThumbnail}');
+      background-size: cover;
+      background-position: center;
+      background-repeat: no-repeat;
+      box-sizing: border-box;
+      border: ${borderWidth}px ${style?.borderStyle || "solid"} ${borderColor};
+      border-radius: ${borderRadius}px;
+    "
+  >
+    <tr>
+      <td style="padding: 0; height: ${calculatedHeight}px; text-align: center; vertical-align: middle;" valign="middle">
+        <a href="${videoLink}" target="_blank" style="display:inline-block; border: 0; outline: none; text-decoration: none;">
+          <img
+            src="https://app-rsrc.getbee.io/public/resources/components/widgetBar/video-content-icon-sets/light/type-01.png"
+            width="${playIconWidth}"
+            alt="Play"
+            style="display: block;
+            border: 0;
+              outline: none;
+              text-decoration: none;
+              height: auto;"
+          />
+        </a>
+      </td>
+    </tr>
+  </table>
+  <!--<![endif]-->
+`;
     const wrapperHtml = `
-    <table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="margin:0; padding:0; border-collapse: collapse;">
-      <tr>
-        <td align="center" style="padding:0; ${outerContainerStyles}">
-         <table border="0" cellpadding="0" cellspacing="0" role="presentation" 
-  align="center" 
-  style="margin:0 auto; max-width:${cellWidthInPx}px; width:${percentWidth}; border-collapse:collapse;">
-  <tr>
-    <td align="center" style="text-align:center; padding:0;">
-      ${videoContent}
-    </td>
-  </tr>
-</table>
-        </td>
-      </tr>
-    </table>
-  `;
+  <table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="margin:0; padding:0; border-collapse: collapse;">
+    <tr>
+      <td align="${style?.textAlign || "left"}" style="padding:0; ${outerContainerStyles}">
+        <table border="0" cellpadding="0" cellspacing="0" role="presentation" 
+          align="${style?.textAlign || "left"}"
+          style="
+            margin:0;
+            max-width:${cellWidthInPx}px;
+            width:${percentWidth};
+            border-collapse:collapse;
+          ">
+          <tr>
+            <td align="${style?.textAlign || "left"}" style="text-align:${style?.textAlign || "left"}; padding:0;">
+              ${videoContent}
+            </td>
+          </tr>
+        </table>
+      </td>
+    </tr>
+  </table>
+`;
     return wrapperHtml;
 }
 // Enhanced Shape Block HTML Conversion using appendOutlookForShape
@@ -463,92 +485,16 @@ function computeArcSize(borderRadius, widthPx) {
     const px = parseFloat(s.replace("px", "")) || 0;
     return Math.min(px / widthPx, 1).toFixed(2);
 }
-// ---------- Outlook (MSO) wrapper ----------
-async function appendOutlookForShape(content, outerContainerWidth, innerContainerWidth, opts) {
-    // Use the inner container width for VML sizing (exact user dims)
-    const widthPx = Math.round(Math.min(outerContainerWidth, innerContainerWidth));
-    const heightPx = Math.max(1, Math.round(opts.heightPx));
-    const vml = buildVMLShape({
-        shape: opts.shape,
-        widthPx,
-        heightPx,
-        imageUrl: opts.msoBakeImageWithText || opts.imageUrl,
-        backgroundColor: opts.shapeColor || opts.backgroundColor,
-        borderWidth: opts.borderWidth,
-        borderColor: opts.borderColor,
-        borderRadius: opts.borderRadius,
-        text: opts.text,
-        textColor: opts.textColor,
-        // pass raw flag so buildVMLShape knows if image already has text baked-in
-        msoHasBakedText: Boolean(opts.msoBakeImageWithText),
-    });
-    const outlookAlignment = opts.alignment === "center" ? "center" : opts.alignment === "right" ? "right" : "left";
-    // Wrap the VML inside a table so Outlook aligns it correctly
-    return `<!--[if mso]>
-  <table align="${outlookAlignment}" border="0" cellpadding="0" cellspacing="0" style="display:inline-block;">
-    <tr>
-      <td style="padding:${opts.padding?.top || 0}px ${opts.padding?.right || 0}px ${opts.padding?.bottom || 0}px ${opts.padding?.left || 0}px;">
-        ${vml}
-      </td>
-    </tr>
-  </table>
-  <![endif]-->`;
-}
-// ---------- VML builder (produces shape + text inside it for MSO) ----------
-function buildVMLShape({ shape, widthPx, heightPx, imageUrl, backgroundColor, borderWidth, borderColor, borderRadius, text, textColor, msoHasBakedText = false, }) {
-    const bw = borderWidth || 0;
-    const bc = borderColor || "transparent";
-    const hasBorder = bw > 0;
-    const borderAttributes = hasBorder ? `strokeweight="${bw}px" strokecolor="${bc}"` : `stroked="false"`;
-    const fillColor = backgroundColor || "#2F80ED";
-    // choose tag and extra attributes
-    let tag = "rect";
-    let extraAttr = "";
-    if (shape === "circle" || shape === "oval")
-        tag = "oval";
-    if (shape === "rounded" || (borderRadius && borderRadius !== "0")) {
-        tag = "roundrect";
-        extraAttr = ` arcsize="${computeArcSize(borderRadius, widthPx)}"`;
-    }
-    // image fill (if provided)
-    const fillMarkup = imageUrl ? `<v:fill src="${imageUrl}" type="frame" aspect="atleast" />` : "";
-    // If MSO is given a baked image with text, don't produce a v:textbox overlay text (image already contains text)
-    const includeTextbox = !!text && !msoHasBakedText;
-    // v:textbox: use a table + cell to center the text; avoids many Word quirks
-    const textboxInner = includeTextbox
-        ? `<v:textbox inset="0,0,0,0">
-         <center style="width:${widthPx}px;height:${heightPx}px;display:block;">
-           <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="${widthPx}" height="${heightPx}" style="border-collapse:collapse;">
-             <tr>
-               <td align="center" valign="middle" style="font-family:Arial, sans-serif;font-size:14px;line-height:1;color:${textColor || "#000"};padding:6px;">
-                 ${text}
-               </td>
-             </tr>
-           </table>
-         </center>
-       </v:textbox>`
-        : // keep an empty textbox so shape sizing behaves consistently when no text
-            `<v:textbox inset="0,0,0,0"><div style="display:none;">.</div></v:textbox>`;
-    // If there is no imageUrl and no textbox content, use fillcolor for background
-    const fillAttr = imageUrl ? 'fill="true"' : `fill="true" fillcolor="${fillColor}"`;
-    return `
-  <v:${tag} xmlns:v="urn:schemas-microsoft-com:vml"
-    style="width:${widthPx}px;height:${heightPx}px;v-text-anchor:middle;"
-    ${borderAttributes} ${fillAttr}${extraAttr}>
-    ${fillMarkup}
-    ${textboxInner}
-  </v:${tag}>`;
-}
-// ---------- convertShapeBlock (updated, keeps your structure) ----------
+// ---------- Updated convertShapeBlock function ----------
 async function convertShapeBlock(blockData) {
     const { style, props } = blockData.data;
-    const { shape, text, textColor = "#000000", imageUrl } = props;
-    const { width = "100", height = "150", padding = {}, backgroundColor = "#2F80ED", borderRadius, borderWidth = 0, borderStyle = "solid", borderColor = "transparent", customCss, shapeColor, alignment = "left", msoBakeImageWithText } = style || {};
+    const { shape, text, imageUrl } = props;
+    const { width = "100", height = "150", padding = {}, backgroundColor = "#2F80ED", borderRadius, borderWidth = 0, borderStyle = "solid", borderColor = "transparent", customCss, shapeColor, alignment = "left", msoBakeImageWithText, color = "#000000", fontSize = 14, verticalAlign = "center", } = style || {};
     const borderRadiusMap = {
         rectangle: "0",
         rounded: "10px",
         circle: "50%",
-        oval: "50%", // Keep this for modern browsers
+        oval: "50%",
     };
     let resolvedBorderRadius = borderRadius || borderRadiusMap[shape] || "0";
     let resolvedWidthPx = typeof width === "number"
@@ -557,73 +503,80 @@ async function convertShapeBlock(blockData) {
     let resolvedHeightPx = typeof height === "number"
         ? height
         : parseInt(height.toString().replace("px", ""), 10) || 150;
-    // Special handling for different shapes
+    // --- Shape specific constraints ---
     if (shape === "circle") {
-        // Circle: make it a perfect square with 50% border radius
         const side = Math.min(resolvedWidthPx, resolvedHeightPx);
         resolvedWidthPx = side;
         resolvedHeightPx = side;
         resolvedBorderRadius = "50%";
     }
     else if (shape === "oval") {
+        resolvedBorderRadius = "50% / 50%";
     }
-    const finalWidthPx = resolvedWidthPx;
-    const finalHeightPx = resolvedHeightPx;
+    const finalBackgroundColor = shapeColor || backgroundColor;
     const alignmentStyles = {
         left: "margin-right:auto;margin-left:0;",
         center: "margin-left:auto;margin-right:auto;",
         right: "margin-left:auto;margin-right:0;",
     };
     const alignmentStyle = alignmentStyles[alignment] || "";
-    const finalBackgroundColor = shapeColor || backgroundColor;
-    // --- Modern clients content ---
+    const verticalAlignStyles = {
+        top: "align-items:flex-start;padding-top:8px;",
+        center: "align-items:center;",
+        bottom: "align-items:flex-end;padding-bottom:8px;",
+    };
+    const verticalAlignStyle = verticalAlignStyles[verticalAlign] ||
+        verticalAlignStyles.center;
+    // Text styling (safe across clients)
+    const textSizeStyle = `font-size:${fontSize}px;line-height:1.3;word-break:break-word;overflow-wrap:break-word;text-align:center;color:${color};`;
+    // ============================
+    // Modern HTML (non-MSO)
+    // ============================
     let nonMsoContent = "";
-    // For modern browsers, use CSS border-radius
-    const modernBorderRadius = shape === "oval" ? "50%" : resolvedBorderRadius;
-    // Case 1: Image + Text → use background-image
     if (imageUrl && text) {
         nonMsoContent = `
-<div style="display:inline-block;width:${finalWidthPx}px;height:${finalHeightPx}px;
+<div style="display:inline-block;width:${resolvedWidthPx}px;height:${resolvedHeightPx}px;
   border:${borderWidth}px ${borderStyle} ${borderColor};
-  border-radius:${modernBorderRadius};
+  border-radius:${resolvedBorderRadius};
   background:${finalBackgroundColor} url('${imageUrl}') center/cover no-repeat;
   overflow:hidden;${alignmentStyle}${customCss || ""}">
-  <div style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;">
-    <div style="color:${textColor};text-align:center;padding:8px;box-sizing:border-box;word-break:break-word;
-      border-radius:4px;max-width:90%;">
+  <div style="width:100%;height:100%;display:flex;${verticalAlignStyle}justify-content:center;overflow:hidden;">
+    <div style="${textSizeStyle}padding:6px;max-width:90%;-webkit-line-clamp:3;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden;">
       ${text}
     </div>
   </div>
 </div>`;
     }
-    // Case 2: Image only → use <img>
     else if (imageUrl) {
         nonMsoContent = `
-<div style="display:inline-block;width:${finalWidthPx}px;height:${finalHeightPx}px;
+<div style="display:inline-block;width:${resolvedWidthPx}px;height:${resolvedHeightPx}px;
   border:${borderWidth}px ${borderStyle} ${borderColor};
-  border-radius:${modernBorderRadius};
+  border-radius:${resolvedBorderRadius};
   overflow:hidden;${alignmentStyle}${customCss || ""}">
-  <img src="${imageUrl}" alt="${text || "Shape image"}"
-       width="${finalWidthPx}" height="${finalHeightPx}"
-       style="width:100%;height:100%;object-fit:cover;border-radius:${modernBorderRadius};display:block;" />
+  <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: No image → solid background
     else {
+        const circlePadding = shape === "circle" ? Math.round(resolvedHeightPx * 0.15) : 8;
         nonMsoContent = `
-<div style="display:inline-block;width:${finalWidthPx}px;height:${finalHeightPx}px;
+<div style="display:inline-block;width:${resolvedWidthPx}px;height:${resolvedHeightPx}px;
   background:${finalBackgroundColor};
   border:${borderWidth}px ${borderStyle} ${borderColor};
-  border-radius:${modernBorderRadius};
-  ${alignmentStyle}${customCss || ""}">
-  <div style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;
-    color:${textColor};text-align:center;padding:8px;box-sizing:border-box;word-break:break-word;">
-    ${text || ""}
+  border-radius:${resolvedBorderRadius};
+  overflow:hidden;${alignmentStyle}${customCss || ""}">
+  <div style="width:100%;height:100%;display:flex;${verticalAlignStyle}justify-content:center;padding:${circlePadding}px;box-sizing:border-box;">
+    <div style="${textSizeStyle}max-width:90%;overflow:hidden;">
+      ${text || ""}
+    </div>
   </div>
 </div>`;
     }
-    // --- Old Outlook (MSO) VML ---
-    const outlookContent = await appendOutlookForShape(nonMsoContent, finalWidthPx, finalWidthPx, {
+    // ============================
+    // Outlook (VML) version
+    // ============================
+    const outlookContent = await appendOutlookForShape(nonMsoContent, resolvedWidthPx, resolvedWidthPx, {
         shape,
         imageUrl,
         backgroundColor,
@@ -631,19 +584,22 @@ async function convertShapeBlock(blockData) {
         borderWidth,
         borderColor,
         borderRadius: resolvedBorderRadius,
-        heightPx: finalHeightPx,
+        heightPx: resolvedHeightPx,
         text,
-        textColor,
+        textColor: color,
+        textSize: fontSize,
+        verticalAlign,
         alignment,
         padding,
-        msoBakeImageWithText
+        msoBakeImageWithText,
     });
-    // Wrap in container table
-    const containerTable = `
+    // ============================
+    // Final combined block
+    // ============================
+    return `
 <table width="100%" style="border-collapse:collapse;table-layout:fixed;">
   <tr>
-    <td style="padding:${padding.top || 0}px ${padding.right || 0}px ${padding.bottom || 0}px ${padding.left || 0}px;
-      background-color:transparent;text-align:${alignment};">
+    <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}
@@ -651,8 +607,85 @@ async function convertShapeBlock(blockData) {
     </td>
   </tr>
 </table>`;
-    return appendOutlookSupport(containerTable, buildStyles(style, {
-        perChanges: addPxOrPerToAttributes,
-        pxChanges: allPxAttributes,
-    }));
+}
+// ---------- Updated VML builder with better text containment ----------
+function buildVMLShape({ shape, widthPx, heightPx, imageUrl, backgroundColor, borderWidth, borderColor, borderRadius, text, textColor = "#000000", textSize = 14, verticalAlign = "center", msoHasBakedText = false, }) {
+    // --- Basic setup ---
+    const bw = borderWidth || 0;
+    const bc = borderColor || "transparent";
+    const borderAttrs = bw > 0
+        ? `strokeweight="${bw}px" strokecolor="${bc}"`
+        : `stroked="false"`;
+    const fillColor = backgroundColor || "#2F80ED";
+    const fillMarkup = `<v:fill ${imageUrl ? `src="${imageUrl}" type="frame" aspect="atleast"` : ""} color="${fillColor}" />`;
+    // --- Shape tag ---
+    let tag = "rect";
+    let extraAttr = "";
+    if (shape === "circle" || shape === "oval") {
+        tag = "oval";
+    }
+    else if (shape === "rounded") {
+        tag = "roundrect";
+        extraAttr = `arcsize="${computeArcSize(borderRadius, widthPx)}"`;
+    }
+    // --- Text alignment ---
+    const vAlignMap = { top: "top", center: "middle", bottom: "bottom" };
+    const vAlign = vAlignMap[verticalAlign] || "middle";
+    const safeFontSize = Math.max(textSize, 10);
+    // --- Text inside shape ---
+    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:center;">
+               <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>`;
+    // --- Final shape markup ---
+    return `
+<v:${tag} xmlns:v="urn:schemas-microsoft-com:vml"
+  style="width:${widthPx}px;height:${heightPx}px;
+         mso-position-horizontal:center;
+         mso-position-vertical:center;"
+  ${borderAttrs}
+  fill="true" fillcolor="${fillColor}"${extraAttr}>
+  ${fillMarkup}
+  ${textboxMarkup}
+</v:${tag}>`;
+}
+// ---------- Updated appendOutlookForShape ----------
+async function appendOutlookForShape(content, outerContainerWidth, innerContainerWidth, opts) {
+    const widthPx = Math.round(Math.min(outerContainerWidth, innerContainerWidth));
+    const heightPx = Math.max(1, Math.round(opts.heightPx));
+    const vml = buildVMLShape({
+        shape: opts.shape,
+        widthPx,
+        heightPx,
+        imageUrl: opts.msoBakeImageWithText || opts.imageUrl,
+        backgroundColor: opts.shapeColor || opts.backgroundColor,
+        borderWidth: opts.borderWidth,
+        borderColor: opts.borderColor,
+        borderRadius: opts.borderRadius,
+        text: opts.text,
+        textColor: opts.textColor,
+        textSize: opts.textSize,
+        msoHasBakedText: Boolean(opts.msoBakeImageWithText),
+    });
+    const pad = opts.padding || {};
+    const align = opts.alignment || "left";
+    const valign = opts.verticalAlign || "middle";
+    return `<!--[if mso]>
+  <table align="${align}" border="0" cellpadding="0" cellspacing="0"
+         style="width:${widthPx}px;height:${heightPx}px;">
+    <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]-->`;
 }

package/package.json

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