email-builder-utils 1.1.27 → 1.1.29

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;CAGhB;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;CAGhB;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;AAsbD,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 "";
     }
@@ -82,16 +90,17 @@ function appendOutlookSupport(content, contentStyle) {
   `;
 }
 function convertDividerBlockToHtml(blockData) {
-    const { style } = blockData.data;
-    const { thickness, dividerColor, ...rest } = style;
+    const { style, props } = blockData.data;
+    const { thickness, dividerColor, width, ...rest } = style;
     const convertedStyle = buildStyles(rest, {
         perChanges: [],
         pxChanges: allPxAttributes,
     });
+    const dividerWidth = width || "100%";
     const dividerContent = `
-    <table width="100%" cellpadding="0" cellspacing="0">
+    <table width="${dividerWidth}%" cellpadding="0" cellspacing="0">
       <tr>
-        <td height="${thickness}" style="font-size:1px; line-height:1px; background:${dividerColor};">&nbsp;</td>
+        <td height="${thickness}" style="font-size:1px; line-height:1px; background:${dividerColor}; width:${dividerWidth};">&nbsp;</td>
       </tr>
     </table>
   `;
@@ -124,20 +133,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 +175,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;"
@@ -196,7 +225,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
@@ -205,7 +238,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}"
@@ -387,7 +422,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>
@@ -486,10 +523,278 @@ function computeArcSize(borderRadius, widthPx) {
     return Math.min(px / widthPx, 1).toFixed(2);
 }
 // ---------- Updated convertShapeBlock function ----------
+// async function convertShapeBlock(blockData: IBlockData) {
+//   const { style, props } = blockData.data;
+//   const { shape, text, imageUrl } = props as any;
+//   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: Record<string, string> = {
+//     rectangle: "0",
+//     rounded: "10px",
+//     circle: "50%",
+//     oval: "50%",
+//   };
+//   let resolvedBorderRadius = borderRadius || borderRadiusMap[shape] || "0";
+//   let resolvedWidthPx =
+//     typeof width === "number"
+//       ? width
+//       : parseInt(width.toString().replace("px", ""), 10) || 100;
+//   let resolvedHeightPx =
+//     typeof height === "number"
+//       ? height
+//       : parseInt(height.toString().replace("px", ""), 10) || 150;
+//   // --- Shape specific constraints ---
+//   if (shape === "circle") {
+//     const side = Math.min(resolvedWidthPx, resolvedHeightPx);
+//     resolvedWidthPx = side;
+//     resolvedHeightPx = side;
+//     resolvedBorderRadius = "50%";
+//   } else if (shape === "oval") {
+//     resolvedBorderRadius = "50% / 50%";
+//   }
+//   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 as keyof typeof alignmentStyles] || "";
+//   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 as keyof typeof verticalAlignStyles] ||
+//     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 = "";
+//   if (imageUrl && text) {
+//     nonMsoContent = `
+// <div style="display:inline-block;width:${resolvedWidthPx}px;height:${resolvedHeightPx}px;
+//   border:${borderWidth}px ${borderStyle} ${borderColor};
+//   border-radius:${resolvedBorderRadius};
+//   background:${finalBackgroundColor} url('${imageUrl}') center/cover no-repeat;
+//   overflow:hidden;${alignmentStyle}${customCss || ""}">
+//   <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>`;
+//   } else if (imageUrl) {
+//     nonMsoContent = `
+// <div style="display:inline-block;width:${resolvedWidthPx}px;height:${resolvedHeightPx}px;
+//   border:${borderWidth}px ${borderStyle} ${borderColor};
+//   border-radius:${resolvedBorderRadius};
+//   overflow:hidden;${alignmentStyle}${customCss || ""}">
+//   <img src="${imageUrl}" alt="${text || "shape image"}"
+//     width="${resolvedWidthPx}" height="${resolvedHeightPx}"
+//     style="width:100%;height:100%;object-fit:cover;border-radius:${resolvedBorderRadius};display:block;" />
+// </div>`;
+//   } else {
+//     const circlePadding =
+//       shape === "circle" ? Math.round(resolvedHeightPx * 0.15) : 8;
+//     nonMsoContent = `
+// <div style="display:inline-block;width:${resolvedWidthPx}px;height:${resolvedHeightPx}px;
+//   background:${finalBackgroundColor};
+//   border:${borderWidth}px ${borderStyle} ${borderColor};
+//   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>`;
+//   }
+//   // ============================
+//   // Outlook (VML) version
+//   // ============================
+//   const outlookContent = await appendOutlookForShape(
+//     nonMsoContent,
+//     resolvedWidthPx,
+//     resolvedWidthPx,
+//     {
+//       shape,
+//       imageUrl,
+//       backgroundColor,
+//       shapeColor,
+//       borderWidth,
+//       borderColor,
+//       borderRadius: resolvedBorderRadius,
+//       heightPx: resolvedHeightPx,
+//       text,
+//       textColor: color,
+//       textSize: fontSize,
+//       verticalAlign,
+//       alignment,
+//       padding,
+//       msoBakeImageWithText,
+//     }
+//   );
+//   // ============================
+//   // 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;text-align:${alignment};">
+//       ${outlookContent}
+//       <!--[if !mso]><!-->
+//       ${nonMsoContent}
+//       <!--<![endif]-->
+//     </td>
+//   </tr>
+// </table>`;
+// }
+// // ---------- 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,
+// }: any) {
+//   // --- 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 as keyof typeof vAlignMap] || "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: string,
+//   outerContainerWidth: number,
+//   innerContainerWidth: number,
+//   opts: {
+//     shape: string;
+//     imageUrl?: string;
+//     backgroundColor?: string;
+//     shapeColor?: string;
+//     borderWidth?: number;
+//     borderColor?: string;
+//     borderRadius?: string | number;
+//     heightPx: number;
+//     text?: string;
+//     textColor?: string;
+//     textSize?: number;
+//     verticalAlign?: "top" | "middle" | "bottom";
+//     alignment?: "left" | "center" | "right";
+//     padding?: { top?: number; right?: number; bottom?: number; left?: number };
+//     msoBakeImageWithText?: string;
+//   }
+// ) {
+//   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]-->`;
+// }
 async function convertShapeBlock(blockData) {
     const { style, props } = blockData.data;
     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 { width = "100", height = "150", padding = {}, backgroundColor = "#2F80ED", borderRadius, borderWidth = 0, borderStyle = "solid", borderColor = "transparent", customCss, shapeColor, alignment = "left", msoBakeImageWithText, color = "#000000", fontSize = 14, textAlign = "center", verticalAlign = "middle", } = style || {};
     const borderRadiusMap = {
         rectangle: "0",
         rounded: "10px",
@@ -503,7 +808,7 @@ async function convertShapeBlock(blockData) {
     let resolvedHeightPx = typeof height === "number"
         ? height
         : parseInt(height.toString().replace("px", ""), 10) || 150;
-    // --- Shape specific constraints ---
+    // --- Shape-specific constraints ---
     if (shape === "circle") {
         const side = Math.min(resolvedWidthPx, resolvedHeightPx);
         resolvedWidthPx = side;
@@ -514,25 +819,38 @@ async function convertShapeBlock(blockData) {
         resolvedBorderRadius = "50% / 50%";
     }
     const finalBackgroundColor = shapeColor || backgroundColor;
+    // --- Horizontal alignment for outer container ---
     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 verticalAlignStyles = {
-        top: "align-items:flex-start;padding-top:8px;",
-        center: "align-items:center;",
-        bottom: "align-items:flex-end;padding-bottom:8px;",
+    // --- Text + vertical alignment maps ---
+    const textAlignMap = {
+        left: "left",
+        center: "center",
+        right: "right",
+        justify: "justify",
     };
-    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};`;
+    const textAlignStyle = textAlignMap[textAlign] || "center";
+    const flexJustify = textAlign === "left"
+        ? "flex-start"
+        : textAlign === "right"
+            ? "flex-end"
+            : "center";
+    const flexAlign = verticalAlign === "top"
+        ? "flex-start"
+        : verticalAlign === "bottom"
+            ? "flex-end"
+            : "center";
+    // --- Text styling ---
+    const textSizeStyle = `font-size:${fontSize}px;line-height:1.3;word-break:break-word;overflow-wrap:break-word;color:${color};`;
     // ============================
     // Modern HTML (non-MSO)
     // ============================
     let nonMsoContent = "";
+    // --- Case 1: Image + Text ---
     if (imageUrl && text) {
         nonMsoContent = `
 <div style="display:inline-block;width:${resolvedWidthPx}px;height:${resolvedHeightPx}px;
@@ -540,13 +858,14 @@ async function convertShapeBlock(blockData) {
   border-radius:${resolvedBorderRadius};
   background:${finalBackgroundColor} url('${imageUrl}') center/cover no-repeat;
   overflow:hidden;${alignmentStyle}${customCss || ""}">
-  <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;">
+  <div style="width:100%;height:100%;display:flex;justify-content:${flexJustify};align-items:${flexAlign};overflow:hidden;padding:6px;box-sizing:border-box;">
+    <div style="${textSizeStyle}text-align:${textAlignStyle};max-width:90%;overflow:hidden;">
       ${text}
     </div>
   </div>
 </div>`;
     }
+    // --- Case 2: Image only ---
     else if (imageUrl) {
         nonMsoContent = `
 <div style="display:inline-block;width:${resolvedWidthPx}px;height:${resolvedHeightPx}px;
@@ -558,24 +877,22 @@ async function convertShapeBlock(blockData) {
     style="width:100%;height:100%;object-fit:cover;border-radius:${resolvedBorderRadius};display:block;" />
 </div>`;
     }
+    // --- Case 3: Text only ---
     else {
-        const circlePadding = shape === "circle" ? Math.round(resolvedHeightPx * 0.15) : 8;
         nonMsoContent = `
 <div style="display:inline-block;width:${resolvedWidthPx}px;height:${resolvedHeightPx}px;
   background:${finalBackgroundColor};
   border:${borderWidth}px ${borderStyle} ${borderColor};
   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;">
+  <div style="width:100%;height:100%;display:flex;justify-content:${flexJustify};align-items:${flexAlign};padding:8px;box-sizing:border-box;">
+    <div style="${textSizeStyle}text-align:${textAlignStyle};max-width:90%;overflow:hidden;">
       ${text || ""}
     </div>
   </div>
 </div>`;
     }
-    // ============================
-    // Outlook (VML) version
-    // ============================
+    // Outlook (VML) fallback
     const outlookContent = await appendOutlookForShape(nonMsoContent, resolvedWidthPx, resolvedWidthPx, {
         shape,
         imageUrl,
@@ -589,13 +906,12 @@ async function convertShapeBlock(blockData) {
         textColor: color,
         textSize: fontSize,
         verticalAlign,
+        textAlign, // ✅ added
         alignment,
         padding,
         msoBakeImageWithText,
     });
-    // ============================
-    // Final combined block
-    // ============================
+    // Combine into table wrapper
     return `
 <table width="100%" style="border-collapse:collapse;table-layout:fixed;">
   <tr>
@@ -608,17 +924,14 @@ async function convertShapeBlock(blockData) {
   </tr>
 </table>`;
 }
-// ---------- 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 ---
+// ---------- Updated VML builder ----------
+function buildVMLShape({ shape, widthPx, heightPx, imageUrl, backgroundColor, borderWidth, borderColor, borderRadius, text, textColor = "#000000", textSize = 14, verticalAlign = "middle", textAlign = "center", msoHasBakedText = false, }) {
     const bw = borderWidth || 0;
     const bc = borderColor || "transparent";
-    const borderAttrs = bw > 0
-        ? `strokeweight="${bw}px" strokecolor="${bc}"`
-        : `stroked="false"`;
+    const borderAttrs = bw > 0 ? `strokeweight="${bw}px" strokecolor="${bc}"` : `stroked="false"`;
     const fillColor = backgroundColor || "#2F80ED";
+    // Use frame for img fill so sizing is preserved
     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") {
@@ -628,15 +941,22 @@ function buildVMLShape({ shape, widthPx, heightPx, imageUrl, backgroundColor, bo
         tag = "roundrect";
         extraAttr = `arcsize="${computeArcSize(borderRadius, widthPx)}"`;
     }
-    // --- Text alignment ---
-    const vAlignMap = { top: "top", center: "middle", bottom: "bottom" };
+    // maps for vml
+    const vAlignMap = { top: "top", middle: "middle", bottom: "bottom" };
+    const hAlignMap = {
+        left: "left",
+        center: "center",
+        right: "right",
+        justify: "left",
+    }; // justify -> left fallback in VML
     const vAlign = vAlignMap[verticalAlign] || "middle";
-    const safeFontSize = Math.max(textSize, 10);
-    // --- Text inside shape ---
+    const hAlign = hAlignMap[textAlign] || "center";
+    const safeFontSize = Math.max(Math.round(textSize), 10);
+    // Build the textbox with table/cell for reliable vertical centering in Outlook
     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="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>
@@ -644,20 +964,17 @@ function buildVMLShape({ shape, widthPx, heightPx, imageUrl, backgroundColor, bo
            </div>
          </v:textbox>`
         : `<v:textbox inset="0,0,0,0"><div style="display:none;">.</div></v:textbox>`;
-    // --- Final shape markup ---
+    // Return VML shape
     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;"
+  style="width:${widthPx}px;height:${heightPx}px;display:inline-block;"
   ${borderAttrs}
   fill="true" fillcolor="${fillColor}"${extraAttr}>
   ${fillMarkup}
   ${textboxMarkup}
 </v:${tag}>`;
 }
-// ---------- Updated appendOutlookForShape ----------
-async function appendOutlookForShape(content, outerContainerWidth, innerContainerWidth, opts) {
+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({
@@ -672,14 +989,17 @@ async function appendOutlookForShape(content, outerContainerWidth, innerContaine
         text: opts.text,
         textColor: opts.textColor,
         textSize: opts.textSize,
+        verticalAlign: opts.verticalAlign,
+        textAlign: opts.textAlign,
         msoHasBakedText: Boolean(opts.msoBakeImageWithText),
     });
     const pad = opts.padding || {};
     const align = opts.alignment || "left";
     const valign = opts.verticalAlign || "middle";
+    // Outlook wrapper table ensures the cell's valign works if vml alone doesn't
     return `<!--[if mso]>
   <table align="${align}" border="0" cellpadding="0" cellspacing="0"
-         style="width:${widthPx}px;height:${heightPx}px;">
+         style="width:${widthPx}px;height:${heightPx}px;border-collapse:collapse;">
     <tr>
       <td valign="${valign}"
           style="padding:${pad.top || 0}px ${pad.right || 0}px ${pad.bottom || 0}px ${pad.left || 0}px;">
@@ -687,5 +1007,30 @@ async function appendOutlookForShape(content, outerContainerWidth, innerContaine
       </td>
     </tr>
   </table>
-  <![endif]-->`;
+<![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.27",
+  "version": "1.1.29",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [