email-builder-utils 1.1.23 → 1.1.24

package/dist/utils/jsonToHTML.d.ts

@@ -24,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;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,mBAmI5E;AAqJD,wBAAsB,iBAAiB,CAAC,SAAS,EAAE,UAAU,mBAuI5D"}
+{"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,7 +3,6 @@ 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");
@@ -320,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) {
@@ -351,7 +350,10 @@ async function convertVideoBlock(blockData, cellWidthInPx) {
     else {
         percentWidth = "100%";
     }
-    const innerContainerWidth = (parseFloat(percentWidth) / 100) * (cellWidthInPx - (style?.padding?.left || 0) - (style?.padding?.right || 0));
+    const innerContainerWidth = (parseFloat(percentWidth) / 100) *
+        (cellWidthInPx -
+            (style?.padding?.left || 0) -
+            (style?.padding?.right || 0));
     const aspectRatio = 16 / 9;
     const calculatedHeight = innerContainerWidth / aspectRatio;
     const outerContainerStyles = buildStyles({
@@ -430,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>
@@ -534,24 +542,31 @@ 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 { width = "100", height = "150", padding = {}, backgroundColor = "#2F80ED", borderRadius, borderWidth = 0, borderStyle = "solid", borderColor = "transparent", customCss, shapeColor, alignment = "left", msoBakeImageWithText, } = style || {};
+    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" ? width : parseInt(width.toString().replace("px", ""), 10) || 100;
-    let resolvedHeightPx = typeof height === "number" ? height : parseInt(height.toString().replace("px", ""), 10) || 150;
-    // Force circle → square
+    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;
+    // 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 = {
@@ -563,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;">
@@ -584,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
@@ -597,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;">
@@ -619,7 +636,7 @@ async function convertShapeBlock(blockData) {
         textColor,
         alignment,
         padding,
-        msoBakeImageWithText,
+        msoBakeImageWithText
     });
     // Wrap in container table
     const containerTable = `

package/package.json

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