email-builder-utils 1.1.22 → 1.1.24

package/dist/types/Template.d.ts

@@ -26,6 +26,10 @@ interface IProps {
     altText: string;
     cellWidths: number[];
     responsive?: boolean;
+    videoUrl?: string;
+    youtubeVideoUrl?: string;
+    thumbnailUrl?: string;
+    shape?: string;
 }
 interface IStyle {
     [key: string]: any;

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;CACtB;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;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"}

package/dist/utils/jsonToHTML.d.ts

@@ -8,6 +8,10 @@ interface BlockJsonProps {
     altText: string;
     imageUrl: string;
     responsive?: boolean;
+    videoUrl?: string;
+    youtubeVideoUrl?: string;
+    thumbnailUrl?: string;
+    shape?: string;
 }
 interface IBlockData {
     type: BlockType;
@@ -20,6 +24,5 @@ interface IBlockData {
 export declare const tableCommonStyle = "border-collapse:collapse; table-layout:fixed;";
 export declare function convertToHtml(blockData: IBlockData, rootData: any, cellWidthInPx: number): Promise<string>;
 export declare function convertVideoBlock(blockData: any, cellWidthInPx: number): Promise<string>;
-export declare function convertShapeBlock(blockData: IBlockData): Promise<string>;
 export {};
 //# sourceMappingURL=jsonToHTML.d.ts.map

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;CACtB;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,mBAsBtB;AA2ZD,wBAAsB,iBAAiB,CAAC,SAAS,EAAE,GAAG,EAAE,aAAa,EAAE,MAAM,mBA0I5E;AA0JD,wBAAsB,iBAAiB,CAAC,SAAS,EAAE,UAAU,mBAgJ5D"}
+{"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"}

package/dist/utils/jsonToHTML.js

@@ -3,16 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.tableCommonStyle = void 0;
 exports.convertToHtml = convertToHtml;
 exports.convertVideoBlock = convertVideoBlock;
-exports.convertShapeBlock = convertShapeBlock;
 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;";
@@ -43,8 +37,7 @@ 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`;
         }
@@ -140,15 +133,11 @@ function convertTextBlock(blockData) {
         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);
@@ -161,12 +150,8 @@ 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;"
@@ -209,11 +194,7 @@ 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
@@ -222,9 +203,7 @@ 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}"
@@ -340,7 +319,7 @@ async function convertGridCellBlock(blockData, rootData, cellWidthPercent, paren
 }
 async function convertVideoBlock(blockData, cellWidthInPx) {
     const { style, props } = blockData.data;
-    const { videoUrl, youtubeVideoUrl, thumbnailUrl, altText } = props || {};
+    const { videoUrl, youtubeVideoUrl, thumbnailUrl, altText } = props;
     const videoLink = youtubeVideoUrl || videoUrl || "#";
     let resolvedThumbnail = thumbnailUrl || "https://via.placeholder.com/480x360?text=No+Thumbnail";
     if (youtubeVideoUrl) {
@@ -453,9 +432,15 @@ async function convertVideoBlock(blockData, cellWidthInPx) {
     <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}">
-          <div style="display: inline-block; width: ${percentWidth}; max-width: ${cellWidthInPx}px; box-sizing: border-box;">
-            ${videoContent}
-          </div>
+         <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>
@@ -497,8 +482,7 @@ async function appendOutlookForShape(content, outerContainerWidth, innerContaine
         // 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";
+    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;">
@@ -527,9 +511,7 @@ function buildVMLShape({ shape, widthPx, heightPx, imageUrl, backgroundColor, bo
         extraAttr = ` arcsize="${computeArcSize(borderRadius, widthPx)}"`;
     }
     // image fill (if provided)
-    const fillMarkup = imageUrl
-        ? `<v:fill src="${imageUrl}" type="frame" aspect="atleast" />`
-        : "";
+    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
@@ -560,13 +542,13 @@ function buildVMLShape({ shape, widthPx, heightPx, imageUrl, backgroundColor, bo
 // ---------- convertShapeBlock (updated, keeps your structure) ----------
 async function convertShapeBlock(blockData) {
     const { style, props } = blockData.data;
-    const { shape, text, textColor = "#000000", imageUrl } = props || {};
+    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 borderRadiusMap = {
         rectangle: "0",
         rounded: "10px",
         circle: "50%",
-        oval: "50%",
+        oval: "50%", // Keep this for modern browsers
     };
     let resolvedBorderRadius = borderRadius || borderRadiusMap[shape] || "0";
     let resolvedWidthPx = typeof width === "number"
@@ -575,13 +557,16 @@ async function convertShapeBlock(blockData) {
     let resolvedHeightPx = typeof height === "number"
         ? height
         : parseInt(height.toString().replace("px", ""), 10) || 150;
-    // Force circle → square
+    // Special handling for different shapes
     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") {
+    }
     const finalWidthPx = resolvedWidthPx;
     const finalHeightPx = resolvedHeightPx;
     const alignmentStyles = {
@@ -593,12 +578,14 @@ async function convertShapeBlock(blockData) {
     const finalBackgroundColor = shapeColor || backgroundColor;
     // --- Modern clients content ---
     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;
   border:${borderWidth}px ${borderStyle} ${borderColor};
-  border-radius:${resolvedBorderRadius};
+  border-radius:${modernBorderRadius};
   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;">
@@ -614,11 +601,11 @@ async function convertShapeBlock(blockData) {
         nonMsoContent = `
 <div style="display:inline-block;width:${finalWidthPx}px;height:${finalHeightPx}px;
   border:${borderWidth}px ${borderStyle} ${borderColor};
-  border-radius:${resolvedBorderRadius};
+  border-radius:${modernBorderRadius};
   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:${resolvedBorderRadius};display:block;" />
+       style="width:100%;height:100%;object-fit:cover;border-radius:${modernBorderRadius};display:block;" />
 </div>`;
     }
     // Case 3: No image → solid background
@@ -627,7 +614,7 @@ async function convertShapeBlock(blockData) {
 <div style="display:inline-block;width:${finalWidthPx}px;height:${finalHeightPx}px;
   background:${finalBackgroundColor};
   border:${borderWidth}px ${borderStyle} ${borderColor};
-  border-radius:${resolvedBorderRadius};
+  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;">

package/package.json

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