email-builder-utils 1.1.29 → 1.1.31

package/dist/types/Template.d.ts

@@ -31,6 +31,8 @@ interface IProps {
     youtubeVideoUrl?: string;
     thumbnailUrl?: string;
     shape?: string;
+    hideOnDesktop?: boolean;
+    hideOnMobile?: boolean;
 }
 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;IACf,QAAQ,aAAa;CACtB;AAED,oBAAY,UAAU;IACpB,MAAM,WAAW;IACjB,OAAO,YAAY;IACnB,WAAW,gBAAgB;CAC5B;AAED,UAAU,MAAM;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;CAGhB;AAED,UAAU,MAAM;IACd,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAED,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,SAAS,CAAC;IAChB,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;QACd,WAAW,EAAE,MAAM,EAAE,CAAC;KACvB,CAAC;CACH"}
+{"version":3,"file":"Template.d.ts","sourceRoot":"","sources":["../../src/types/Template.ts"],"names":[],"mappings":"AAAA,oBAAY,SAAS;IACnB,IAAI,SAAS;IACb,KAAK,UAAU;IACf,MAAM,WAAW;IACjB,IAAI,YAAY;IAChB,KAAK,UAAU;IACf,QAAQ,WAAW;IACnB,MAAM,WAAW;IACjB,OAAO,YAAY;IACnB,WAAW,gBAAgB;IAC3B,KAAK,UAAU;IACf,KAAK,UAAU;IACf,QAAQ,aAAa;CACtB;AAED,oBAAY,UAAU;IACpB,MAAM,WAAW;IACjB,OAAO,YAAY;IACnB,WAAW,gBAAgB;CAC5B;AAED,UAAU,MAAM;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;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/common.d.ts

@@ -1,3 +1,7 @@
 export declare const extractYouTubeId: (url: string) => string | null;
 export declare const extractVimeoId: (url: string) => string | null;
+export declare function getVisibilityClass(props?: {
+    hideOnDesktop?: boolean;
+    hideOnMobile?: boolean;
+}): string;
 //# sourceMappingURL=common.d.ts.map

package/dist/utils/common.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../src/utils/common.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,gBAAgB,GAAI,KAAK,MAAM,KAAG,MAAM,GAAG,IAqBvD,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,KAAK,MAAM,KAAG,MAAM,GAAG,IAIrD,CAAC"}
+{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../src/utils/common.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,gBAAgB,GAAI,KAAK,MAAM,KAAG,MAAM,GAAG,IAqBvD,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,KAAK,MAAM,KAAG,MAAM,GAAG,IAIrD,CAAC;AAGF,wBAAgB,kBAAkB,CAAC,KAAK,CAAC,EAAE;IACzC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,UASA"}

package/dist/utils/common.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.extractVimeoId = exports.extractYouTubeId = void 0;
+exports.getVisibilityClass = getVisibilityClass;
 const extractYouTubeId = (url) => {
     try {
         const u = new URL(url);
@@ -31,3 +32,14 @@ const extractVimeoId = (url) => {
     return match ? match[1] : null;
 };
 exports.extractVimeoId = extractVimeoId;
+function getVisibilityClass(props) {
+    if (!props)
+        return "";
+    const { hideOnDesktop, hideOnMobile } = props;
+    return [
+        hideOnMobile ? "hide-mobile" : "",
+        hideOnDesktop ? "hide-desktop" : "",
+    ]
+        .filter(Boolean)
+        .join(" ");
+}

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

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

package/dist/utils/convertJsonToHtml.js

@@ -18,7 +18,7 @@ const convertJsonToHtml = async (jsonData) => {
       <meta charset="UTF-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <meta name="x-apple-disable-message-reformatting" />
-      <style>
+       <style>
         .responsive-table {
           width: 100%;
           max-width: 600px;
@@ -34,6 +34,34 @@ const convertJsonToHtml = async (jsonData) => {
             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>

package/dist/utils/jsonToHTML.d.ts

@@ -12,6 +12,8 @@ interface BlockJsonProps {
     youtubeVideoUrl?: string;
     thumbnailUrl?: string;
     shape?: string;
+    hideOnDesktop?: boolean;
+    hideOnMobile?: boolean;
 }
 interface IBlockData {
     type: BlockType;

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;CAGhB;AAED,UAAU,UAAU;IAClB,IAAI,EAAE,SAAS,CAAC;IAChB,IAAI,EAAE;QACJ,KAAK,EAAE,cAAc,CAAC;QACtB,KAAK,EAAE,GAAG,CAAC;QACX,WAAW,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;KAC7B,CAAC;CACH;AAYD,eAAO,MAAM,gBAAgB,kDAAkD,CAAC;AA2DhF,wBAAsB,aAAa,CACjC,SAAS,EAAE,UAAU,EACrB,QAAQ,EAAE,GAAG,EACb,aAAa,EAAE,MAAM,mBAwBtB;AAsbD,wBAAsB,iBAAiB,CAAC,SAAS,EAAE,GAAG,EAAE,aAAa,EAAE,MAAM,mBA8K5E"}
+{"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"}

package/dist/utils/jsonToHTML.js

@@ -84,35 +84,67 @@ async function convertToHtml(blockData, rootData, cellWidthInPx) {
             return "";
     }
 }
-function appendOutlookSupport(content, contentStyle) {
+// function appendOutlookSupport(content: string, contentStyle: string) {
+//   return `
+//   <table width="100%" style="${tableCommonStyle}"><tr><td style="${contentStyle}">${content}</td></tr></table>
+//   `;
+// }
+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 `
-  <table width="100%" style="${exports.tableCommonStyle}"><tr><td style="${contentStyle}">${content}</td></tr></table>
+  <table width="100%" style="${exports.tableCommonStyle}" class="${visibilityClass}"><tr><td style="${contentStyle}">${content}</td></tr></table>
   `;
 }
 function convertDividerBlockToHtml(blockData) {
     const { style, props } = blockData.data;
+    const { hideOnMobile, hideOnDesktop } = props;
     const { thickness, dividerColor, width, ...rest } = style;
     const convertedStyle = buildStyles(rest, {
         perChanges: [],
         pxChanges: allPxAttributes,
     });
     const dividerWidth = width || "100%";
+    // Build class name based on visibility
+    const visibilityClass = [
+        hideOnMobile ? "hide-mobile" : "",
+        hideOnDesktop ? "hide-desktop" : "",
+    ]
+        .filter(Boolean)
+        .join(" ");
     const dividerContent = `
-    <table width="${dividerWidth}%" cellpadding="0" cellspacing="0">
+    <table
+      width="${dividerWidth}%"
+      cellpadding="0"
+      cellspacing="0"
+    >
       <tr>
-        <td height="${thickness}" style="font-size:1px; line-height:1px; background:${dividerColor}; width:${dividerWidth};">&nbsp;</td>
+        <td
+          height="${thickness}"
+          style="font-size:1px; line-height:1px; background:${dividerColor}; width:${dividerWidth};"
+        >
+          &nbsp;
+        </td>
       </tr>
     </table>
   `;
-    return appendOutlookSupport(dividerContent, convertedStyle);
+    return appendOutlookSupport(dividerContent, convertedStyle, visibilityClass);
 }
 function convertSpacerBlockToHtml(blockData) {
-    const { style } = blockData.data;
+    const { style, props } = blockData.data;
+    const visibilityClass = (0, common_1.getVisibilityClass)(props);
     const styles = buildStyles(style, {
         perChanges: [],
         pxChanges: allPxAttributes,
     });
-    return appendOutlookSupport(``, styles);
+    return appendOutlookSupport(``, styles, visibilityClass);
 }
 // function convertTextBlock(blockData: IBlockData) {
 //   const { style, props } = blockData.data;
@@ -132,6 +164,7 @@ function convertSpacerBlockToHtml(blockData) {
 // }
 function convertTextBlock(blockData) {
     const { style, props } = blockData.data;
+    const visibilityClass = (0, common_1.getVisibilityClass)(props);
     const { width, backgroundColor, padding, borderRadius, borderStyle, borderColor, borderWidth, textContainerBackgroundColor, textContainerPadding, ...rest } = style;
     const textBoxStyle = {
         width,
@@ -159,9 +192,9 @@ function convertTextBlock(blockData) {
         .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);
+    const textContent = appendOutlookSupport(convertedTextBox, styles, visibilityClass);
     return navigateToUrl
-        ? `<a href="${navigateToUrl}" rel="noreferrer noopener" style="color:inherit; text-decoration:none; cursor:pointer;">${textContent}</a>`
+        ? `<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 = {}) {
@@ -198,13 +231,20 @@ async function appendOutlookForImage(content, outerContainerWidth, innerContaine
     <!--<![endif]-->
   `;
 }
+async function computeScaledDimensions(imageUrl, maxContainerWidthPx) {
+    const image = await jimp_1.Jimp.read(imageUrl);
+    const originalWidth = image.bitmap.width;
+    const originalHeight = image.bitmap.height;
+    const widthScalingFactor = Math.min(maxContainerWidthPx / originalWidth, 1);
+    const scaledWidth = Math.round(originalWidth * widthScalingFactor);
+    const scaledHeight = Math.round(originalHeight * widthScalingFactor);
+    return { originalWidth, originalHeight, scaledWidth, scaledHeight };
+}
 async function convertImageBlock(blockData, cellWidthInPx) {
     const { style, props } = blockData.data;
     const { altText, imageUrl, navigateToUrl } = props;
+    const visibilityClass = (0, common_1.getVisibilityClass)(props);
     const { width, height, objectFit, borderRadius, borderWidth, borderColor, borderStyle, ...containerStyle } = style;
-    const image = await jimp_1.Jimp.read(imageUrl);
-    const originalWidth = image.bitmap.width;
-    const originalHeight = image.bitmap.height;
     // Ensure border styles are applied only to the container, not the image
     const imageStyle = {
         width,
@@ -213,27 +253,37 @@ async function convertImageBlock(blockData, cellWidthInPx) {
         borderStyle,
         borderRadius: borderRadius,
         borderColor,
-        maxWidth: `${originalWidth}px`, // Limit to original size
-        maxHeight: `${originalHeight}px`,
     };
     // Add border styles to container for fallback clients
     const containerStyles = buildStyles({
         ...containerStyle,
     }, { perChanges: [], pxChanges: addPxToAttributes });
-    const imageTagStyles = buildStyles(imageStyle, {
-        perChanges: addPxOrPerToAttributes,
-        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) /
+    const innerContainerWidth = (((typeof width === "string" ? parseInt(width.replace("%", "")) : width) ||
+        100) /
         100) *
         (cellWidthInPx -
             (style?.padding?.left || 0) -
             (style?.padding?.right || 0));
-    const outlookImage = await appendOutlookForImage(imageElement, cellWidthInPx, innerContainerWidth, imageUrl, style);
-    const imageContent = appendOutlookSupport(outlookImage, containerStyles);
+    const { originalWidth, originalHeight, scaledWidth, scaledHeight } = await computeScaledDimensions(imageUrl, innerContainerWidth);
+    const imageTagStyles = buildStyles({
+        maxWidth: `${originalWidth}px`, // Limit to original size
+        maxHeight: `${originalHeight}px`,
+        ...imageStyle,
+    }, {
+        perChanges: addPxOrPerToAttributes,
+        pxChanges: addPxToAttributes,
+    });
+    const imageElement = `<img src="${imageUrl}" alt="${altText}" width="${scaledWidth}" height="${scaledHeight}" style="${imageTagStyles}; width:100%; height:auto; max-width:${originalWidth}px; max-height:${originalHeight}px;" />`;
+    const percentWidth = typeof width === "string" && width.endsWith("%")
+        ? width
+        : typeof width === "number"
+            ? `${width}%`
+            : "100%";
+    const nonMsoWrapper = `<div style="display:inline-block; width:${percentWidth}; max-width:${originalWidth}px;">${imageElement}</div>`;
+    const outlookImage = await appendOutlookForImage(nonMsoWrapper, cellWidthInPx, innerContainerWidth, imageUrl, style);
+    const imageContent = appendOutlookSupport(outlookImage, containerStyles, visibilityClass);
     return navigateToUrl
-        ? `<a href="${navigateToUrl}" target="_blank" rel="noreferrer noopener"  style="display:block; text-decoration:none; cursor:pointer;">${imageContent}</a>`
+        ? `<a href="${navigateToUrl}" target="_blank" rel="noreferrer noopener" style="display:block;">${imageContent}</a>`
         : imageContent;
 }
 function appendOutlookForButton(content, buttonStyle, navigateToUrl, text) {
@@ -263,6 +313,7 @@ function appendOutlookForButton(content, buttonStyle, navigateToUrl, text) {
 function convertButtonBlock(blockData) {
     const { style, props } = blockData.data;
     const { text, navigateToUrl } = props;
+    const visibilityClass = (0, common_1.getVisibilityClass)(props);
     const { fontFamily, fontSize, fontWeight, borderColor, borderRadius, borderWidth, borderStyle, buttonPadding, color, buttonColor, width, height, ...rest } = style;
     const buttonStyle = {
         width,
@@ -287,44 +338,71 @@ function convertButtonBlock(blockData) {
         pxChanges: allPxAttributes,
     });
     const buttonElement = `<a href="${navigateToUrl}" rel="noreferrer noopener" style="display:inline-block; text-decoration:none; cursor:pointer;"><button style="${convertedButtonStyle}">${text}</button></a>`;
-    const buttonContent = appendOutlookSupport(appendOutlookForButton(buttonElement, style, navigateToUrl, text), convertedStyles);
+    const buttonContent = appendOutlookSupport(appendOutlookForButton(buttonElement, style, navigateToUrl, text), convertedStyles, visibilityClass);
     return buttonContent;
 }
 async function convertGridBlock(blockData, rootData, cellWidthInPx) {
     const { style = {}, childrenIds = [], props } = blockData.data;
     const { columns = 1, cellWidths = [], responsive = true } = props;
     const { columnGap = 0, ...restStyle } = style;
+    const gridVisibilityClass = (0, common_1.getVisibilityClass)(props);
     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;">
+  <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;">
+  <table border="0" cellpadding="0" cellspacing="${columnGap}" width="100%" role="presentation" 
+    style="${exports.tableCommonStyle} ${tableStyles}border-collapse: separate;border-spacing:${columnGap}px;" class="${gridVisibilityClass}">
   `;
     for (let r = 0; r < visualRows; r++) {
         html += "<tr>";
+        let visibleCellsInRow = 0;
+        const rowCellVisibility = [];
         for (let c = 0; c < columns; c++) {
             const idx = r * columns + c;
             const childId = childrenIds[idx];
-            const widthPercent = cellWidths[c] ?? 100 / columns;
             if (childId) {
                 const child = rootData[childId];
-                const { style: cellStyle = {} } = child.data || {};
+                const { props: childProps = {} } = child.data || {};
+                const isVisible = !childProps.hideOnDesktop;
+                rowCellVisibility.push(isVisible);
+                if (isVisible)
+                    visibleCellsInRow++;
+            }
+            else {
+                rowCellVisibility.push(false);
+            }
+        }
+        const widthPerVisibleCell = visibleCellsInRow > 0 ? 100 / visibleCellsInRow : 100 / columns;
+        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 verticalAlign = cellStyle.verticalAlign || "top";
                 const { html: childHtml, styles } = await convertGridCellBlock(child, rootData, widthPercent, cellWidthInPx);
-                html += `
-   <td
-    width="${widthPercent}%"
-    ${responsive ? 'class="stack-column"' : ""}
-    style="vertical-align:${verticalAlign}; word-break:break-word; ${styles} "
-  >
-    ${childHtml}
-  </td>`;
+                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>`;
+                }
             }
             else {
                 html += `<td width="${widthPercent}%" ${responsive ? 'class="stack-column"' : ""} style=""></td>`;
@@ -336,7 +414,7 @@ async function convertGridBlock(blockData, rootData, cellWidthInPx) {
     return html;
 }
 async function convertGridCellBlock(blockData, rootData, cellWidthPercent, parentCellWidthPx) {
-    const { style = {}, childrenIds = [] } = blockData.data;
+    const { style = {}, childrenIds = [], props = {} } = blockData.data;
     const styles = buildStyles(style, {
         perChanges: [],
         pxChanges: allPxAttributes,
@@ -349,13 +427,17 @@ async function convertGridCellBlock(blockData, rootData, cellWidthPercent, paren
             innerHtmlParts.push(await convertToHtml(child, rootData, cellWidthPx));
         }
     }
+    const cellContent = innerHtmlParts.join("");
     return {
-        html: innerHtmlParts.join(""),
+        html: cellContent,
         styles,
     };
 }
+// Enhanced Video Block HTML Conversion with centered play button
 async function convertVideoBlock(blockData, cellWidthInPx) {
     const { style, props } = blockData.data;
+    const visibilityClass = (0, common_1.getVisibilityClass)(props);
+    const { hideOnDesktop } = props; // Get the hideOnDesktop prop
     const { videoUrl, youtubeVideoUrl, thumbnailUrl, altText } = props;
     const videoLink = youtubeVideoUrl || videoUrl || "#";
     let resolvedThumbnail = thumbnailUrl || "https://via.placeholder.com/480x360?text=No+Thumbnail";
@@ -387,10 +469,7 @@ 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({
@@ -413,77 +492,99 @@ async function convertVideoBlock(blockData, cellWidthInPx) {
     // VML centering math (for Outlook)
     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}"
-    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)}"`
-        : ""}
+    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>
+       <!--<![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>
+       <![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;
+      "
     >
-      <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]-->
-`;
+      <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;">
+  <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" 
@@ -670,130 +771,10 @@ function computeArcSize(borderRadius, widthPx) {
 //   </tr>
 // </table>`;
 // }
-// // ---------- Updated VML builder with better text containment ----------
-// function buildVMLShape({
-//   shape,
-//   widthPx,
-//   heightPx,
-//   imageUrl,
-//   backgroundColor,
-//   borderWidth,
-//   borderColor,
-//   borderRadius,
-//   text,
-//   textColor = "#000000",
-//   textSize = 14,
-//   verticalAlign = "center",
-//   msoHasBakedText = false,
-// }: any) {
-//   // --- Basic setup ---
-//   const bw = borderWidth || 0;
-//   const bc = borderColor || "transparent";
-//   const borderAttrs =
-//     bw > 0 ? `strokeweight="${bw}px" strokecolor="${bc}"` : `stroked="false"`;
-//   const fillColor = backgroundColor || "#2F80ED";
-//   const fillMarkup = `<v:fill ${
-//     imageUrl ? `src="${imageUrl}" type="frame" aspect="atleast"` : ""
-//   } color="${fillColor}" />`;
-//   // --- Shape tag ---
-//   let tag = "rect";
-//   let extraAttr = "";
-//   if (shape === "circle" || shape === "oval") {
-//     tag = "oval";
-//   } else if (shape === "rounded") {
-//     tag = "roundrect";
-//     extraAttr = `arcsize="${computeArcSize(borderRadius, widthPx)}"`;
-//   }
-//   // --- Text alignment ---
-//   const vAlignMap = { top: "top", center: "middle", bottom: "bottom" };
-//   const vAlign = vAlignMap[verticalAlign as keyof typeof vAlignMap] || "middle";
-//   const safeFontSize = Math.max(textSize, 10);
-//   // --- Text inside shape ---
-//   const textboxMarkup =
-//     text && !msoHasBakedText
-//       ? `<v:textbox inset="6pt,6pt,6pt,6pt" style="mso-fit-shape-to-text:false;">
-//            <div style="display:table;width:100%;height:100%;">
-//              <div style="display:table-cell;vertical-align:${vAlign};text-align:center;">
-//                <div style="color:${textColor};font-family:Arial, sans-serif;font-size:${safeFontSize}px;line-height:1.3;word-wrap:break-word;">
-//                  ${text}
-//                </div>
-//              </div>
-//            </div>
-//          </v:textbox>`
-//       : `<v:textbox inset="0,0,0,0"><div style="display:none;">.</div></v:textbox>`;
-//   // --- Final shape markup ---
-//   return `
-// <v:${tag} xmlns:v="urn:schemas-microsoft-com:vml"
-//   style="width:${widthPx}px;height:${heightPx}px;
-//          mso-position-horizontal:center;
-//          mso-position-vertical:center;"
-//   ${borderAttrs}
-//   fill="true" fillcolor="${fillColor}"${extraAttr}>
-//   ${fillMarkup}
-//   ${textboxMarkup}
-// </v:${tag}>`;
-// }
-// // ---------- Updated appendOutlookForShape ----------
-// async function appendOutlookForShape(
-//   content: string,
-//   outerContainerWidth: number,
-//   innerContainerWidth: number,
-//   opts: {
-//     shape: string;
-//     imageUrl?: string;
-//     backgroundColor?: string;
-//     shapeColor?: string;
-//     borderWidth?: number;
-//     borderColor?: string;
-//     borderRadius?: string | number;
-//     heightPx: number;
-//     text?: string;
-//     textColor?: string;
-//     textSize?: number;
-//     verticalAlign?: "top" | "middle" | "bottom";
-//     alignment?: "left" | "center" | "right";
-//     padding?: { top?: number; right?: number; bottom?: number; left?: number };
-//     msoBakeImageWithText?: string;
-//   }
-// ) {
-//   const widthPx = Math.round(
-//     Math.min(outerContainerWidth, innerContainerWidth)
-//   );
-//   const heightPx = Math.max(1, Math.round(opts.heightPx));
-//   const vml = buildVMLShape({
-//     shape: opts.shape,
-//     widthPx,
-//     heightPx,
-//     imageUrl: opts.msoBakeImageWithText || opts.imageUrl,
-//     backgroundColor: opts.shapeColor || opts.backgroundColor,
-//     borderWidth: opts.borderWidth,
-//     borderColor: opts.borderColor,
-//     borderRadius: opts.borderRadius,
-//     text: opts.text,
-//     textColor: opts.textColor,
-//     textSize: opts.textSize,
-//     msoHasBakedText: Boolean(opts.msoBakeImageWithText),
-//   });
-//   const pad = opts.padding || {};
-//   const align = opts.alignment || "left";
-//   const valign = opts.verticalAlign || "middle";
-//   return `<!--[if mso]>
-//   <table align="${align}" border="0" cellpadding="0" cellspacing="0"
-//          style="width:${widthPx}px;height:${heightPx}px;">
-//     <tr>
-//       <td valign="${valign}"
-//           style="padding:${pad.top || 0}px ${pad.right || 0}px ${
-//     pad.bottom || 0
-//   }px ${pad.left || 0}px;">
-//         ${vml}
-//       </td>
-//     </tr>
-//   </table>
-//   <![endif]-->`;
-// }
 async function convertShapeBlock(blockData) {
     const { style, props } = blockData.data;
     const { shape, text, imageUrl } = props;
+    const visibilityClass = (0, common_1.getVisibilityClass)(props);
     const { width = "100", height = "150", padding = {}, backgroundColor = "#2F80ED", borderRadius, borderWidth = 0, borderStyle = "solid", borderColor = "transparent", customCss, shapeColor, alignment = "left", msoBakeImageWithText, color = "#000000", fontSize = 14, textAlign = "center", verticalAlign = "middle", } = style || {};
     const borderRadiusMap = {
         rectangle: "0",
@@ -910,10 +891,10 @@ async function convertShapeBlock(blockData) {
         alignment,
         padding,
         msoBakeImageWithText,
-    });
+    }, visibilityClass);
     // Combine into table wrapper
     return `
-<table width="100%" style="border-collapse:collapse;table-layout:fixed;">
+<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}
@@ -974,7 +955,7 @@ function buildVMLShape({ shape, widthPx, heightPx, imageUrl, backgroundColor, bo
   ${textboxMarkup}
 </v:${tag}>`;
 }
-function appendOutlookForShape(content, outerContainerWidth, innerContainerWidth, opts) {
+function appendOutlookForShape(content, outerContainerWidth, innerContainerWidth, opts, visibilityClass) {
     const widthPx = Math.round(Math.min(outerContainerWidth, innerContainerWidth));
     const heightPx = Math.max(1, Math.round(opts.heightPx));
     const vml = buildVMLShape({
@@ -996,10 +977,24 @@ function appendOutlookForShape(content, outerContainerWidth, innerContainerWidth
     const pad = opts.padding || {};
     const align = opts.alignment || "left";
     const valign = opts.verticalAlign || "middle";
-    // Outlook wrapper table ensures the cell's valign works if vml alone doesn't
+    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>
+    <!--<![endif]-->`;
+    }
     return `<!--[if mso]>
   <table align="${align}" border="0" cellpadding="0" cellspacing="0"
-         style="width:${widthPx}px;height:${heightPx}px;border-collapse:collapse;">
+         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;">
@@ -1010,8 +1005,9 @@ function appendOutlookForShape(content, outerContainerWidth, innerContainerWidth
 <![endif]-->`;
 }
 function convertVerticalDividerBlockToHtml(blockData) {
-    const { style } = blockData.data;
+    const { style, props } = blockData.data;
     const { width, height, dividerColor, ...rest } = style;
+    const visibilityClass = (0, common_1.getVisibilityClass)(props);
     // Convert other styles to inline-safe HTML attributes
     const convertedStyle = buildStyles(rest, {
         perChanges: [],
@@ -1032,5 +1028,5 @@ function convertVerticalDividerBlockToHtml(blockData) {
       </tr>
     </table>
   `;
-    return appendOutlookSupport(dividerContent, convertedStyle);
+    return appendOutlookSupport(dividerContent, convertedStyle, visibilityClass);
 }

package/package.json

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