email-builder-utils 1.1.27 → 1.1.28

package/dist/types/Template.d.ts

@@ -9,7 +9,8 @@ export declare enum BlockType {
     DIVIDER = "Divider",
     EMAILLAYOUT = "EmailLayout",
     VIDEO = "Video",
-    SHAPE = "Shape"
+    SHAPE = "Shape",
+    VDivider = "VDivider"
 }
 export declare enum visibility {
     PUBLIC = "PUBLIC",

package/dist/types/Template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Template.d.ts","sourceRoot":"","sources":["../../src/types/Template.ts"],"names":[],"mappings":"AAAA,oBAAY,SAAS;IACnB,IAAI,SAAS;IACb,KAAK,UAAU;IACf,MAAM,WAAW;IACjB,IAAI,YAAY;IAChB,KAAK,UAAU;IACf,QAAQ,WAAW;IACnB,MAAM,WAAW;IACjB,OAAO,YAAY;IACnB,WAAW,gBAAgB;IAC3B,KAAK,UAAU;IACf,KAAK,UAAU;CAChB;AAED,oBAAY,UAAU;IACpB,MAAM,WAAW;IACjB,OAAO,YAAY;IACnB,WAAW,gBAAgB;CAC5B;AAED,UAAU,MAAM;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,MAAM;IACd,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAED,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,SAAS,CAAC;IAChB,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;QACd,WAAW,EAAE,MAAM,EAAE,CAAC;KACvB,CAAC;CACH"}
+{"version":3,"file":"Template.d.ts","sourceRoot":"","sources":["../../src/types/Template.ts"],"names":[],"mappings":"AAAA,oBAAY,SAAS;IACnB,IAAI,SAAS;IACb,KAAK,UAAU;IACf,MAAM,WAAW;IACjB,IAAI,YAAY;IAChB,KAAK,UAAU;IACf,QAAQ,WAAW;IACnB,MAAM,WAAW;IACjB,OAAO,YAAY;IACnB,WAAW,gBAAgB;IAC3B,KAAK,UAAU;IACf,KAAK,UAAU;IACf,QAAQ,aAAa;CACtB;AAED,oBAAY,UAAU;IACpB,MAAM,WAAW;IACjB,OAAO,YAAY;IACnB,WAAW,gBAAgB;CAC5B;AAED,UAAU,MAAM;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,MAAM;IACd,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAED,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,SAAS,CAAC;IAChB,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;QACd,WAAW,EAAE,MAAM,EAAE,CAAC;KACvB,CAAC;CACH"}

package/dist/types/Template.js

@@ -14,6 +14,7 @@ var BlockType;
     BlockType["EMAILLAYOUT"] = "EmailLayout";
     BlockType["VIDEO"] = "Video";
     BlockType["SHAPE"] = "Shape";
+    BlockType["VDivider"] = "VDivider";
 })(BlockType || (exports.BlockType = BlockType = {}));
 var visibility;
 (function (visibility) {

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;AAUrC,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;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;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;AAOD,eAAO,MAAM,gBAAgB,kDAAkD,CAAC;AAiDhF,wBAAsB,aAAa,CAAC,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,aAAa,EAAE,MAAM,mBAqB9F;AAsVD,wBAAsB,iBAAiB,CAAC,SAAS,EAAE,GAAG,EAAE,aAAa,EAAE,MAAM,mBAoK5E"}
+{"version":3,"file":"jsonToHTML.d.ts","sourceRoot":"","sources":["../../src/utils/jsonToHTML.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAUrC,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;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;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,mBAwBtB;AAobD,wBAAsB,iBAAiB,CAAC,SAAS,EAAE,GAAG,EAAE,aAAa,EAAE,MAAM,mBA8K5E"}

package/dist/utils/jsonToHTML.js

@@ -6,7 +6,12 @@ exports.convertVideoBlock = convertVideoBlock;
 const jimp_1 = require("jimp");
 const types_1 = require("../types");
 const common_1 = require("./common");
-const addPxToAttributes = ["fontSize", "lineHeight", "borderRadius", "borderWidth"];
+const addPxToAttributes = [
+    "fontSize",
+    "lineHeight",
+    "borderRadius",
+    "borderWidth",
+];
 const addPxOrPerToAttributes = ["width", "height"];
 const allPxAttributes = [...addPxToAttributes, ...addPxOrPerToAttributes];
 exports.tableCommonStyle = "border-collapse:collapse; table-layout:fixed;";
@@ -37,7 +42,8 @@ function buildStyles(style, { pxChanges, perChanges }) {
             return;
         if (value === undefined || value === null || value === "")
             return;
-        if ((key === "padding" || key === "buttonPadding") && typeof value === "object") {
+        if ((key === "padding" || key === "buttonPadding") &&
+            typeof value === "object") {
             const padding = value;
             value = `${padding.top}px ${padding.right}px ${padding.bottom}px ${padding.left}px`;
         }
@@ -72,6 +78,8 @@ async function convertToHtml(blockData, rootData, cellWidthInPx) {
             return convertVideoBlock(blockData, cellWidthInPx);
         case types_1.BlockType.SHAPE:
             return await convertShapeBlock(blockData);
+        case types_1.BlockType.VDivider:
+            return convertVerticalDividerBlockToHtml(blockData);
         default:
             return "";
     }
@@ -124,20 +132,36 @@ function convertSpacerBlockToHtml(blockData) {
 function convertTextBlock(blockData) {
     const { style, props } = blockData.data;
     const { width, backgroundColor, padding, borderRadius, borderStyle, borderColor, borderWidth, textContainerBackgroundColor, textContainerPadding, ...rest } = style;
-    const textBoxStyle = { width, backgroundColor, padding, borderRadius, borderStyle, borderColor, borderWidth };
+    const textBoxStyle = {
+        width,
+        backgroundColor,
+        padding,
+        borderRadius,
+        borderStyle,
+        borderColor,
+        borderWidth,
+    };
     const convertedTextStyle = buildStyles(textBoxStyle, {
         perChanges: [],
         pxChanges: allPxAttributes,
     });
-    const styles = buildStyles({ padding: textContainerPadding, backgroundColor: textContainerBackgroundColor, ...rest }, {
+    const styles = buildStyles({
+        padding: textContainerPadding,
+        backgroundColor: textContainerBackgroundColor,
+        ...rest,
+    }, {
         perChanges: [],
         pxChanges: allPxAttributes,
     });
-    const sanitizedText = (props.text ?? "").replaceAll(/<p>/g, "<div>").replaceAll(/<\/p>/g, "</div>");
+    const sanitizedText = (props.text ?? "")
+        .replaceAll(/<p>/g, "<div>")
+        .replaceAll(/<\/p>/g, "</div>");
     const navigateToUrl = props.navigateToUrl || "";
     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;
+    return navigateToUrl
+        ? `<a href="${navigateToUrl}" rel="noreferrer noopener" style="color:inherit; text-decoration:none; cursor:pointer;">${textContent}</a>`
+        : textContent;
 }
 async function appendOutlookForImage(content, outerContainerWidth, innerContainerWidth, imageUrl, style = {}) {
     const image = await jimp_1.Jimp.read(imageUrl);
@@ -150,8 +174,12 @@ async function appendOutlookForImage(content, outerContainerWidth, innerContaine
     const borderColor = style?.borderColor || "transparent";
     const borderRadius = parseInt(style?.borderRadius) || 0;
     const useRoundRect = borderRadius > 0;
-    const arcsize = useRoundRect ? Math.min(borderRadius / scaledHeight, 1).toFixed(2) : "";
-    const borderAttributes = borderWidth > 0 ? `strokeweight="${borderWidth}px" strokecolor="${borderColor}"` : `stroked="false"`;
+    const arcsize = useRoundRect
+        ? Math.min(borderRadius / scaledHeight, 1).toFixed(2)
+        : "";
+    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;"
@@ -196,7 +224,11 @@ async function convertImageBlock(blockData, cellWidthInPx) {
         pxChanges: addPxToAttributes,
     });
     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 - (style?.padding?.left || 0) - (style?.padding?.right || 0));
+    const innerContainerWidth = ((typeof width === "string" ? parseInt(width.replace("%", "")) : width) /
+        100) *
+        (cellWidthInPx -
+            (style?.padding?.left || 0) -
+            (style?.padding?.right || 0));
     const outlookImage = await appendOutlookForImage(imageElement, cellWidthInPx, innerContainerWidth, imageUrl, style);
     const imageContent = appendOutlookSupport(outlookImage, containerStyles);
     return navigateToUrl
@@ -205,7 +237,9 @@ async function convertImageBlock(blockData, cellWidthInPx) {
 }
 function appendOutlookForButton(content, buttonStyle, navigateToUrl, text) {
     const { width = 200, height = 44, borderRadius = 0, borderColor = "transparent", borderWidth = 0, buttonColor = "none", buttonPadding = { top: 0, bottom: 0, left: 0, right: 0 }, color = "#000000", fontFamily = "Arial, sans-serif", fontSize = 16, fontWeight = 400, } = buttonStyle;
-    const borderAttributes = borderWidth > 0 ? `strokeweight="${borderWidth}px" strokecolor="${borderColor}"` : `stroked="false"`;
+    const borderAttributes = borderWidth > 0
+        ? `strokeweight="${borderWidth}px" strokecolor="${borderColor}"`
+        : `stroked="false"`;
     return `
 <!--[if mso]>
 <v:${borderRadius ? "roundrect" : "rect"} xmlns:v="urn:schemas-microsoft-com:vml" href="${navigateToUrl}"
@@ -387,7 +421,9 @@ async function convertVideoBlock(blockData, cellWidthInPx) {
     <v:rect fill="t"  style="position:absolute;width:${innerContainerWidth}px;height:${calculatedHeight}px; stroked="t"
     strokeweight="${borderWidth}px"
     strokecolor="${borderColor}"
-    ${borderRadius > 0 ? `arcsize="${Math.min(borderRadius / calculatedHeight, 1).toFixed(2)}"` : ""}
+    ${borderRadius > 0
+        ? `arcsize="${Math.min(borderRadius / calculatedHeight, 1).toFixed(2)}"`
+        : ""}
     >
       <v:fill src="${resolvedThumbnail}" type="frame" color="${style?.backgroundColor || "#FFFFFF"}"/>
     </v:rect>
@@ -613,9 +649,7 @@ function buildVMLShape({ shape, widthPx, heightPx, imageUrl, backgroundColor, bo
     // --- Basic setup ---
     const bw = borderWidth || 0;
     const bc = borderColor || "transparent";
-    const borderAttrs = bw > 0
-        ? `strokeweight="${bw}px" strokecolor="${bc}"`
-        : `stroked="false"`;
+    const borderAttrs = bw > 0 ? `strokeweight="${bw}px" strokecolor="${bc}"` : `stroked="false"`;
     const fillColor = backgroundColor || "#2F80ED";
     const fillMarkup = `<v:fill ${imageUrl ? `src="${imageUrl}" type="frame" aspect="atleast"` : ""} color="${fillColor}" />`;
     // --- Shape tag ---
@@ -689,3 +723,28 @@ async function appendOutlookForShape(content, outerContainerWidth, innerContaine
   </table>
   <![endif]-->`;
 }
+function convertVerticalDividerBlockToHtml(blockData) {
+    const { style } = blockData.data;
+    const { width, height, dividerColor, ...rest } = style;
+    // Convert other styles to inline-safe HTML attributes
+    const convertedStyle = buildStyles(rest, {
+        perChanges: [],
+        pxChanges: allPxAttributes,
+    });
+    // Outlook-safe vertical divider
+    const dividerContent = `
+    <table cellpadding="0" cellspacing="0" border="0" align="center" style="width:auto; ${convertedStyle}">
+      <tr>
+        <td style="vertical-align: middle; text-align: center;">
+          <!--[if mso | IE]>
+          <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fillcolor="${dividerColor}" style="width:${width}px;height:${height}px;" stroke="f"></v:rect>
+          <![endif]-->
+          <!--[if !mso]><!-- -->
+          <div style="display:inline-block;width:${width}px;height:${height}px;background:${dividerColor};line-height:0;font-size:0;">&nbsp;</div>
+          <!--<![endif]-->
+        </td>
+      </tr>
+    </table>
+  `;
+    return appendOutlookSupport(dividerContent, convertedStyle);
+}

package/package.json

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