email-builder-utils 1.1.19 → 1.1.21

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;
@@ -171,6 +196,9 @@ async function convertImageBlock(blockData, cellWidthInPx) {
         borderRadius: borderRadius,
         borderColor,
     };
+    const image = await jimp_1.Jimp.read(imageUrl);
+    const originalWidth = image.bitmap.width;
+    const originalHeight = image.bitmap.height;
     // Add border styles to container for fallback clients
     const containerStyles = buildStyles({
         ...containerStyle,
@@ -179,7 +207,7 @@ async function convertImageBlock(blockData, cellWidthInPx) {
         perChanges: addPxOrPerToAttributes,
         pxChanges: addPxToAttributes,
     });
-    const imageElement = `<img src="${imageUrl}" alt="${altText}" style="${imageTagStyles}" />`;
+    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) /
         100) *
         (cellWidthInPx -
@@ -237,7 +265,7 @@ function convertButtonBlock(blockData) {
         perChanges: [],
         pxChanges: allPxAttributes,
     });
-    const convertedStyles = buildStyles(rest, {
+    const convertedStyles = buildStyles({ maxWidth: "100%", boxSizing: "border-box", ...rest }, {
         perChanges: [],
         pxChanges: allPxAttributes,
     });

package/package.json

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