email-builder-utils 1.1.15 → 1.1.20

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,oBA+EpD,CAAC"}
+{"version":3,"file":"convertJsonToHtml.d.ts","sourceRoot":"","sources":["../../src/utils/convertJsonToHtml.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB,GAAU,UAAU,GAAG,oBAgFpD,CAAC"}

package/dist/utils/convertJsonToHtml.js

@@ -40,6 +40,7 @@ const convertJsonToHtml = async (jsonData) => {
       <center>
         <table
           class="responsive-table"
+          bgcolor="${canvasColor}"
           style="
             font-family: ${fontFamily};
             margin: 0 auto;

package/dist/utils/jsonToHTML.d.ts

@@ -7,6 +7,7 @@ interface BlockJsonProps {
     text: string;
     altText: string;
     imageUrl: string;
+    responsive?: 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;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;AAYD,eAAO,MAAM,gBAAgB,kDAAkD,CAAC;AA2DhF,wBAAsB,aAAa,CACjC,SAAS,EAAE,UAAU,EACrB,QAAQ,EAAE,GAAG,EACb,aAAa,EAAE,MAAM,mBAkBtB"}
+{"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;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;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,mBAkBtB"}

package/dist/utils/jsonToHTML.js

@@ -111,15 +111,40 @@ function convertSpacerBlockToHtml(blockData) {
     });
     return appendOutlookSupport(``, styles);
 }
+// function convertTextBlock(blockData: IBlockData) {
+//   const { style, props } = blockData.data;
+//   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}" rel="noreferrer noopener" style="color:inherit; text-decoration:none; cursor:pointer;">${textContent}</a>`
+//     : textContent;
+// }
 function convertTextBlock(blockData) {
     const { style, props } = blockData.data;
-    const styles = buildStyles(style, {
+    const { width, backgroundColor, padding, borderRadius, borderStyle, borderColor, borderWidth, textContainerBackgroundColor, textContainerPadding, ...rest } = style;
+    const textBoxStyle = { width, backgroundColor, padding, borderRadius, borderStyle, borderColor, borderWidth };
+    const convertedTextStyle = buildStyles(textBoxStyle, {
+        perChanges: [],
+        pxChanges: allPxAttributes,
+    });
+    const styles = buildStyles({ padding: textContainerPadding, backgroundColor: textContainerBackgroundColor, ...rest }, {
         perChanges: [],
         pxChanges: allPxAttributes,
     });
-    const text = props.text || "";
+    const sanitizedText = (props.text ?? "")
+        .replaceAll(/<p>/g, "<div>")
+        .replaceAll(/<\/p>/g, "</div>");
     const navigateToUrl = props.navigateToUrl || "";
-    const textContent = appendOutlookSupport(text.replaceAll(/\n/g, "<br>"), styles);
+    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);
     return navigateToUrl
         ? `<a href="${navigateToUrl}" rel="noreferrer noopener" style="color:inherit; text-decoration:none; cursor:pointer;">${textContent}</a>`
         : textContent;
@@ -237,7 +262,7 @@ function convertButtonBlock(blockData) {
         perChanges: [],
         pxChanges: allPxAttributes,
     });
-    const convertedStyles = buildStyles(rest, {
+    const convertedStyles = buildStyles({ maxWidth: "100%", boxSizing: "border-box", ...rest }, {
         perChanges: [],
         pxChanges: allPxAttributes,
     });
@@ -247,7 +272,7 @@ function convertButtonBlock(blockData) {
 }
 async function convertGridBlock(blockData, rootData, cellWidthInPx) {
     const { style = {}, childrenIds = [], props } = blockData.data;
-    const { columns = 1, cellWidths = [] } = props;
+    const { columns = 1, cellWidths = [], responsive = true } = props;
     const { columnGap = 0, ...restStyle } = style;
     const tableStyles = buildStyles(restStyle, {
         perChanges: [],
@@ -271,20 +296,18 @@ async function convertGridBlock(blockData, rootData, cellWidthInPx) {
                 const child = rootData[childId];
                 const { style: cellStyle = {} } = child.data || {};
                 const verticalAlign = cellStyle.verticalAlign || "top";
-                const childHtml = child
-                    ? await convertGridCellBlock(child, rootData, widthPercent, cellWidthInPx)
-                    : "";
+                const { html: childHtml, styles } = await convertGridCellBlock(child, rootData, widthPercent, cellWidthInPx);
                 html += `
-          <td
-            width="${widthPercent}%"
-            class="stack-column"
-            style="vertical-align:${verticalAlign}; padding:0; word-break:break-word;"
-          >
-            ${childHtml}
-          </td>`;
+   <td
+    width="${widthPercent}%"
+    ${responsive ? 'class="stack-column"' : ""}
+    style="vertical-align:${verticalAlign}; padding:0; word-break:break-word; ${styles}"
+  >
+    ${childHtml}
+  </td>`;
             }
             else {
-                html += `<td width="${widthPercent}%" class="stack-column" style="padding:0;"></td>`;
+                html += `<td width="${widthPercent}%" ${responsive ? 'class="stack-column"' : ""} style="padding:0;"></td>`;
             }
         }
         html += "</tr>";
@@ -306,20 +329,8 @@ async function convertGridCellBlock(blockData, rootData, cellWidthPercent, paren
             innerHtmlParts.push(await convertToHtml(child, rootData, cellWidthPx));
         }
     }
-    const innerContent = innerHtmlParts.join("");
-    return `
-    <table
-      role="presentation"
-      border="0"
-      cellpadding="0"
-      cellspacing="0"
-      width="100%"
-      style="border-collapse:collapse;table-layout:fixed;${styles}"
-    >
-      <tr>
-        <td style="padding:0;">
-          ${innerContent}
-        </td>
-      </tr>
-    </table>`;
+    return {
+        html: innerHtmlParts.join(""),
+        styles,
+    };
 }

package/package.json

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