npm - email-builder-utils - Versions diffs - 1.0.5 → 1.0.8 - Mend

email-builder-utils 1.0.5 → 1.0.8

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 (6) hide show

package/dist/utils/convertJsonToHtml.d.ts.map +1 -1
package/dist/utils/convertJsonToHtml.js +5 -14
package/dist/utils/jsonToHTML.d.ts +1 -1
package/dist/utils/jsonToHTML.d.ts.map +1 -1
package/dist/utils/jsonToHTML.js +69 -42
package/package.json +5 -1

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,GAAI,UAAU,GAAG,~~WAsC9C~~,CAAA"}
1	+ {"version":3,"file":"convertJsonToHtml.d.ts","sourceRoot":"","sources":["../../src/utils/convertJsonToHtml.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB,GAAI,UAAU,GAAG,WA6B9C,CAAA"}

package/dist/utils/convertJsonToHtml.js CHANGED Viewed

@@ -4,7 +4,7 @@ exports.convertJsonToHtml = void 0;
 const jsonToHTML_1 = require("./jsonToHTML");
 const convertJsonToHtml = (jsonData) => {
     const rootData = jsonData?.root?.data;
-    const blocksHtml = rootData?.childrenIds.map((childId) => (0, jsonToHTML_1.convertToHtml)(jsonData[childId], jsonData)).join("");
+    const blocksHtml = rootData?.childrenIds.map((childId) => (0, jsonToHTML_1.convertToHtml)(jsonData[childId], jsonData, 600)).join("");
     const rawHtml = `
   <!DOCTYPE html>
     <html lang="en">
@@ -13,23 +13,14 @@ const convertJsonToHtml = (jsonData) => {
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Email Layout</title>
       <style>
-        @media screen and (max-width: 600px) {
-          .ebr-table-wrapper {
-            width: 360px !important;
-            max-width: 360px !important;
-          }
-        }
-        @media screen and (min-width: 601px) {
-          .ebr-table-wrapper {
-            width: 600px !important;
-            max-width: 600px !important;
-          }
+        .responsive-table {
+          width: 100%;
+          max-width: 600px;
         }
       </style>
     </head>
     <body>
-      <table class="ebr-table-wrapper" style="font-family:${rootData.style?.fontFamily}; width:600px; max-width:600px; margin:0 auto; background-color:${rootData.style?.canvasColor}; color:${rootData.style?.textColor}; ${jsonToHTML_1.tableCommonStyle}">
+      <table class="responsive-table" style="font-family:${rootData.style?.fontFamily}; margin:0 auto; background-color:${rootData.style?.canvasColor}; color:${rootData.style?.textColor}; ${jsonToHTML_1.tableCommonStyle}">
         <tbody>
           <tr>
             <td style="padding:0;">${blocksHtml}</td>

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

@@ -17,6 +17,6 @@ interface IBlockData {
     };
 }
 export declare const tableCommonStyle = "border-collapse:collapse; table-layout:fixed;";
-export declare function convertToHtml(blockData: IBlockData, rootData: any): string;
+export declare function convertToHtml(blockData: IBlockData, rootData: any, cellWidthInPx: number): Promise<string>;
 export {};
 //# sourceMappingURL=jsonToHTML.d.ts.map

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":"~~AAAA~~,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AASrC,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;CAClB;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;~~AAGD~~,eAAO,MAAM,gBAAgB,kDAAkD,CAAC;~~AA4ChF~~,~~wBAAgB~~,aAAa,CAAC,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,~~UAiBjE~~"}
1	+ {"version":3,"file":"jsonToHTML.d.ts","sourceRoot":"","sources":["../../src/utils/jsonToHTML.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AASrC,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;CAClB;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;AASD,eAAO,MAAM,gBAAgB,kDAAkD,CAAC;AAqDhF,wBAAsB,aAAa,CAAC,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,aAAa,EAAE,MAAM,mBAiB9F"}

package/dist/utils/jsonToHTML.js CHANGED Viewed

@@ -2,8 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.tableCommonStyle = void 0;
 exports.convertToHtml = convertToHtml;
+const jimp_1 = require("jimp");
 const types_1 = require("../types");
-const addPxToAttributes = ["width", "height", "fontSize", "lineHeight"];
+const addPxToAttributes = ["fontSize", "lineHeight"];
+const addPxOrPerToAttributes = ["width", "height"];
+const allPxAttributes = [...addPxToAttributes, ...addPxOrPerToAttributes];
 exports.tableCommonStyle = "border-collapse:collapse; table-layout:fixed;";
 function cleanJson(obj) {
     if (typeof obj !== "object" || obj === null)
@@ -25,10 +28,11 @@ function jsonToPlainString(obj) {
         .map(([key, value]) => `${key}:${jsonToPlainString(value)}; `)
         .join("");
 }
-function buildStyles(style) {
+function buildStyles(style, { pxChanges, perChanges }) {
     const stylesObj = {};
     Object.entries(style).forEach(([key, value]) => {
-        const appendPx = addPxToAttributes.includes(key);
+        const appendPx = pxChanges.includes(key);
+        const appendPer = perChanges.includes(key);
         if (value === undefined || value === null || value === "")
             return null;
         if ((key === "padding" || key === "buttonPadding") && typeof value === "object" && value !== null) {
@@ -36,20 +40,29 @@ function buildStyles(style) {
             value = `${padding.top}px ${padding.right}px ${padding.bottom}px ${padding.left}px`;
         }
         const cssKey = key.replace(/([A-Z])/g, "-$1").toLowerCase();
-        return (stylesObj[cssKey] = appendPx ? `${value}px` : value);
+        if (appendPx) {
+            stylesObj[cssKey] = `${value}px`;
+        }
+        else if (appendPer) {
+            stylesObj[cssKey] = `${value}%`;
+        }
+        else {
+            stylesObj[cssKey] = value;
+        }
+        return;
     });
     return jsonToPlainString(cleanJson(stylesObj)).trim();
 }
-function convertToHtml(blockData, rootData) {
+async function convertToHtml(blockData, rootData, cellWidthInPx) {
     switch (blockData.type) {
         case types_1.BlockType.TEXT:
             return convertTextBlock(blockData);
         case types_1.BlockType.IMAGE:
-            return convertImageBlock(blockData);
+            return await convertImageBlock(blockData, cellWidthInPx);
         case types_1.BlockType.BUTTON:
             return convertButtonBlock(blockData);
         case types_1.BlockType.GRID:
-            return convertGridBlock(blockData, rootData);
+            return await convertGridBlock(blockData, rootData, cellWidthInPx);
         case types_1.BlockType.DIVIDER:
             return convertDividerBlockToHtml(blockData);
         case types_1.BlockType.SPACER:
@@ -60,57 +73,60 @@ function convertToHtml(blockData, rootData) {
 }
 function appendOutlookSupport(content, contentStyle) {
     return `
-  <table width="100%" style="${exports.tableCommonStyle}">
-      <tr>
-        <td style="${contentStyle}">
-          ${content}
-         </td>
-      </tr>
-    </table>
+  <table width="100%" style="${exports.tableCommonStyle}"><tr><td style="${contentStyle}">${content}</td></tr></table>
   `;
 }
 function convertDividerBlockToHtml(blockData) {
     const { style } = blockData.data;
     const { thickness, dividerColor, ...rest } = style;
-    const convertedStyle = buildStyles(rest);
+    const convertedStyle = buildStyles(rest, { perChanges: [], pxChanges: allPxAttributes });
     return appendOutlookSupport(`<hr style="height:${thickness}px; background-color: ${dividerColor};" />`, convertedStyle);
 }
 function convertSpacerBlockToHtml(blockData) {
     const { style } = blockData.data;
-    const styles = buildStyles(style);
+    const styles = buildStyles(style, { perChanges: [], pxChanges: allPxAttributes });
     return appendOutlookSupport(``, styles);
 }
 function convertTextBlock(blockData) {
     const { style, props } = blockData.data;
-    const styles = buildStyles(style);
+    const styles = buildStyles(style, { perChanges: [], pxChanges: allPxAttributes });
     const text = props.text || "";
     const navigateToUrl = props.navigateToUrl || "";
     const textContent = appendOutlookSupport(text.replaceAll(/\n/g, "<br>"), styles);
     return navigateToUrl ? `<a href="${navigateToUrl}" style="color:inherit; text-decoration:none; cursor:pointer;">${textContent}</a>` : textContent;
 }
-function appendOutlookForImage(content, imageStyle, imageUrl) {
+async function appendOutlookForImage(content, outerContainerWidth, innerContainerWidth, imageUrl) {
+    const image = await jimp_1.Jimp.read(imageUrl);
+    const originalWidth = image.bitmap.width;
+    const originalHeight = image.bitmap.height;
+    // Calculate width scaling factor based on outer and inner widths
+    const widthScalingFactor = Math.min(outerContainerWidth / originalWidth, innerContainerWidth / originalWidth, 1);
+    // Scale the height proportionally
+    const scaledWidth = Math.round(originalWidth * widthScalingFactor);
+    const scaledHeight = Math.round(originalHeight * widthScalingFactor); // Maintain aspect ratio
+    // VML for Outlook
+    const outlookImage = `<!--[if mso]>
+  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="t" stroke="f" style="width:${scaledWidth}px;height:${scaledHeight}px;">
+    <v:fill src="${imageUrl}" type="frame" />
+  </v:rect>
+  <![endif]-->`;
     return `
-  <!--[if mso]>
-    <v:rect xmlns:v="urn:schemas-microsoft-com:vml"
-      fill="t" stroke="f"
-      style="${imageStyle}">
-      <v:fill src="${imageUrl}" type="frame"/>
-    </v:rect>
-  <![endif]-->
+  ${outlookImage}
    <!--[if !mso]><!-->
     ${content}
   <!--<![endif]-->
   `;
 }
-function convertImageBlock(blockData) {
+async function convertImageBlock(blockData, cellWidthInPx) {
     const { style, props } = blockData.data;
     const { altText, imageUrl, navigateToUrl } = props;
     const { width, height, objectFit, ...containerStyle } = style;
     const imageStyle = { width, height, objectFit };
-    const containerStyles = buildStyles(containerStyle);
-    const imageTagStyles = buildStyles(imageStyle);
+    const containerStyles = buildStyles(containerStyle, { perChanges: [], pxChanges: addPxToAttributes });
+    const imageTagStyles = buildStyles(imageStyle, { perChanges: addPxOrPerToAttributes, pxChanges: addPxToAttributes });
     const imageElement = `<img src="${imageUrl}" alt="${altText}" style="${imageTagStyles}" />`;
-    const imageContent = appendOutlookSupport(appendOutlookForImage(imageElement, imageTagStyles, imageUrl), containerStyles);
+    const outlookImage = await appendOutlookForImage(imageElement, cellWidthInPx, parseInt(width.replace("%", "")) * cellWidthInPx, imageUrl);
+    const imageContent = appendOutlookSupport(outlookImage, containerStyles);
     return navigateToUrl ? `<a href="${navigateToUrl}" target="_blank" style="display:block; text-decoration:none; cursor:pointer;">${imageContent}</a>` : imageContent;
 }
 function appendOutlookForButton(content, buttonStyle, navigateToUrl, text) {
@@ -145,26 +161,32 @@ function convertButtonBlock(blockData) {
         textColor,
         backgroundColor: buttonColor,
     };
-    const convertedButtonStyle = buildStyles(buttonStyle);
-    const convertedStyles = buildStyles(rest);
+    const convertedButtonStyle = buildStyles(buttonStyle, { perChanges: [], pxChanges: allPxAttributes });
+    const convertedStyles = buildStyles(rest, { perChanges: [], pxChanges: allPxAttributes });
     const buttonElement = `<a href="${navigateToUrl}" style="display:inline-block; text-decoration:none; cursor:pointer;"><button style="${convertedButtonStyle}">${text}</button></a>`;
     const buttonContent = appendOutlookSupport(appendOutlookForButton(buttonElement, style, navigateToUrl, text), convertedStyles);
     return buttonContent;
 }
-function convertGridBlock(blockData, rootData) {
-    const { style, childrenIds = [], props } = blockData.data;
-    const { columnGap, ...rest } = style;
-    const { rows, columns, cellWidths } = props;
-    const styles = buildStyles(rest);
-    const gridItems = [];
+async function processGridItemsInParallel(columns, childrenIds, cellWidths, cellWidthInPx, rootData) {
+    const gridItemPromises = [];
     for (let colIndex = 0; colIndex < columns; colIndex++) {
         const childId = childrenIds[colIndex];
         const cellWidth = cellWidths ? cellWidths[colIndex] : 100 / columns;
         const childBlockData = rootData[childId];
         if (childBlockData) {
-            gridItems.push(convertGridCellBlock(childBlockData, rootData, cellWidth));
+            const gridItemPromise = convertGridCellBlock(childBlockData, rootData, cellWidth, cellWidthInPx);
+            gridItemPromises.push(gridItemPromise);
         }
     }
+    const gridItems = await Promise.all(gridItemPromises);
+    return gridItems;
+}
+async function convertGridBlock(blockData, rootData, cellWidthInPx) {
+    const { style, childrenIds = [], props } = blockData.data;
+    const { columnGap, ...rest } = style;
+    const { rows, columns, cellWidths } = props;
+    const styles = buildStyles(rest, { perChanges: [], pxChanges: allPxAttributes });
+    const gridItems = await processGridItemsInParallel(columns, childrenIds, cellWidths, cellWidthInPx, rootData);
     return `
     <table cellspacing="${columnGap}" style="width:100%; max-width:100%; ${styles}">
       <tbody>
@@ -173,9 +195,14 @@ function convertGridBlock(blockData, rootData) {
     </table>
   `;
 }
-function convertGridCellBlock(blockData, rootData, cellWidth) {
+async function convertGridCellBlock(blockData, rootData, cellWidth, parentCellWidth) {
     const { style, childrenIds } = blockData.data;
-    const styles = buildStyles(style);
-    const cellItems = childrenIds && childrenIds.length > 0 ? childrenIds.map((childId) => convertToHtml(rootData[childId], rootData)).join("") : "";
-    return `<td style="width:${cellWidth}% ; max-width:${cellWidth}%; ${styles}">${cellItems}</td>`;
+    const styles = buildStyles(style, { perChanges: [], pxChanges: allPxAttributes });
+    const cellItems = [];
+    if (childrenIds && childrenIds?.length > 0) {
+        for (const childId of childrenIds) {
+            cellItems.push(await convertToHtml(rootData[childId], rootData, parentCellWidth * ((style.width || "0").replace("px", "") / 100)));
+        }
+    }
+    return `<td style="width:${cellWidth}% ; max-width:${cellWidth}%; ${styles}">${cellItems.join("")}</td>`;
 }

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "email-builder-utils",
-  "version": "1.0.5",
+  "version": "1.0.8",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
@@ -24,6 +24,10 @@
   "description": "",
   "devDependencies": {
     "@types/node": "^22.13.10",
+    "@types/pngjs": "^6.0.5",
     "typescript": "^5.8.2"
+  },
+  "dependencies": {
+    "jimp": "^1.6.0"
   }
 }