email-builder-utils 1.1.22 → 1.1.23

package/dist/types/Template.d.ts

@@ -26,6 +26,10 @@ interface IProps {
     altText: string;
     cellWidths: number[];
     responsive?: boolean;
+    videoUrl?: string;
+    youtubeVideoUrl?: string;
+    thumbnailUrl?: string;
+    shape?: string;
 }
 interface IStyle {
     [key: string]: any;

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;CACtB;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;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"}

package/dist/utils/jsonToHTML.d.ts

@@ -8,6 +8,10 @@ interface BlockJsonProps {
     altText: string;
     imageUrl: string;
     responsive?: boolean;
+    videoUrl?: string;
+    youtubeVideoUrl?: string;
+    thumbnailUrl?: string;
+    shape?: string;
 }
 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;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;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,mBAsBtB;AA2ZD,wBAAsB,iBAAiB,CAAC,SAAS,EAAE,GAAG,EAAE,aAAa,EAAE,MAAM,mBA0I5E;AA0JD,wBAAsB,iBAAiB,CAAC,SAAS,EAAE,UAAU,mBAgJ5D"}
+{"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;AA2UD,wBAAsB,iBAAiB,CAAC,SAAS,EAAE,GAAG,EAAE,aAAa,EAAE,MAAM,mBAmI5E;AAqJD,wBAAsB,iBAAiB,CAAC,SAAS,EAAE,UAAU,mBAuI5D"}

package/dist/utils/jsonToHTML.js

@@ -7,12 +7,7 @@ exports.convertShapeBlock = convertShapeBlock;
 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;";
@@ -43,8 +38,7 @@ 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`;
         }
@@ -140,15 +134,11 @@ function convertTextBlock(blockData) {
         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);
@@ -161,12 +151,8 @@ 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;"
@@ -209,11 +195,7 @@ 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
@@ -222,9 +204,7 @@ 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}"
@@ -371,10 +351,7 @@ async function convertVideoBlock(blockData, cellWidthInPx) {
     else {
         percentWidth = "100%";
     }
-    const innerContainerWidth = (parseFloat(percentWidth) / 100) *
-        (cellWidthInPx -
-            (style?.padding?.left || 0) -
-            (style?.padding?.right || 0));
+    const innerContainerWidth = (parseFloat(percentWidth) / 100) * (cellWidthInPx - (style?.padding?.left || 0) - (style?.padding?.right || 0));
     const aspectRatio = 16 / 9;
     const calculatedHeight = innerContainerWidth / aspectRatio;
     const outerContainerStyles = buildStyles({
@@ -497,8 +474,7 @@ async function appendOutlookForShape(content, outerContainerWidth, innerContaine
         // pass raw flag so buildVMLShape knows if image already has text baked-in
         msoHasBakedText: Boolean(opts.msoBakeImageWithText),
     });
-    const outlookAlignment = opts.alignment === "center" ? "center" :
-        opts.alignment === "right" ? "right" : "left";
+    const outlookAlignment = opts.alignment === "center" ? "center" : opts.alignment === "right" ? "right" : "left";
     // Wrap the VML inside a table so Outlook aligns it correctly
     return `<!--[if mso]>
   <table align="${outlookAlignment}" border="0" cellpadding="0" cellspacing="0" style="display:inline-block;">
@@ -527,9 +503,7 @@ function buildVMLShape({ shape, widthPx, heightPx, imageUrl, backgroundColor, bo
         extraAttr = ` arcsize="${computeArcSize(borderRadius, widthPx)}"`;
     }
     // image fill (if provided)
-    const fillMarkup = imageUrl
-        ? `<v:fill src="${imageUrl}" type="frame" aspect="atleast" />`
-        : "";
+    const fillMarkup = imageUrl ? `<v:fill src="${imageUrl}" type="frame" aspect="atleast" />` : "";
     // If MSO is given a baked image with text, don't produce a v:textbox overlay text (image already contains text)
     const includeTextbox = !!text && !msoHasBakedText;
     // v:textbox: use a table + cell to center the text; avoids many Word quirks
@@ -561,7 +535,7 @@ function buildVMLShape({ shape, widthPx, heightPx, imageUrl, backgroundColor, bo
 async function convertShapeBlock(blockData) {
     const { style, props } = blockData.data;
     const { shape, text, textColor = "#000000", imageUrl } = props || {};
-    const { width = "100", height = "150", padding = {}, backgroundColor = "#2F80ED", borderRadius, borderWidth = 0, borderStyle = "solid", borderColor = "transparent", customCss, shapeColor, alignment = "left", msoBakeImageWithText } = style || {};
+    const { width = "100", height = "150", padding = {}, backgroundColor = "#2F80ED", borderRadius, borderWidth = 0, borderStyle = "solid", borderColor = "transparent", customCss, shapeColor, alignment = "left", msoBakeImageWithText, } = style || {};
     const borderRadiusMap = {
         rectangle: "0",
         rounded: "10px",
@@ -569,12 +543,8 @@ async function convertShapeBlock(blockData) {
         oval: "50%",
     };
     let resolvedBorderRadius = borderRadius || borderRadiusMap[shape] || "0";
-    let resolvedWidthPx = typeof width === "number"
-        ? width
-        : parseInt(width.toString().replace("px", ""), 10) || 100;
-    let resolvedHeightPx = typeof height === "number"
-        ? height
-        : parseInt(height.toString().replace("px", ""), 10) || 150;
+    let resolvedWidthPx = typeof width === "number" ? width : parseInt(width.toString().replace("px", ""), 10) || 100;
+    let resolvedHeightPx = typeof height === "number" ? height : parseInt(height.toString().replace("px", ""), 10) || 150;
     // Force circle → square
     if (shape === "circle") {
         const side = Math.min(resolvedWidthPx, resolvedHeightPx);
@@ -649,7 +619,7 @@ async function convertShapeBlock(blockData) {
         textColor,
         alignment,
         padding,
-        msoBakeImageWithText
+        msoBakeImageWithText,
     });
     // Wrap in container table
     const containerTable = `

package/package.json

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