npm - email-builder-utils - Versions diffs - 1.1.31 → 1.1.35 - Mend

email-builder-utils 1.1.31 → 1.1.35

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/dist/utils/convertJsonToHtml.d.ts.map +1 -1
package/dist/utils/convertJsonToHtml.js +79 -77
package/dist/utils/index.d.ts +2 -0
package/dist/utils/index.d.ts.map +1 -1
package/dist/utils/index.js +2 -0
package/dist/utils/jsonToHTML.d.ts.map +1 -1
package/dist/utils/jsonToHTML.js +347 -445
package/package.json +33 -33

package/dist/utils/convertJsonToHtml.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"convertJsonToHtml.d.ts","sourceRoot":"","sources":["../../src/utils/convertJsonToHtml.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB,GAAU,UAAU,GAAG,~~oBA4GpD~~,CAAC"}
1	+ {"version":3,"file":"convertJsonToHtml.d.ts","sourceRoot":"","sources":["../../src/utils/convertJsonToHtml.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB,GAAU,UAAU,GAAG,oBA8GpD,CAAC"}

package/dist/utils/convertJsonToHtml.js CHANGED Viewed

@@ -12,83 +12,85 @@ const convertJsonToHtml = async (jsonData) => {
     }
     const { fontFamily, canvasColor, textColor, padding = {}, borderColor, borderRadius, borderWidth, borderStyle, } = rootData.style || {};
     const { top = 0, right = 0, bottom = 0, left = 0 } = padding;
-    const rawHtml = `<!DOCTYPE html>
-  <html lang="en">
-    <head>
-      <meta charset="UTF-8" />
-      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-      <meta name="x-apple-disable-message-reformatting" />
-       <style>
-        .responsive-table {
-          width: 100%;
-          max-width: 600px;
-        }
-        @media only screen and (max-width: 600px) {
-          .responsive-table {
-            width: 100% !important;
-          }
-          .stack-column,
-          .stack-column td {
-            display: block !important;
-            width: 100% !important;
-            max-width: 100% !important;
-          }
-        }
-        .hide-mobile {
-         display: block !important;
-         mso-hide: all !important; /* Hide in Outlook */
-       }
-       .hide-desktop {
-         display: block !important;
-         mso-hide: all !important; /* Hide in Outlook */
-       }
-       @media only screen and (max-width: 600px) {
-                .hide-mobile {
-             display: none !important;
-             max-height: 0 !important;
-           overflow: hidden !important;
-           mso-hide: all !important;
-           }
-        }
-     @media only screen and (min-width: 601px) {
-       .hide-desktop {
-         display: none !important;
-         max-height: 0 !important;
-         overflow: hidden !important;
-         mso-hide: all !important;
-       }
-     }
-      </style>
-    </head>
-    <body>
-      <center>
-        <table
-          class="responsive-table"
-          bgcolor="${canvasColor}"
-          style="
-            font-family: ${fontFamily};
-            margin: 0 auto;
-            table-layout:fixed;
-            background-color: ${canvasColor};
-            color: ${textColor};
-            padding: ${top}px ${right}px ${bottom}px ${left}px;
-            border: ${borderWidth}px ${borderStyle} ${borderColor};
-            border-radius: ${borderRadius}px; "
-        >
-          <tbody>
-            <tr>
-              <td style="padding: 0;">
-                ${blocksHtml.join("")}
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </center>
-    </body>
+    const rawHtml = `<!DOCTYPE html>
+  <html lang="en">
+    <head>
+      <meta charset="UTF-8" />
+      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+      <meta name="x-apple-disable-message-reformatting" />
+       <style>
+        .responsive-table {
+          width: 100%;
+          max-width: 600px;
+        }
+        @media only screen and (max-width: 600px) {
+          .responsive-table {
+            width: 100% !important;
+          }
+          .stack-column,
+          .stack-column td {
+            display: block !important;
+            width: 100% !important;
+            max-width: 100% !important;
+          }
+        }
+        .hide-mobile {
+         display: block !important;
+         mso-hide: all !important; /* Hide in Outlook */
+       }
+       .hide-desktop {
+         display: block !important;
+         mso-hide: all !important; /* Hide in Outlook */
+       }
+       @media only screen and (max-width: 600px) {
+                .hide-mobile {
+             display: none !important;
+             max-height: 0 !important;
+           overflow: hidden !important;
+           mso-hide: all !important;
+           }
+        }
+     @media only screen and (min-width: 601px) {
+       .hide-desktop {
+         display: none !important;
+         max-height: 0 !important;
+         overflow: hidden !important;
+         mso-hide: all !important;
+       }
+     }
+      </style>
+    </head>
+    <body>
+      <center>
+        <table
+          class="responsive-table"
+          bgcolor="${canvasColor}"
+          style="
+            font-family: ${fontFamily};
+            margin: 0 auto;
+            table-layout:fixed;
+            width:600px;
+            max-width:600px;
+            background-color: ${canvasColor};
+            color: ${textColor};
+            padding: ${top}px ${right}px ${bottom}px ${left}px;
+            border: ${borderWidth}px ${borderStyle} ${borderColor};
+            border-radius: ${borderRadius}px; "
+        >
+          <tbody>
+            <tr>
+              <td style="padding: 0;">
+                ${blocksHtml.join("")}
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </center>
+    </body>
   </html>`;
     return rawHtml;
 };

package/dist/utils/index.d.ts CHANGED Viewed

@@ -1,3 +1,5 @@
 export * from "./convertJsonToHtml";
 export * from "./generateUniqueId";
+export * from "./common";
+export * from "./jsonToHTML";
 //# sourceMappingURL=index.d.ts.map

package/dist/utils/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC"}

package/dist/utils/index.js CHANGED Viewed

@@ -16,3 +16,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./convertJsonToHtml"), exports);
 __exportStar(require("./generateUniqueId"), exports);
+__exportStar(require("./common"), exports);
+__exportStar(require("./jsonToHTML"), exports);

package/dist/utils/jsonToHTML.d.ts.map CHANGED Viewed

	@@ -1 +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;IACf,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;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;~~AAuiBD~~,wBAAsB,iBAAiB,CAAC,SAAS,EAAE,GAAG,EAAE,aAAa,EAAE,MAAM,mBAyL5E"}
1	+ {"version":3,"file":"jsonToHTML.d.ts","sourceRoot":"","sources":["../../src/utils/jsonToHTML.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAGrC,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;IACf,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;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;AAyFhF,wBAAsB,aAAa,CACjC,SAAS,EAAE,UAAU,EACrB,QAAQ,EAAE,GAAG,EACb,aAAa,EAAE,MAAM,mBAwBtB;AAmkBD,wBAAsB,iBAAiB,CAAC,SAAS,EAAE,GAAG,EAAE,aAAa,EAAE,MAAM,mBAyL5E"}

package/dist/utils/jsonToHTML.js CHANGED Viewed

@@ -40,19 +40,53 @@ function buildStyles(style, { pxChanges, perChanges }) {
     Object.entries(style).forEach(([key, value]) => {
         if (key === "customCss")
             return;
+        const INVALID_KEYS = [
+            "columns",
+            "cellWidths",
+            "cellWidth",
+            "childWidth",
+            "visibility",
+            "hideOnMobile",
+            "hideOnDesktop"
+        ];
+        if (INVALID_KEYS.includes(key))
+            return;
+        // Prevent null/undefined/"" from leaking into CSS
         if (value === undefined || value === null || value === "")
             return;
+        // FIX 1 — SANITIZE padding objects
         if ((key === "padding" || key === "buttonPadding") &&
             typeof value === "object") {
-            const padding = value;
-            value = `${padding.top}px ${padding.right}px ${padding.bottom}px ${padding.left}px`;
+            const pad = value;
+            const safePad = {
+                top: Number.isFinite(pad.top) ? pad.top : 0,
+                right: Number.isFinite(pad.right) ? pad.right : 0,
+                bottom: Number.isFinite(pad.bottom) ? pad.bottom : 0,
+                left: Number.isFinite(pad.left) ? pad.left : 0,
+            };
+            value = `${safePad.top}px ${safePad.right}px ${safePad.bottom}px ${safePad.left}px`;
         }
         const cssKey = key.replace(/([A-Z])/g, "-$1").toLowerCase();
+        // FIX 2 — Sanitize invalid px/per values
         if (pxChanges.includes(key)) {
-            stylesObj[cssKey] = typeof value === "number" ? `${value}px` : value;
+            if (typeof value === "number") {
+                stylesObj[cssKey] = `${value}px`;
+            }
+            else if (typeof value === "string" && value.includes("null")) {
+                // Skip invalid styles
+                return;
+            }
+            else {
+                stylesObj[cssKey] = value;
+            }
         }
         else if (perChanges.includes(key)) {
-            stylesObj[cssKey] = typeof value === "number" ? `${value}%` : value;
+            if (typeof value === "number") {
+                stylesObj[cssKey] = `${value}%`;
+            }
+            else {
+                stylesObj[cssKey] = value;
+            }
         }
         else {
             stylesObj[cssKey] = value;
@@ -93,14 +127,14 @@ function appendOutlookSupport(content, contentStyle, className) {
     const visibilityClass = className || "";
     const shouldHideInOutlook = visibilityClass.includes("hide-desktop");
     if (shouldHideInOutlook) {
-        return `
-    <!--[if !mso]><!-->
-    <table width="100%" style="${exports.tableCommonStyle}" class="${visibilityClass}"><tr><td style="${contentStyle}">${content}</td></tr></table>
-    <!--<![endif]-->
+        return `
+    <!--[if !mso]><!-->
+    <table width="100%" style="${exports.tableCommonStyle}" class="${visibilityClass}"><tr><td style="${contentStyle}">${content}</td></tr></table>
+    <!--<![endif]-->
     `;
     }
-    return `
-  <table width="100%" style="${exports.tableCommonStyle}" class="${visibilityClass}"><tr><td style="${contentStyle}">${content}</td></tr></table>
+    return `
+  <table width="100%" style="${exports.tableCommonStyle}; max-width:600px;" class="${visibilityClass}"><tr><td style="${contentStyle}">${content}</td></tr></table>
   `;
 }
 function convertDividerBlockToHtml(blockData) {
@@ -119,21 +153,21 @@ function convertDividerBlockToHtml(blockData) {
     ]
         .filter(Boolean)
         .join(" ");
-    const dividerContent = `
-    <table
-      width="${dividerWidth}%"
-      cellpadding="0"
-      cellspacing="0"
-    >
-      <tr>
-        <td
-          height="${thickness}"
-          style="font-size:1px; line-height:1px; background:${dividerColor}; width:${dividerWidth};"
-        >
-          &nbsp;
-        </td>
-      </tr>
-    </table>
+    const dividerContent = `
+    <table
+      width="${dividerWidth}%"
+      cellpadding="0"
+      cellspacing="0"
+    >
+      <tr>
+        <td
+          height="${thickness}"
+          style="font-size:1px; line-height:1px; background:${dividerColor}; width:${dividerWidth};"
+        >
+          &nbsp;
+        </td>
+      </tr>
+    </table>
   `;
     return appendOutlookSupport(dividerContent, convertedStyle, visibilityClass);
 }
@@ -214,21 +248,21 @@ async function appendOutlookForImage(content, outerContainerWidth, innerContaine
     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;"
-    ${borderAttributes}
-    ${useRoundRect ? `arcsize="${arcsize}"` : ""}
-    fill="true" fillcolor="none">
-    <v:fill src="${imageUrl}" type="frame" />
-    <v:textbox inset="0,0,0,0"><div style="display:none;">.</div></v:textbox>
-  </v:${useRoundRect ? "roundrect" : "rect"}>
+    const outlookImage = `<!--[if mso]>
+  <v:${useRoundRect ? "roundrect" : "rect"} xmlns:v="urn:schemas-microsoft-com:vml"
+    style="width:${scaledWidth}px;height:${scaledHeight}px;"
+    ${borderAttributes}
+    ${useRoundRect ? `arcsize="${arcsize}"` : ""}
+    fill="true" fillcolor="none">
+    <v:fill src="${imageUrl}" type="frame" />
+    <v:textbox inset="0,0,0,0"><div style="display:none;">.</div></v:textbox>
+  </v:${useRoundRect ? "roundrect" : "rect"}>
   <![endif]-->`;
-    return `
-    ${outlookImage}
-    <!--[if !mso]><!-->
-      ${content}
-    <!--<![endif]-->
+    return `
+    ${outlookImage}
+    <!--[if !mso]><!-->
+      ${content}
+    <!--<![endif]-->
   `;
 }
 async function computeScaledDimensions(imageUrl, maxContainerWidthPx) {
@@ -291,23 +325,23 @@ function appendOutlookForButton(content, buttonStyle, navigateToUrl, text) {
     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}"
-  style="height:${height}px;v-text-anchor:middle;width:${width}px;"
-  arcsize="${borderRadius / height}" ${borderAttributes}
-  fillcolor="${buttonColor}">
-  <w:anchorlock/>
-  <v:textbox inset="${buttonPadding.top}px,${buttonPadding.left}px,${buttonPadding.bottom}px,${buttonPadding.right}px">
-    <center style="font-family:${fontFamily};font-size:${fontSize}px;font-weight:${fontWeight};color:${color};">
-      ${text}
-    </center>
-  </v:textbox>
-</v:${borderRadius ? "roundrect" : "rect"}>
-<![endif]-->
-<!--[if !mso]><!-->
-  ${content}
-<!--<![endif]-->
+    return `
+<!--[if mso]>
+<v:${borderRadius ? "roundrect" : "rect"} xmlns:v="urn:schemas-microsoft-com:vml" href="${navigateToUrl}"
+  style="height:${height}px;v-text-anchor:middle;width:${width}px;"
+  arcsize="${borderRadius / height}" ${borderAttributes}
+  fillcolor="${buttonColor}">
+  <w:anchorlock/>
+  <v:textbox inset="${buttonPadding.top}px,${buttonPadding.left}px,${buttonPadding.bottom}px,${buttonPadding.right}px">
+    <center style="font-family:${fontFamily};font-size:${fontSize}px;font-weight:${fontWeight};color:${color};">
+      ${text}
+    </center>
+  </v:textbox>
+</v:${borderRadius ? "roundrect" : "rect"}>
+<![endif]-->
+<!--[if !mso]><!-->
+  ${content}
+<!--<![endif]-->
 `;
 }
 function convertButtonBlock(blockData) {
@@ -346,90 +380,106 @@ async function convertGridBlock(blockData, rootData, cellWidthInPx) {
     const { columns = 1, cellWidths = [], responsive = true } = props;
     const { columnGap = 0, ...restStyle } = style;
     const gridVisibilityClass = (0, common_1.getVisibilityClass)(props);
+    // FIX: avoid table-layout:fixed – causes shrink in many clients
     const tableStyles = buildStyles(restStyle, {
         perChanges: [],
         pxChanges: allPxAttributes,
     });
     const total = childrenIds.length;
     const visualRows = Math.ceil(total / columns);
-    // Fix: Calculate visible cells per row to adjust widths
-    let html = `
-  <!--[if mso]>
-  <table border="0" cellpadding="0" cellspacing="${columnGap}" width="100%"
-    style="${exports.tableCommonStyle}border-collapse: separate;border-spacing:${columnGap}px;" class="${gridVisibilityClass}">
-  <![endif]-->
-  <table border="0" cellpadding="0" cellspacing="${columnGap}" width="100%" role="presentation"
-    style="${exports.tableCommonStyle} ${tableStyles}border-collapse: separate;border-spacing:${columnGap}px;" class="${gridVisibilityClass}">
+    let html = `
+  <!--[if mso]>
+  <table border="0" cellpadding="0" cellspacing="${columnGap}" width="100%"
+     style="border-collapse:separate;border-spacing:${columnGap}px;"
+     class="${gridVisibilityClass}">
+  <![endif]-->
+  <table border="0" cellpadding="0" cellspacing="${columnGap}" width="100%"
+     role="presentation"
+     style="border-collapse:separate;border-spacing:${columnGap}px; ${tableStyles}; max-width:600px;"
+     class="${gridVisibilityClass}">
   `;
     for (let r = 0; r < visualRows; r++) {
         html += "<tr>";
-        let visibleCellsInRow = 0;
-        const rowCellVisibility = [];
+        // COUNT visible cells only
+        let visibleCells = 0;
+        const rowIds = [];
         for (let c = 0; c < columns; c++) {
             const idx = r * columns + c;
-            const childId = childrenIds[idx];
-            if (childId) {
-                const child = rootData[childId];
-                const { props: childProps = {} } = child.data || {};
-                const isVisible = !childProps.hideOnDesktop;
-                rowCellVisibility.push(isVisible);
-                if (isVisible)
-                    visibleCellsInRow++;
-            }
-            else {
-                rowCellVisibility.push(false);
+            const id = childrenIds[idx] ?? null;
+            rowIds.push(id);
+            if (id) {
+                const child = rootData[id];
+                const isHidden = child?.data?.props?.hideOnDesktop;
+                if (!isHidden)
+                    visibleCells++;
             }
         }
-        const widthPerVisibleCell = visibleCellsInRow > 0 ? 100 / visibleCellsInRow : 100 / columns;
+        // FIX: fallback safe-width
+        const safeWidth = visibleCells > 0 ? Math.min(100 / visibleCells, 50) : Math.min(100 / columns, 50);
         for (let c = 0; c < columns; c++) {
             const idx = r * columns + c;
-            const childId = childrenIds[idx];
-            const widthPercent = cellWidths[c] ?? widthPerVisibleCell;
-            if (childId) {
-                const child = rootData[childId];
-                const { style: cellStyle = {}, props: childProps = {} } = child.data || {};
+            const id = rowIds[c];
+            let widthPercent = cellWidths[c] ?? safeWidth;
+            // FIX: never exceed reasonable width
+            if (widthPercent <= 0 || widthPercent > 100) {
+                widthPercent = safeWidth;
+            }
+            // FIX: Cap width percent to prevent overflow in Outlook
+            widthPercent = Math.min(widthPercent, 50);
+            if (id) {
+                const child = rootData[id];
+                const { style: cellStyle = {}, props: childProps = {} } = child.data;
                 const verticalAlign = cellStyle.verticalAlign || "top";
-                const { html: childHtml, styles } = await convertGridCellBlock(child, rootData, widthPercent, cellWidthInPx);
-                const cellVisibilityClass = (0, common_1.getVisibilityClass)(childProps);
-                if (!childProps.hideOnDesktop) {
-                    html += `
-            <td
-              width="${widthPercent}%"
-              class="${[responsive ? "stack-column" : "", cellVisibilityClass]
-                        .filter(Boolean)
-                        .join(" ")}"
-              style="vertical-align:${verticalAlign}; word-break:break-word; ${styles}"
-            >
-              ${childHtml}
-            </td>`;
+                const childVisible = !childProps.hideOnDesktop;
+                const visibilityClass = (0, common_1.getVisibilityClass)(childProps);
+                // Only render if visible
+                if (childVisible) {
+                    const { html: childHtml, styles } = await convertGridCellBlock(child, rootData, widthPercent, cellWidthInPx);
+                    html += `
+          <td
+            width="${Math.round(widthPercent)}%"
+            class="${[
+                        responsive ? "stack-column" : "",
+                        visibilityClass,
+                    ].filter(Boolean).join(" ")}"
+            style="vertical-align:${verticalAlign};word-break:break-word;${styles}"
+          >
+            ${childHtml}
+          </td>`;
                 }
             }
             else {
-                html += `<td width="${widthPercent}%" ${responsive ? 'class="stack-column"' : ""} style=""></td>`;
+                // SAFE empty cell (keeps layout stable)
+                html += `
+        <td width="${Math.round(widthPercent)}%"
+            ${responsive ? 'class="stack-column"' : ""}
+            style="vertical-align:top;">
+        </td>`;
             }
         }
         html += "</tr>";
     }
-    html += `</table><!--[if mso]></table><![endif]-->`;
+    html += "</table><!--[if mso]></table><![endif]-->";
     return html;
 }
 async function convertGridCellBlock(blockData, rootData, cellWidthPercent, parentCellWidthPx) {
     const { style = {}, childrenIds = [], props = {} } = blockData.data;
+    const visibilityClass = (0, common_1.getVisibilityClass)(props);
     const styles = buildStyles(style, {
         perChanges: [],
         pxChanges: allPxAttributes,
     });
-    const innerHtmlParts = [];
+    const parts = [];
+    // FIX: do NOT re-calc px based on parent → causes shrinking
+    const safeCellWidthPx = Math.max(parentCellWidthPx, 20);
     for (const childId of childrenIds) {
         const child = rootData[childId];
         if (child) {
-            const cellWidthPx = parentCellWidthPx * (cellWidthPercent / 100);
-            innerHtmlParts.push(await convertToHtml(child, rootData, cellWidthPx));
+            parts.push(await convertToHtml(child, rootData, safeCellWidthPx));
         }
     }
-    const cellContent = innerHtmlParts.join("");
     return {
-        html: cellContent,
+        html: parts.join(""),
         styles,
     };
 }
@@ -494,116 +544,116 @@ async function convertVideoBlock(blockData, cellWidthInPx) {
     const vmlTop = calculatedHeight / 2 - playIconHeight / 2;
     const shouldHideInOutlook = hideOnDesktop;
     const outlookVideoContent = shouldHideInOutlook
-        ? `<!--[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)}"` : ""}
-         >
-           <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>
+        ? `<!--[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)}"` : ""}
+         >
+           <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]>
-       <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)}"` : ""}
-         >
-           <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>
+        : `<!--[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)}"` : ""}
+         >
+           <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]-->`;
-    const nonOutlookVideoContent = `<!--[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>
+    const nonOutlookVideoContent = `<!--[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: contain;
+        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 videoContent = `${outlookVideoContent}${nonOutlookVideoContent}`;
-    const wrapperHtml = `
-  <table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="margin:0; padding:0; border-collapse: collapse;" class="${visibilityClass}">
-    <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>
+    const wrapperHtml = `
+  <table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="margin:0; padding:0; border-collapse: collapse; max-width:600px;" class="${visibilityClass}">
+    <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;
 }
@@ -623,154 +673,6 @@ function computeArcSize(borderRadius, widthPx) {
     const px = parseFloat(s.replace("px", "")) || 0;
     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>`;
-// }
 async function convertShapeBlock(blockData) {
     const { style, props } = blockData.data;
     const { shape, text, imageUrl } = props;
@@ -833,44 +735,44 @@ async function convertShapeBlock(blockData) {
     let nonMsoContent = "";
     // --- Case 1: Image + Text ---
     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;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>
+        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;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;
-  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;" />
+        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>`;
     }
     // --- Case 3: Text only ---
     else {
-        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;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>
+        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;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) fallback
@@ -893,16 +795,16 @@ async function convertShapeBlock(blockData) {
         msoBakeImageWithText,
     }, visibilityClass);
     // Combine into table wrapper
-    return `
-<table width="100%" style="border-collapse:collapse;table-layout:fixed;" class="${visibilityClass}">
-  <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>
+    return `
+<table width="100%" style="border-collapse:collapse;table-layout:fixed;max-width:600px;" class="${visibilityClass}">
+  <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 ----------
@@ -935,24 +837,24 @@ function buildVMLShape({ shape, widthPx, heightPx, imageUrl, backgroundColor, bo
     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:${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>
-             </div>
-           </div>
+        ? `<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:${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>
+             </div>
+           </div>
          </v:textbox>`
         : `<v:textbox inset="0,0,0,0"><div style="display:none;">.</div></v:textbox>`;
     // Return VML shape
-    return `
-<v:${tag} xmlns:v="urn:schemas-microsoft-com:vml"
-  style="width:${widthPx}px;height:${heightPx}px;display:inline-block;"
-  ${borderAttrs}
-  fill="true" fillcolor="${fillColor}"${extraAttr}>
-  ${fillMarkup}
-  ${textboxMarkup}
+    return `
+<v:${tag} xmlns:v="urn:schemas-microsoft-com:vml"
+  style="width:${widthPx}px;height:${heightPx}px;display:inline-block;"
+  ${borderAttrs}
+  fill="true" fillcolor="${fillColor}"${extraAttr}>
+  ${fillMarkup}
+  ${textboxMarkup}
 </v:${tag}>`;
 }
 function appendOutlookForShape(content, outerContainerWidth, innerContainerWidth, opts, visibilityClass) {
@@ -980,28 +882,28 @@ function appendOutlookForShape(content, outerContainerWidth, innerContainerWidth
     const shouldHideInOutlook = visibilityClass.includes("hide-desktop");
     // Fix: Properly handle Outlook visibility with conditional comments
     if (shouldHideInOutlook) {
-        return `<!--[if !mso]><!-->
-    <table align="${align}" border="0" cellpadding="0" cellspacing="0"
-           style="width:${widthPx}px;height:${heightPx}px;border-collapse:collapse;" class="${visibilityClass}">
-      <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>
+        return `<!--[if !mso]><!-->
+    <table align="${align}" border="0" cellpadding="0" cellspacing="0"
+           style="width:${widthPx}px;height:${heightPx}px;border-collapse:collapse;" class="${visibilityClass}">
+      <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]-->`;
     }
-    return `<!--[if mso]>
-  <table align="${align}" border="0" cellpadding="0" cellspacing="0"
-         style="width:${widthPx}px;height:${heightPx}px;border-collapse:collapse;" class="${visibilityClass}">
-    <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>
+    return `<!--[if mso]>
+  <table align="${align}" border="0" cellpadding="0" cellspacing="0"
+         style="width:${widthPx}px;height:${heightPx}px;border-collapse:collapse;" class="${visibilityClass}">
+    <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) {
@@ -1014,19 +916,19 @@ function convertVerticalDividerBlockToHtml(blockData) {
         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>
+    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, visibilityClass);
 }

package/package.json CHANGED Viewed

@@ -1,33 +1,33 @@
-{
-  "name": "email-builder-utils",
-  "version": "1.1.31",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "files": [
-    "dist"
-  ],
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "tsc",
-    "start": "npm run build && node dist/index.js"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://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@github.com/Biztecno-Infra/email-builder-utils.git"
-  },
-  "author": "",
-  "license": "ISC",
-  "bugs": {
-    "url": "https://github.com/Biztecno-Infra/email-builder-utils/issues"
-  },
-  "homepage": "https://github.com/Biztecno-Infra/email-builder-utils#readme",
-  "description": "",
-  "devDependencies": {
-    "@types/node": "^22.13.10",
-    "@types/pngjs": "^6.0.5",
-    "typescript": "^5.8.2"
-  },
-  "dependencies": {
-    "jimp": "^1.6.0"
-  }
-}
+{
+  "name": "email-builder-utils",
+  "version": "1.1.35",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "tsc",
+    "start": "npm run build && node dist/index.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://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@github.com/Biztecno-Infra/email-builder-utils.git"
+  },
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/Biztecno-Infra/email-builder-utils/issues"
+  },
+  "homepage": "https://github.com/Biztecno-Infra/email-builder-utils#readme",
+  "description": "",
+  "devDependencies": {
+    "@types/node": "^22.13.10",
+    "@types/pngjs": "^6.0.5",
+    "typescript": "^5.8.2"
+  },
+  "dependencies": {
+    "jimp": "^1.6.0"
+  }
+}