email-builder-utils 1.1.47 → 1.1.48

package/dist/utils/blocks/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/utils/blocks/button.ts"],"names":[],"mappings":"AAYA,wBAAgB,sBAAsB,CAAC,UAAU,EAAE;IAAE,KAAK,EAAE,GAAG,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,aAAa,EAAE,MAAM,CAAA;CAAE;;;;;;;;;;;;;;;;;;;;;;EA6ErG;AAED,wBAAgB,kBAAkB,CAAC,SAAS,EAAE,GAAG,UAgEhD"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/utils/blocks/button.ts"],"names":[],"mappings":"AAIA,wBAAgB,sBAAsB,CAAC,UAAU,EAAE;IAAE,KAAK,EAAE,GAAG,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,aAAa,EAAE,MAAM,CAAA;CAAE;;;;;;;;;;;;;;;;;;;;;;EA6ErG;AAED,wBAAgB,kBAAkB,CAAC,SAAS,EAAE,GAAG,UAgEhD"}

package/dist/utils/blocks/button.js

@@ -5,13 +5,6 @@ exports.convertButtonBlock = convertButtonBlock;
 const buildStyles_1 = require("../buildStyles");
 const fontFallback_1 = require("../fontFallback");
 const common_1 = require("../common");
-function encodeBlockPropsAttr(props) {
-    return JSON.stringify(props)
-        .replace(/&/g, "&")
-        .replace(/"/g, """)
-        .replace(/</g, "&lt;")
-        .replace(/>/g, "&gt;");
-}
 function appendOutlookForButton(buttonData) {
     const { style, text, navigateToUrl } = buttonData;
     const pad = style.buttonPadding || {};
@@ -93,7 +86,7 @@ function convertButtonBlock(blockData) {
         text: text || "",
         navigateToUrl: navigateToUrl || "",
     });
-    const buttonBlockProps = encodeBlockPropsAttr({
+    const buttonBlockProps = (0, common_1.encodeBlockPropsAttr)({
         buttonText: text || "",
         navigateToUrl: navigateToUrl || "",
         buttonColor: computed.bgColor,

package/dist/utils/blocks/dividers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dividers.d.ts","sourceRoot":"","sources":["../../../src/utils/blocks/dividers.ts"],"names":[],"mappings":"AAIA,wBAAgB,yBAAyB,CAAC,SAAS,EAAE,GAAG,UAuCvD;AAED,wBAAgB,wBAAwB,CAAC,SAAS,EAAE,GAAG,UAKtD;AAED,wBAAgB,iCAAiC,CAAC,SAAS,EAAE,GAAG,UAuB/D"}
+{"version":3,"file":"dividers.d.ts","sourceRoot":"","sources":["../../../src/utils/blocks/dividers.ts"],"names":[],"mappings":"AAIA,wBAAgB,yBAAyB,CAAC,SAAS,EAAE,GAAG,UAuCvD;AAED,wBAAgB,wBAAwB,CAAC,SAAS,EAAE,GAAG,UAKtD;AAED,wBAAgB,iCAAiC,CAAC,SAAS,EAAE,GAAG,UAwB/D"}

package/dist/utils/blocks/dividers.js

@@ -52,11 +52,12 @@ function convertVerticalDividerBlockToHtml(blockData) {
     const { width, height, dividerColor, padding, backgroundColor } = style;
     const visibilityClass = (0, common_1.getVisibilityClass)(props);
     const outerStyles = (0, buildStyles_1.buildStyles)({ padding, backgroundColor }, {
-        perChanges: [], pxChanges: buildStyles_1.allPxAttributes,
+        perChanges: [],
+        pxChanges: buildStyles_1.allPxAttributes,
     });
     return `
   <table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation"
-         style="${buildStyles_1.tableCommonStyle}; max-width:600px;" class="${visibilityClass}">
+         style="${buildStyles_1.tableCommonStyle}; max-width:600px;" class="${visibilityClass}" data-block-type="vdivider">
     <tr>
       <td style="${outerStyles}; text-align:center; vertical-align:middle;">
         <!--[if mso | IE]>

package/dist/utils/blocks/shape.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"shape.d.ts","sourceRoot":"","sources":["../../../src/utils/blocks/shape.ts"],"names":[],"mappings":"AAuHA,wBAAsB,iBAAiB,CAAC,SAAS,EAAE,GAAG,mBAyHrD"}
+{"version":3,"file":"shape.d.ts","sourceRoot":"","sources":["../../../src/utils/blocks/shape.ts"],"names":[],"mappings":"AAuHA,wBAAsB,iBAAiB,CAAC,SAAS,EAAE,GAAG,mBA2MrD"}

package/dist/utils/blocks/shape.js

@@ -100,11 +100,19 @@ async function convertShapeBlock(blockData) {
     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", rounded: "10px", circle: "50%", oval: "50%",
+        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;
+    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;
@@ -115,16 +123,28 @@ async function convertShapeBlock(blockData) {
         resolvedBorderRadius = "50% / 50%";
     }
     const finalBackgroundColor = shapeColor || backgroundColor;
+    // --- Horizontal alignment for outer container ---
     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] || "";
-    const textAlignMap = { left: "left", center: "center", right: "right", justify: "justify" };
+    // --- Text + vertical alignment maps ---
+    const textAlignMap = {
+        left: "left",
+        center: "center",
+        right: "right",
+        justify: "justify",
+    };
     const textAlignStyle = textAlignMap[textAlign] || "center";
+    // --- Text styling ---
     const textSizeStyle = `font-size:${fontSize}px;line-height:1.3;word-break:break-word;overflow-wrap:break-word;color:${color};`;
+    // ============================
+    // Modern HTML (non-MSO)
+    // ============================
     let nonMsoContent = "";
+    // --- Case 1: Image + Text ---
     if (imageUrl && text) {
         nonMsoContent = `
 <div style="display:inline-block;width:${resolvedWidthPx}px;height:${resolvedHeightPx}px;
@@ -148,6 +168,7 @@ async function convertShapeBlock(blockData) {
   </table>
 </div>`;
     }
+    // --- Case 2: Image only ---
     else if (imageUrl) {
         nonMsoContent = `
 <div style="display:inline-block;width:${resolvedWidthPx}px;height:${resolvedHeightPx}px;
@@ -159,6 +180,7 @@ async function convertShapeBlock(blockData) {
     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;
@@ -178,15 +200,50 @@ async function convertShapeBlock(blockData) {
   </table>
 </div>`;
     }
+    // Outlook (VML) fallback
     const outlookContent = appendOutlookForShape(nonMsoContent, resolvedWidthPx, resolvedWidthPx, {
-        shape, imageUrl, backgroundColor, shapeColor,
-        borderWidth, borderColor, borderRadius: resolvedBorderRadius,
-        heightPx: resolvedHeightPx, text, textColor: color,
-        textSize: fontSize, verticalAlign, textAlign, alignment,
-        padding, msoBakeImageWithText,
+        shape,
+        imageUrl,
+        backgroundColor,
+        shapeColor,
+        borderWidth,
+        borderColor,
+        borderRadius: resolvedBorderRadius,
+        heightPx: resolvedHeightPx,
+        text,
+        textColor: color,
+        textSize: fontSize,
+        verticalAlign,
+        textAlign, // ✅ added
+        alignment,
+        padding,
+        msoBakeImageWithText,
     }, visibilityClass);
+    const shapeBlockProps = (0, common_1.encodeBlockPropsAttr)({
+        shape: shape || 'rectangle',
+        width: resolvedWidthPx,
+        height: resolvedHeightPx,
+        shapeColor: shapeColor || '',
+        backgroundColor: backgroundColor || '',
+        borderRadius: resolvedBorderRadius,
+        borderWidth,
+        borderColor,
+        borderStyle,
+        imageUrl: imageUrl || '',
+        text: text || '',
+        color,
+        fontSize,
+        textAlign,
+        verticalAlign,
+        alignment,
+        padding,
+        customCss: customCss || '',
+        hideOnDesktop: Boolean(props.hideOnDesktop),
+        hideOnMobile: Boolean(props.hideOnMobile),
+    });
+    // Combine into table wrapper
     return `
-<table width="100%" style="border-collapse:collapse;table-layout:fixed;max-width:600px;" class="${visibilityClass}">
+<table width="100%" style="border-collapse:collapse;table-layout:fixed;max-width:600px;" class="${visibilityClass}" data-block-type="shape" data-block-props="${shapeBlockProps}">
   <tr>
     <td style="padding:${padding.top || 0}px ${padding.right || 0}px ${padding.bottom || 0}px ${padding.left || 0}px;text-align:${alignment};">
       ${outlookContent}

package/dist/utils/blocks/video.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"video.d.ts","sourceRoot":"","sources":["../../../src/utils/blocks/video.ts"],"names":[],"mappings":"AAUA,wBAAsB,iBAAiB,CAAC,SAAS,EAAE,GAAG,EAAE,aAAa,EAAE,MAAM,mBA0H5E"}
+{"version":3,"file":"video.d.ts","sourceRoot":"","sources":["../../../src/utils/blocks/video.ts"],"names":[],"mappings":"AAUA,wBAAsB,iBAAiB,CACrC,SAAS,EAAE,GAAG,EACd,aAAa,EAAE,MAAM,mBAiKtB"}

package/dist/utils/blocks/video.js

@@ -30,6 +30,7 @@ async function convertVideoBlock(blockData, cellWidthInPx) {
             catch (_) { }
         }
     }
+    // Width / dimensions
     let percentWidth = '100%';
     if (typeof style?.width === 'string' && style.width.trim().endsWith('%')) {
         percentWidth = style.width.trim();
@@ -42,24 +43,51 @@ async function convertVideoBlock(blockData, cellWidthInPx) {
     const innerContainerWidth = (parseFloat(percentWidth) / 100) * (cellWidthInPx - paddingLeft - paddingRight);
     const thumbnailW = Math.round(innerContainerWidth);
     const thumbnailH = Math.round(thumbnailW / (16 / 9));
+    // Border
     const borderRadius = parseInt(style?.borderRadius || 0);
     const borderWidth = parseInt(style?.borderWidth || 0);
     const borderColor = style?.borderColor || 'transparent';
     const borderStyleProp = style?.borderStyle || 'solid';
-    const outerContainerStyles = (0, buildStyles_1.buildStyles)({ ...style, width: undefined, borderColor: undefined, borderRadius: undefined, borderWidth: undefined, borderStyle: undefined }, { perChanges: buildStyles_1.addPxOrPerToAttributes, pxChanges: buildStyles_1.addPxToAttributes });
+    const outerContainerStyles = (0, buildStyles_1.buildStyles)({
+        ...style,
+        width: undefined,
+        borderColor: undefined,
+        borderRadius: undefined,
+        borderWidth: undefined,
+        borderStyle: undefined,
+    }, { perChanges: buildStyles_1.addPxOrPerToAttributes, pxChanges: buildStyles_1.addPxToAttributes });
     const align = style?.textAlign || 'left';
     const playIconW = 65;
     const playIconH = 46;
+    // ── Industry-standard VML + background-image table approach ──────────────────
+    // Mirrors the pattern used by professional email builders (e.g. Beefree):
+    //
+    // VML (<!--[if vml]>): all Outlook / Word rendering engine versions.
+    //   v:group wraps thumbnail (v:rect frame fill) + vector play button
+    //   (v:oval white circle + v:shape black triangle). No external image needed.
+    //
+    // Non-VML (<!--[if !vml]>): Gmail, Apple Mail, Yahoo, Outlook.com, EML viewers.
+    //   thumbnail as `background` attribute + inline background-image on <table>.
+    //   3-column layout: [25% spacer GIF] [50% play icon, centred] [25% spacer].
+    //   The spacer GIF has a 4:9 aspect ratio — when it fills the 25% column its
+    //   rendered height equals thumbnailWidth × 9/16, keeping the table at 16:9
+    //   without any fixed `height` CSS (which is stripped by many clients).
+    // VML coordinate positions for the play button (in the v:group coord space).
     const ovalSize = 65;
     const ovalLeft = Math.round(thumbnailW / 2 - ovalSize / 2);
     const ovalTop = Math.round(thumbnailH / 2 - ovalSize / 2);
     const triW = 23;
     const triH = 33;
+    // Triangle centre is slightly right of geometric centre for visual balance.
     const triLeft = Math.round(thumbnailW / 2 - triW / 2 + 3);
     const triTop = Math.round(thumbnailH / 2 - triH / 2);
-    const borderCss = borderWidth > 0 ? `border:${borderWidth}px ${borderStyleProp} ${borderColor};` : '';
+    const borderCss = borderWidth > 0
+        ? `border:${borderWidth}px ${borderStyleProp} ${borderColor};`
+        : '';
     const radiusCss = borderRadius > 0 ? `border-radius:${borderRadius}px; overflow:hidden;` : '';
+    // min-height fallback for clients that ignore the spacer GIF (e.g. some webmail).
     const minHeight = Math.round(thumbnailW * 0.3);
+    // VML block — shown only in Outlook (Word engine supports VML, not standard HTML).
     const outlookContent = hideOnDesktop ? '' : `<!--[if vml]>
 <v:group xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word"
   coordsize="${thumbnailW},${thumbnailH}" coordorigin="0,0"
@@ -76,6 +104,7 @@ async function convertVideoBlock(blockData, cellWidthInPx) {
     style="position:absolute;left:${triLeft};top:${triTop};width:${triW};height:${triH};" />
 </v:group>
 <![endif]-->`;
+    // Non-VML block — shown in all clients except Outlook.
     const nonMsoContent = `<!--[if !vml]><!-->
 <a href="${videoLink}" target="_blank"
     style="display:block; text-decoration:none; background-image:url('${resolvedThumbnail}'); background-size:cover; background-position:center; ${borderCss}${radiusCss}">
@@ -101,7 +130,10 @@ async function convertVideoBlock(blockData, cellWidthInPx) {
     return `
 <table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation"
   style="border-collapse:collapse; max-width:600px; margin:0; padding:0;"
-  class="${visibilityClass}">
+  class="${visibilityClass}" data-block-type="video"
+  data-video-url="${videoUrl || ''}" data-youtube-url="${youtubeVideoUrl || ''}"
+  data-thumbnail-url="${thumbnailUrl || ''}" data-alt-text="${altText || ''}"
+  data-width="${typeof style?.width === 'number' ? style.width : 100}">
   <tr>
     <td align="${align}" style="${outerContainerStyles}">
       <table border="0" cellpadding="0" cellspacing="0" role="presentation"

package/dist/utils/common.d.ts

@@ -4,4 +4,5 @@ export declare function getVisibilityClass(props?: {
     hideOnDesktop?: boolean;
     hideOnMobile?: boolean;
 }): string;
+export declare function encodeBlockPropsAttr(props: Record<string, any>): 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;AAGF,wBAAgB,kBAAkB,CAAC,KAAK,CAAC,EAAE;IACzC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,UASA"}
+{"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;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,MAAM,CAQvE"}

package/dist/utils/common.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.extractVimeoId = exports.extractYouTubeId = void 0;
 exports.getVisibilityClass = getVisibilityClass;
+exports.encodeBlockPropsAttr = encodeBlockPropsAttr;
 const extractYouTubeId = (url) => {
     try {
         const u = new URL(url);
@@ -43,3 +44,12 @@ function getVisibilityClass(props) {
         .filter(Boolean)
         .join(" ");
 }
+function encodeBlockPropsAttr(props) {
+    // HTML attribute-safe JSON string.
+    // Keep it minimal and deterministic: the importer reads it back via getAttribute + JSON.parse.
+    return JSON.stringify(props)
+        .replace(/&/g, "&")
+        .replace(/"/g, """)
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;");
+}

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

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

package/dist/utils/convertJsonToHtml.js

@@ -20,6 +20,7 @@ const convertJsonToHtml = async (jsonData) => {
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="x-apple-disable-message-reformatting" />
+    <meta name="format-detection" content="telephone=no,address=no,email=no,date=no,url=no" />
     <!--[if gte mso 9]><xml>
       <o:OfficeDocumentSettings>
         <o:AllowPNG/>
@@ -27,83 +28,143 @@ const convertJsonToHtml = async (jsonData) => {
       </o:OfficeDocumentSettings>
     </xml><![endif]-->
     <style>
-        .responsive-table {
-          width: 100%;
-          max-width: 600px;
+      html, body {
+        margin: 0 !important;
+        padding: 0 !important;
+        width: 100% !important;
+        -ms-text-size-adjust: 100%;
+        -webkit-text-size-adjust: 100%;
+      }
+
+      body, table, td, p, a {
+        font-family: ${(0, fontFallback_1.withFontFallback)(fontFamily)};
+      }
+
+      table, td {
+        mso-table-lspace: 0pt;
+        mso-table-rspace: 0pt;
+        border-collapse: collapse !important;
+      }
+
+      img {
+        -ms-interpolation-mode: bicubic;
+        border: 0;
+        outline: none;
+        text-decoration: none;
+        display: block;
+        height: auto;
+        line-height: 100%;
+      }
+
+      a {
+        text-decoration: none;
+        color: inherit;
+      }
+
+      .email-container {
+        width: 100%;
+        max-width: 600px;
+        margin: 0 auto;
+      }
+
+      .stack-column,
+      .stack-column-cell {
+        vertical-align: top;
+      }
+
+      .hide-mobile {
+        display: block !important;
+        max-height: none !important;
+        overflow: visible !important;
+      }
+
+      .hide-desktop {
+        display: none !important;
+        max-height: 0 !important;
+        overflow: hidden !important;
+        mso-hide: all !important;
+      }
+
+      @media only screen and (max-width: 600px) {
+        .email-container {
+          width: 100% !important;
         }
-        @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;
-          }
+
+        .stack-column,
+        .stack-column-cell {
+          display: block !important;
+          width: 100% !important;
+          max-width: 100% !important;
         }
+
         .hide-mobile {
-         display: block !important;
-       }
-
-       .hide-desktop {
-         display: block !important;
-         mso-hide: all !important; /* Hide in Outlook (treated as desktop) */
-       }
-
-       @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 style="margin:0; padding:0; background-color:${canvasColor};">
-      <center style="width:100%; background-color:${canvasColor};">
-        <table
-          class="responsive-table"
-          role="presentation"
-          bgcolor="${canvasColor}"
-          cellpadding="0"
-          cellspacing="0"
-          border="0"
-          width="600"
-          align="center"
-          style="
-            font-family: ${(0, fontFallback_1.withFontFallback)(fontFamily)};
-            margin: 0 auto;
-            table-layout:fixed;
-            width:600px;
-            max-width:600px;
-            background-color: ${canvasColor};
-            ${textColor ? `color: ${textColor};` : ''}
-            ${borderWidth ? `border: ${borderWidth}px ${borderStyle || 'solid'} ${borderColor || 'transparent'};` : ''}
-            ${borderRadius ? `border-radius: ${borderRadius}px;` : ''}"
-        >
-          <tbody>
-            <tr>
-              <td style="padding: ${top}px ${right}px ${bottom}px ${left}px;">
-                ${blocksHtml.join("")}
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </center>
-    </body>
-  </html>`;
+          display: none !important;
+          max-height: 0 !important;
+          overflow: hidden !important;
+          mso-hide: all !important;
+        }
+
+        .hide-desktop {
+          display: block !important;
+          max-height: none !important;
+          overflow: visible !important;
+        }
+      }
+    </style>
+  </head>
+  <body style="margin:0; padding:0; background-color:${canvasColor || '#ffffff'};">
+    <center style="width:100%; background-color:${canvasColor || '#ffffff'};">
+
+      <table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="${canvasColor || '#ffffff'}">
+        <tr>
+          <td align="center">
+
+            <!--[if mso]>
+            <table role="presentation" border="0" cellspacing="0" cellpadding="0" width="600">
+              <tr>
+                <td>
+            <![endif]-->
+
+            <table
+              role="presentation"
+              class="email-container"
+              bgcolor="${canvasColor || '#ffffff'}"
+              cellpadding="0"
+              cellspacing="0"
+              border="0"
+              width="100%"
+              style="
+                font-family: ${(0, fontFallback_1.withFontFallback)(fontFamily)};
+                table-layout: fixed;
+                width: 100%;
+                max-width: 600px;
+                background-color: ${canvasColor || '#ffffff'};
+                ${textColor ? `color: ${textColor};` : ''}
+                ${borderWidth ? `border: ${borderWidth}px ${borderStyle || 'solid'} ${borderColor || 'transparent'};` : ''}
+                ${borderRadius ? `border-radius: ${borderRadius}px;` : ''}"
+            >
+              <tbody>
+                <tr>
+                  <td style="padding: ${top}px ${right}px ${bottom}px ${left}px;">
+                    ${blocksHtml.join("")}
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+
+            <!--[if mso]>
+                </td>
+              </tr>
+            </table>
+            <![endif]-->
+
+          </td>
+        </tr>
+      </table>
+
+    </center>
+  </body>
+</html>`;
     return rawHtml;
 };
 exports.convertJsonToHtml = convertJsonToHtml;

package/package.json

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