email-builder-utils 1.1.23 → 1.1.26

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;AAsVD,wBAAsB,iBAAiB,CAAC,SAAS,EAAE,GAAG,EAAE,aAAa,EAAE,MAAM,mBAoK5E"}

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");
@@ -266,9 +265,9 @@ async function convertGridBlock(blockData, rootData, cellWidthInPx) {
     const visualRows = Math.ceil(total / columns);
     let html = `
   <!--[if mso]>
-  <table border="0" cellpadding="0" cellspacing="${columnGap}" width="100%" style="${exports.tableCommonStyle}">
+  <table border="0" cellpadding="0" cellspacing="${columnGap}" width="100%" style="${exports.tableCommonStyle}border-collapse: separate;border-spacing:${columnGap}px;">
   <![endif]-->
-  <table border="0" cellpadding="0" cellspacing="${columnGap}" width="100%" role="presentation" style="${exports.tableCommonStyle} ${tableStyles}">
+  <table border="0" cellpadding="0" cellspacing="${columnGap}" width="100%" role="presentation" style="${exports.tableCommonStyle} ${tableStyles}border-collapse: separate;border-spacing:${columnGap}px;">
   `;
     for (let r = 0; r < visualRows; r++) {
         html += "<tr>";
@@ -285,13 +284,13 @@ async function convertGridBlock(blockData, rootData, cellWidthInPx) {
    <td
     width="${widthPercent}%"
     ${responsive ? 'class="stack-column"' : ""}
-    style="vertical-align:${verticalAlign}; padding:0; word-break:break-word; ${styles}"
+    style="vertical-align:${verticalAlign}; word-break:break-word; ${styles} "
   >
     ${childHtml}
   </td>`;
             }
             else {
-                html += `<td width="${widthPercent}%" ${responsive ? 'class="stack-column"' : ""} style="padding:0;"></td>`;
+                html += `<td width="${widthPercent}%" ${responsive ? 'class="stack-column"' : ""} style=""></td>`;
             }
         }
         html += "</tr>";
@@ -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,12 +350,19 @@ 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({
         ...style,
         width: undefined,
+        borderColor: undefined,
+        borderRadius: undefined,
+        borderWidth: undefined,
+        borderStyle: undefined,
     }, {
         perChanges: addPxOrPerToAttributes,
         pxChanges: addPxToAttributes,
@@ -371,72 +377,94 @@ async function convertVideoBlock(blockData, cellWidthInPx) {
     const vmlLeft = innerContainerWidth / 2 - playIconWidth / 2;
     const vmlTop = calculatedHeight / 2 - playIconHeight / 2;
     const videoContent = `
-    <!--[if mso]>
-    <v:group xmlns:v="urn:schemas-microsoft-com:vml" coordsize="${innerContainerWidth},${calculatedHeight}"
-      coordorigin="0,0"
-      href="${videoLink}"
-      style="width:${innerContainerWidth}px;height:${calculatedHeight}px;">
-      <v:rect fill="t" stroked="f" style="position:absolute;width:${innerContainerWidth}px;height:${calculatedHeight}px;">
-        <v:fill src="${resolvedThumbnail}" type="frame"/>
-      </v:rect>
-      <v:shape type="#_x0000_t75"
-        style="position:absolute;
-               left:${vmlLeft.toFixed(1)}px;
-               top:${vmlTop.toFixed(1)}px;
-               width:${playIconWidth}px;
-               height:${playIconHeight}px;"
-        alt="Play" href="${videoLink}" title="${altText || "Video"}"
-        stroked="f" filled="t">
-        <v:imagedata src="https://app-rsrc.getbee.io/public/resources/components/widgetBar/video-content-icon-sets/light/type-01.png" />
-      </v:shape>
-    </v:group>
-    <![endif]-->
-
-    <!--[if !mso]><!-->
-    <table
-      width="${innerContainerWidth}"
-      cellpadding="0"
-      cellspacing="0"
-      border="0"
-      role="presentation"
-      style="
-        background-image: url('${resolvedThumbnail}');
-        background-size: cover;
-        background-position: center;
-        
-        max-width: ${innerContainerWidth}px;
-        height: ${calculatedHeight}px;
-        box-sizing: border-box;
-      "
-      align="center"
+  <!--[if mso]>
+  <v:group xmlns:v="urn:schemas-microsoft-com:vml"
+    coordsize="${innerContainerWidth},${calculatedHeight}"
+    href="${videoLink}"
+    style="width:${innerContainerWidth}px;height:${calculatedHeight}px;">
+    <v:rect fill="t"  style="position:absolute;width:${innerContainerWidth}px;height:${calculatedHeight}px; stroked="t"
+    strokeweight="${borderWidth}px"
+    strokecolor="${borderColor}"
+    ${borderRadius > 0 ? `arcsize="${Math.min(borderRadius / calculatedHeight, 1).toFixed(2)}"` : ""}
     >
-      <tr>
-        <td style="height: ${calculatedHeight}px; padding: 0; text-align: center; vertical-align: middle; border-radius: ${borderRadius}px;
-        border: ${borderWidth}px solid ${borderColor};" align="center" valign="middle">
-          <a href="${videoLink}" target="_blank" style="display:inline-block; border: 0; outline: none; text-decoration: none;">
-            <img
-              src="https://app-rsrc.getbee.io/public/resources/components/widgetBar/video-content-icon-sets/light/type-01.png"
-              width="${playIconWidth}"
-              alt="Play"
-              style="display: block; border: 0; outline: none; text-decoration: none; height: auto;"
-            />
-          </a>
-        </td>
-      </tr>
-    </table>
-    <!--<![endif]-->
-  `;
+      <v:fill src="${resolvedThumbnail}" type="frame" color="${style?.backgroundColor || "#FFFFFF"}"/>
+    </v:rect>
+    <v:shape type="#_x0000_t75"
+      style="position:absolute;
+             left:${vmlLeft.toFixed(1)}px;
+             top:${vmlTop.toFixed(1)}px;
+             width:${playIconWidth}px;
+             height:${playIconHeight}px;"
+      alt="Play" href="${videoLink}" title="${altText || "Video"}"
+      stroked="f" filled="t">
+      <v:imagedata src="https://app-rsrc.getbee.io/public/resources/components/widgetBar/video-content-icon-sets/light/type-01.png" />
+    </v:shape>
+  </v:group>
+  <![endif]-->
+
+  <!--[if !mso]><!-->
+  <table
+    width="${innerContainerWidth}"
+    cellpadding="0"
+    cellspacing="0"
+    border="0"
+    role="presentation"
+    align="${style?.textAlign || "left"}"
+    style="
+      max-width: ${innerContainerWidth}px;
+      width: 100%;
+      height: ${calculatedHeight}px;
+      background-color: ${style?.backgroundColor || "#FFFFFF"};
+      background-image: url('${resolvedThumbnail}');
+      background-size: cover;
+      background-position: center;
+      background-repeat: no-repeat;
+      box-sizing: border-box;
+      border: ${borderWidth}px ${style?.borderStyle || "solid"} ${borderColor};
+      border-radius: ${borderRadius}px;
+    "
+  >
+    <tr>
+      <td style="padding: 0; height: ${calculatedHeight}px; text-align: center; vertical-align: middle;" valign="middle">
+        <a href="${videoLink}" target="_blank" style="display:inline-block; border: 0; outline: none; text-decoration: none;">
+          <img
+            src="https://app-rsrc.getbee.io/public/resources/components/widgetBar/video-content-icon-sets/light/type-01.png"
+            width="${playIconWidth}"
+            alt="Play"
+            style="display: block;
+            border: 0;
+              outline: none;
+              text-decoration: none;
+              height: auto;"
+          />
+        </a>
+      </td>
+    </tr>
+  </table>
+  <!--<![endif]-->
+`;
     const wrapperHtml = `
-    <table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="margin:0; padding:0; border-collapse: collapse;">
-      <tr>
-        <td align="center" style="padding:0; ${outerContainerStyles}">
-          <div style="display: inline-block; width: ${percentWidth}; max-width: ${cellWidthInPx}px; box-sizing: border-box;">
-            ${videoContent}
-          </div>
-        </td>
-      </tr>
-    </table>
-  `;
+  <table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="margin:0; padding:0; border-collapse: collapse;">
+    <tr>
+      <td align="${style?.textAlign || "left"}" style="padding:0; ${outerContainerStyles}">
+        <table border="0" cellpadding="0" cellspacing="0" role="presentation" 
+          align="${style?.textAlign || "left"}"
+          style="
+            margin:0;
+            max-width:${cellWidthInPx}px;
+            width:${percentWidth};
+            border-collapse:collapse;
+          ">
+          <tr>
+            <td align="${style?.textAlign || "left"}" style="text-align:${style?.textAlign || "left"}; padding:0;">
+              ${videoContent}
+            </td>
+          </tr>
+        </table>
+      </td>
+    </tr>
+  </table>
+`;
     return wrapperHtml;
 }
 // Enhanced Shape Block HTML Conversion using appendOutlookForShape
@@ -534,24 +562,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 +598,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 +621,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 +634,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 +656,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.26",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [