email-builder-utils 1.1.26 → 1.1.28

package/dist/types/Template.d.ts

@@ -9,7 +9,8 @@ export declare enum BlockType {
     DIVIDER = "Divider",
     EMAILLAYOUT = "EmailLayout",
     VIDEO = "Video",
-    SHAPE = "Shape"
+    SHAPE = "Shape",
+    VDivider = "VDivider"
 }
 export declare enum visibility {
     PUBLIC = "PUBLIC",

package/dist/types/Template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Template.d.ts","sourceRoot":"","sources":["../../src/types/Template.ts"],"names":[],"mappings":"AAAA,oBAAY,SAAS;IACnB,IAAI,SAAS;IACb,KAAK,UAAU;IACf,MAAM,WAAW;IACjB,IAAI,YAAY;IAChB,KAAK,UAAU;IACf,QAAQ,WAAW;IACnB,MAAM,WAAW;IACjB,OAAO,YAAY;IACnB,WAAW,gBAAgB;IAC3B,KAAK,UAAU;IACf,KAAK,UAAU;CAChB;AAED,oBAAY,UAAU;IACpB,MAAM,WAAW;IACjB,OAAO,YAAY;IACnB,WAAW,gBAAgB;CAC5B;AAED,UAAU,MAAM;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,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,MAAM;IACd,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAED,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,SAAS,CAAC;IAChB,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;QACd,WAAW,EAAE,MAAM,EAAE,CAAC;KACvB,CAAC;CACH"}
+{"version":3,"file":"Template.d.ts","sourceRoot":"","sources":["../../src/types/Template.ts"],"names":[],"mappings":"AAAA,oBAAY,SAAS;IACnB,IAAI,SAAS;IACb,KAAK,UAAU;IACf,MAAM,WAAW;IACjB,IAAI,YAAY;IAChB,KAAK,UAAU;IACf,QAAQ,WAAW;IACnB,MAAM,WAAW;IACjB,OAAO,YAAY;IACnB,WAAW,gBAAgB;IAC3B,KAAK,UAAU;IACf,KAAK,UAAU;IACf,QAAQ,aAAa;CACtB;AAED,oBAAY,UAAU;IACpB,MAAM,WAAW;IACjB,OAAO,YAAY;IACnB,WAAW,gBAAgB;CAC5B;AAED,UAAU,MAAM;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,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,MAAM;IACd,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAED,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,SAAS,CAAC;IAChB,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;QACd,WAAW,EAAE,MAAM,EAAE,CAAC;KACvB,CAAC;CACH"}

package/dist/types/Template.js

@@ -14,6 +14,7 @@ var BlockType;
     BlockType["EMAILLAYOUT"] = "EmailLayout";
     BlockType["VIDEO"] = "Video";
     BlockType["SHAPE"] = "Shape";
+    BlockType["VDivider"] = "VDivider";
 })(BlockType || (exports.BlockType = BlockType = {}));
 var visibility;
 (function (visibility) {

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;AAsVD,wBAAsB,iBAAiB,CAAC,SAAS,EAAE,GAAG,EAAE,aAAa,EAAE,MAAM,mBAoK5E"}
+{"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;AAYD,eAAO,MAAM,gBAAgB,kDAAkD,CAAC;AA2DhF,wBAAsB,aAAa,CACjC,SAAS,EAAE,UAAU,EACrB,QAAQ,EAAE,GAAG,EACb,aAAa,EAAE,MAAM,mBAwBtB;AAobD,wBAAsB,iBAAiB,CAAC,SAAS,EAAE,GAAG,EAAE,aAAa,EAAE,MAAM,mBA8K5E"}

package/dist/utils/jsonToHTML.js

@@ -6,7 +6,12 @@ exports.convertVideoBlock = convertVideoBlock;
 const jimp_1 = require("jimp");
 const types_1 = require("../types");
 const common_1 = require("./common");
-const addPxToAttributes = ["fontSize", "lineHeight", "borderRadius", "borderWidth"];
+const addPxToAttributes = [
+    "fontSize",
+    "lineHeight",
+    "borderRadius",
+    "borderWidth",
+];
 const addPxOrPerToAttributes = ["width", "height"];
 const allPxAttributes = [...addPxToAttributes, ...addPxOrPerToAttributes];
 exports.tableCommonStyle = "border-collapse:collapse; table-layout:fixed;";
@@ -37,7 +42,8 @@ function buildStyles(style, { pxChanges, perChanges }) {
             return;
         if (value === undefined || value === null || value === "")
             return;
-        if ((key === "padding" || key === "buttonPadding") && typeof value === "object") {
+        if ((key === "padding" || key === "buttonPadding") &&
+            typeof value === "object") {
             const padding = value;
             value = `${padding.top}px ${padding.right}px ${padding.bottom}px ${padding.left}px`;
         }
@@ -72,6 +78,8 @@ async function convertToHtml(blockData, rootData, cellWidthInPx) {
             return convertVideoBlock(blockData, cellWidthInPx);
         case types_1.BlockType.SHAPE:
             return await convertShapeBlock(blockData);
+        case types_1.BlockType.VDivider:
+            return convertVerticalDividerBlockToHtml(blockData);
         default:
             return "";
     }
@@ -124,20 +132,36 @@ function convertSpacerBlockToHtml(blockData) {
 function convertTextBlock(blockData) {
     const { style, props } = blockData.data;
     const { width, backgroundColor, padding, borderRadius, borderStyle, borderColor, borderWidth, textContainerBackgroundColor, textContainerPadding, ...rest } = style;
-    const textBoxStyle = { width, backgroundColor, padding, borderRadius, borderStyle, borderColor, borderWidth };
+    const textBoxStyle = {
+        width,
+        backgroundColor,
+        padding,
+        borderRadius,
+        borderStyle,
+        borderColor,
+        borderWidth,
+    };
     const convertedTextStyle = buildStyles(textBoxStyle, {
         perChanges: [],
         pxChanges: allPxAttributes,
     });
-    const styles = buildStyles({ padding: textContainerPadding, backgroundColor: textContainerBackgroundColor, ...rest }, {
+    const styles = buildStyles({
+        padding: textContainerPadding,
+        backgroundColor: textContainerBackgroundColor,
+        ...rest,
+    }, {
         perChanges: [],
         pxChanges: allPxAttributes,
     });
-    const sanitizedText = (props.text ?? "").replaceAll(/<p>/g, "<div>").replaceAll(/<\/p>/g, "</div>");
+    const sanitizedText = (props.text ?? "")
+        .replaceAll(/<p>/g, "<div>")
+        .replaceAll(/<\/p>/g, "</div>");
     const navigateToUrl = props.navigateToUrl || "";
     const convertedTextBox = `<div style="display: inline-block; max-width: 100%; box-sizing: border-box; ${convertedTextStyle}">${sanitizedText.replaceAll(/\n/g, "<br>")}</div>`;
     const textContent = appendOutlookSupport(convertedTextBox, styles);
-    return navigateToUrl ? `<a href="${navigateToUrl}" rel="noreferrer noopener" style="color:inherit; text-decoration:none; cursor:pointer;">${textContent}</a>` : textContent;
+    return navigateToUrl
+        ? `<a href="${navigateToUrl}" rel="noreferrer noopener" style="color:inherit; text-decoration:none; cursor:pointer;">${textContent}</a>`
+        : textContent;
 }
 async function appendOutlookForImage(content, outerContainerWidth, innerContainerWidth, imageUrl, style = {}) {
     const image = await jimp_1.Jimp.read(imageUrl);
@@ -150,8 +174,12 @@ async function appendOutlookForImage(content, outerContainerWidth, innerContaine
     const borderColor = style?.borderColor || "transparent";
     const borderRadius = parseInt(style?.borderRadius) || 0;
     const useRoundRect = borderRadius > 0;
-    const arcsize = useRoundRect ? Math.min(borderRadius / scaledHeight, 1).toFixed(2) : "";
-    const borderAttributes = borderWidth > 0 ? `strokeweight="${borderWidth}px" strokecolor="${borderColor}"` : `stroked="false"`;
+    const arcsize = useRoundRect
+        ? Math.min(borderRadius / scaledHeight, 1).toFixed(2)
+        : "";
+    const borderAttributes = borderWidth > 0
+        ? `strokeweight="${borderWidth}px" strokecolor="${borderColor}"`
+        : `stroked="false"`;
     const outlookImage = `<!--[if mso]>
   <v:${useRoundRect ? "roundrect" : "rect"} xmlns:v="urn:schemas-microsoft-com:vml"
     style="width:${scaledWidth}px;height:${scaledHeight}px;"
@@ -173,6 +201,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 +212,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,
@@ -194,7 +224,11 @@ async function convertImageBlock(blockData, cellWidthInPx) {
         pxChanges: addPxToAttributes,
     });
     const imageElement = `<img src="${imageUrl}" alt="${altText}" style="${imageTagStyles}; max-width: ${originalWidth}px; max-height: ${originalHeight}px;" />`;
-    const innerContainerWidth = ((typeof width === "string" ? parseInt(width.replace("%", "")) : width) / 100) * (cellWidthInPx - (style?.padding?.left || 0) - (style?.padding?.right || 0));
+    const innerContainerWidth = ((typeof width === "string" ? parseInt(width.replace("%", "")) : width) /
+        100) *
+        (cellWidthInPx -
+            (style?.padding?.left || 0) -
+            (style?.padding?.right || 0));
     const outlookImage = await appendOutlookForImage(imageElement, cellWidthInPx, innerContainerWidth, imageUrl, style);
     const imageContent = appendOutlookSupport(outlookImage, containerStyles);
     return navigateToUrl
@@ -203,7 +237,9 @@ async function convertImageBlock(blockData, cellWidthInPx) {
 }
 function appendOutlookForButton(content, buttonStyle, navigateToUrl, text) {
     const { width = 200, height = 44, borderRadius = 0, borderColor = "transparent", borderWidth = 0, buttonColor = "none", buttonPadding = { top: 0, bottom: 0, left: 0, right: 0 }, color = "#000000", fontFamily = "Arial, sans-serif", fontSize = 16, fontWeight = 400, } = buttonStyle;
-    const borderAttributes = borderWidth > 0 ? `strokeweight="${borderWidth}px" strokecolor="${borderColor}"` : `stroked="false"`;
+    const borderAttributes = borderWidth > 0
+        ? `strokeweight="${borderWidth}px" strokecolor="${borderColor}"`
+        : `stroked="false"`;
     return `
 <!--[if mso]>
 <v:${borderRadius ? "roundrect" : "rect"} xmlns:v="urn:schemas-microsoft-com:vml" href="${navigateToUrl}"
@@ -385,7 +421,9 @@ async function convertVideoBlock(blockData, cellWidthInPx) {
     <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)}"` : ""}
+    ${borderRadius > 0
+        ? `arcsize="${Math.min(borderRadius / calculatedHeight, 1).toFixed(2)}"`
+        : ""}
     >
       <v:fill src="${resolvedThumbnail}" type="frame" color="${style?.backgroundColor || "#FFFFFF"}"/>
     </v:rect>
@@ -483,92 +521,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"
@@ -577,73 +539,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,
@@ -651,19 +620,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}
@@ -671,8 +643,108 @@ async function convertShapeBlock(blockData) {
     </td>
   </tr>
 </table>`;
-    return appendOutlookSupport(containerTable, buildStyles(style, {
-        perChanges: addPxOrPerToAttributes,
+}
+// ---------- 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]-->`;
+}
+function convertVerticalDividerBlockToHtml(blockData) {
+    const { style } = blockData.data;
+    const { width, height, dividerColor, ...rest } = style;
+    // Convert other styles to inline-safe HTML attributes
+    const convertedStyle = buildStyles(rest, {
+        perChanges: [],
         pxChanges: allPxAttributes,
-    }));
+    });
+    // Outlook-safe vertical divider
+    const dividerContent = `
+    <table cellpadding="0" cellspacing="0" border="0" align="center" style="width:auto; ${convertedStyle}">
+      <tr>
+        <td style="vertical-align: middle; text-align: center;">
+          <!--[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>
+  `;
+    return appendOutlookSupport(dividerContent, convertedStyle);
 }

package/package.json

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