npm - email-builder-utils - Versions diffs - 1.1.2 → 1.1.5 - Mend

email-builder-utils 1.1.2 → 1.1.5

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

package/dist/utils/convertJsonToHtml.js +42 -42
package/dist/utils/jsonToHTML.js +50 -37
package/package.json +33 -33

package/dist/utils/convertJsonToHtml.js CHANGED Viewed

@@ -11,48 +11,48 @@ const convertJsonToHtml = async (jsonData) => {
             (rootData.style?.padding?.left || 0) -
             (rootData.style?.padding?.right || 0)));
     }
-    const rawHtml = `
-  <!DOCTYPE html>
-  <html lang="en">
-    <head>
-      <meta charset="UTF-8" />
-      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-      <title>Email Layout</title>
-      <style>
-        .responsive-table {
-          width: 100%;
-          max-width: 600px;
-        }
-        @media only screen and (max-width: 600px) {
-          .stack-column {
-            display: block !important;
-            width: 100% !important;
-            max-width: 100% !important;
-          }
-        }
-      </style>
-    </head>
-    <body>
-      <center>
-        <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.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" />
+      <title>Email Layout</title>
+      <style>
+        .responsive-table {
+          width: 100%;
+          max-width: 600px;
+        }
+        @media only screen and (max-width: 600px) {
+          .stack-column {
+            display: block !important;
+            width: 100% !important;
+            max-width: 100% !important;
+          }
+        }
+      </style>
+    </head>
+    <body>
+      <center>
+        <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.join("")}
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </center>
+    </body>
   </html>`;
     return rawHtml;
 };

package/dist/utils/jsonToHTML.js CHANGED Viewed

@@ -4,7 +4,7 @@ exports.tableCommonStyle = void 0;
 exports.convertToHtml = convertToHtml;
 const jimp_1 = require("jimp");
 const types_1 = require("../types");
-const addPxToAttributes = ["fontSize", "lineHeight"];
+const addPxToAttributes = ["fontSize", "lineHeight", "borderRadius", "borderWidth"];
 const addPxOrPerToAttributes = ["width", "height"];
 const allPxAttributes = [...addPxToAttributes, ...addPxOrPerToAttributes];
 exports.tableCommonStyle = "border-collapse:collapse; table-layout:fixed;";
@@ -71,15 +71,28 @@ async function convertToHtml(blockData, rootData, cellWidthInPx) {
     }
 }
 function appendOutlookSupport(content, contentStyle) {
-    return `
-  <table width="100%" style="${exports.tableCommonStyle}"><tr><td style="${contentStyle}">${content}</td></tr></table>
+    return `
+  <table width="100%" style="${exports.tableCommonStyle}"><tr><td style="${contentStyle}">${content}</td></tr></table>
   `;
 }
+// function convertDividerBlockToHtml(blockData: IBlockData) {
+//   const { style } = blockData.data;
+//   const { thickness, dividerColor, ...rest } = style;
+//   const convertedStyle = buildStyles(rest, {perChanges: [], pxChanges: allPxAttributes});
+//   return appendOutlookSupport(`<hr style="height:${thickness}px; background-color: ${dividerColor};" />`, convertedStyle);
+// }
 function convertDividerBlockToHtml(blockData) {
     const { style } = blockData.data;
     const { thickness, dividerColor, ...rest } = style;
     const convertedStyle = buildStyles(rest, { perChanges: [], pxChanges: allPxAttributes });
-    return appendOutlookSupport(`<hr style="height:${thickness}px; background-color: ${dividerColor};" />`, convertedStyle);
+    const dividerContent = `
+    <table width="100%" cellpadding="0" cellspacing="0">
+      <tr>
+        <td height="${thickness}" style="font-size:1px; line-height:1px; background:${dividerColor};">&nbsp;</td>
+      </tr>
+    </table>
+  `;
+    return appendOutlookSupport(dividerContent, convertedStyle);
 }
 function convertSpacerBlockToHtml(blockData) {
     const { style } = blockData.data;
@@ -113,22 +126,22 @@ 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 convertImageBlock(blockData, cellWidthInPx) {
@@ -147,18 +160,18 @@ async function convertImageBlock(blockData, cellWidthInPx) {
 }
 function appendOutlookForButton(content, buttonStyle, navigateToUrl, text) {
     const { width, buttonColor, borderColor, borderRadius, borderWidth, height, buttonPadding, color, fontFamily, fontSize, fontWeight } = buttonStyle;
-    return `
-  <!--[if mso]>
-    <v:${borderRadius ? "roundrect" : "rect"} xmlns:v="urn:schemas-microsoft-com:vml" href="${navigateToUrl}" xmlns:w="urn:schemas-microsoft-com:office:word" style="height:${height || 44}px;width:${width || 200}px;v-text-anchor:middle;" arcsize="${borderRadius || 0}px" strokeweight="${borderWidth || 0}px" strokecolor="${borderColor || "transparent"}" fillcolor="${buttonColor || "none"}">
-    <w:anchorlock/>
-    <v:textbox inset="${buttonPadding?.top || 0}px, ${buttonPadding?.left || 0}px, ${buttonPadding?.bottom || 0}px, ${buttonPadding?.right || 0}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}" xmlns:w="urn:schemas-microsoft-com:office:word" style="height:${height || 44}px;width:${width || 200}px;v-text-anchor:middle;" arcsize="${borderRadius || 0}px" strokeweight="${borderWidth || 0}px" strokecolor="${borderColor || "transparent"}" fillcolor="${buttonColor || "none"}">
+    <w:anchorlock/>
+    <v:textbox inset="${buttonPadding?.top || 0}px, ${buttonPadding?.left || 0}px, ${buttonPadding?.bottom || 0}px, ${buttonPadding?.right || 0}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) {
@@ -205,12 +218,12 @@ async function convertGridBlock(blockData, rootData, cellWidthInPx) {
     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>
-        <tr>${gridItems.join("")}</tr>
-      </tbody>
-    </table>
+    return `
+    <table cellspacing="${columnGap}" style="width:100%; max-width:100%; ${styles}">
+      <tbody>
+        <tr>${gridItems.join("")}</tr>
+      </tbody>
+    </table>
   `;
 }
 async function convertGridCellBlock(blockData, rootData, cellWidth, parentCellWidth) {

package/package.json CHANGED Viewed

@@ -1,33 +1,33 @@
-{
-  "name": "email-builder-utils",
-  "version": "1.1.2",
-  "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.5",
+  "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"
+  }
+}