email-builder-utils 1.1.26 → 1.1.27

package/dist/utils/jsonToHTML.js

@@ -173,6 +173,9 @@ async function convertImageBlock(blockData, cellWidthInPx) {
     const { style, props } = blockData.data;
     const { altText, imageUrl, navigateToUrl } = props;
     const { width, height, objectFit, borderRadius, borderWidth, borderColor, borderStyle, ...containerStyle } = style;
+    const image = await jimp_1.Jimp.read(imageUrl);
+    const originalWidth = image.bitmap.width;
+    const originalHeight = image.bitmap.height;
     // Ensure border styles are applied only to the container, not the image
     const imageStyle = {
         width,
@@ -181,10 +184,9 @@ async function convertImageBlock(blockData, cellWidthInPx) {
         borderStyle,
         borderRadius: borderRadius,
         borderColor,
+        maxWidth: `${originalWidth}px`, // Limit to original size
+        maxHeight: `${originalHeight}px`,
     };
-    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,
@@ -483,92 +485,16 @@ function computeArcSize(borderRadius, widthPx) {
     const px = parseFloat(s.replace("px", "")) || 0;
     return Math.min(px / widthPx, 1).toFixed(2);
 }
-// ---------- Outlook (MSO) wrapper ----------
-async function appendOutlookForShape(content, outerContainerWidth, innerContainerWidth, opts) {
-    // Use the inner container width for VML sizing (exact user dims)
-    const widthPx = Math.round(Math.min(outerContainerWidth, innerContainerWidth));
-    const heightPx = Math.max(1, Math.round(opts.heightPx));
-    const vml = buildVMLShape({
-        shape: opts.shape,
-        widthPx,
-        heightPx,
-        imageUrl: opts.msoBakeImageWithText || opts.imageUrl,
-        backgroundColor: opts.shapeColor || opts.backgroundColor,
-        borderWidth: opts.borderWidth,
-        borderColor: opts.borderColor,
-        borderRadius: opts.borderRadius,
-        text: opts.text,
-        textColor: opts.textColor,
-        // 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";
-    // 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;">
-    <tr>
-      <td style="padding:${opts.padding?.top || 0}px ${opts.padding?.right || 0}px ${opts.padding?.bottom || 0}px ${opts.padding?.left || 0}px;">
-        ${vml}
-      </td>
-    </tr>
-  </table>
-  <![endif]-->`;
-}
-// ---------- VML builder (produces shape + text inside it for MSO) ----------
-function buildVMLShape({ shape, widthPx, heightPx, imageUrl, backgroundColor, borderWidth, borderColor, borderRadius, text, textColor, msoHasBakedText = false, }) {
-    const bw = borderWidth || 0;
-    const bc = borderColor || "transparent";
-    const hasBorder = bw > 0;
-    const borderAttributes = hasBorder ? `strokeweight="${bw}px" strokecolor="${bc}"` : `stroked="false"`;
-    const fillColor = backgroundColor || "#2F80ED";
-    // choose tag and extra attributes
-    let tag = "rect";
-    let extraAttr = "";
-    if (shape === "circle" || shape === "oval")
-        tag = "oval";
-    if (shape === "rounded" || (borderRadius && borderRadius !== "0")) {
-        tag = "roundrect";
-        extraAttr = ` arcsize="${computeArcSize(borderRadius, widthPx)}"`;
-    }
-    // image fill (if provided)
-    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
-    const textboxInner = includeTextbox
-        ? `<v:textbox inset="0,0,0,0">
-         <center style="width:${widthPx}px;height:${heightPx}px;display:block;">
-           <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="${widthPx}" height="${heightPx}" style="border-collapse:collapse;">
-             <tr>
-               <td align="center" valign="middle" style="font-family:Arial, sans-serif;font-size:14px;line-height:1;color:${textColor || "#000"};padding:6px;">
-                 ${text}
-               </td>
-             </tr>
-           </table>
-         </center>
-       </v:textbox>`
-        : // keep an empty textbox so shape sizing behaves consistently when no text
-            `<v:textbox inset="0,0,0,0"><div style="display:none;">.</div></v:textbox>`;
-    // If there is no imageUrl and no textbox content, use fillcolor for background
-    const fillAttr = imageUrl ? 'fill="true"' : `fill="true" fillcolor="${fillColor}"`;
-    return `
-  <v:${tag} xmlns:v="urn:schemas-microsoft-com:vml"
-    style="width:${widthPx}px;height:${heightPx}px;v-text-anchor:middle;"
-    ${borderAttributes} ${fillAttr}${extraAttr}>
-    ${fillMarkup}
-    ${textboxInner}
-  </v:${tag}>`;
-}
-// ---------- convertShapeBlock (updated, keeps your structure) ----------
+// ---------- Updated convertShapeBlock function ----------
 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 { shape, text, imageUrl } = props;
+    const { width = "100", height = "150", padding = {}, backgroundColor = "#2F80ED", borderRadius, borderWidth = 0, borderStyle = "solid", borderColor = "transparent", customCss, shapeColor, alignment = "left", msoBakeImageWithText, color = "#000000", fontSize = 14, verticalAlign = "center", } = style || {};
     const borderRadiusMap = {
         rectangle: "0",
         rounded: "10px",
         circle: "50%",
-        oval: "50%", // Keep this for modern browsers
+        oval: "50%",
     };
     let resolvedBorderRadius = borderRadius || borderRadiusMap[shape] || "0";
     let resolvedWidthPx = typeof width === "number"
@@ -577,73 +503,80 @@ async function convertShapeBlock(blockData) {
     let resolvedHeightPx = typeof height === "number"
         ? height
         : parseInt(height.toString().replace("px", ""), 10) || 150;
-    // Special handling for different shapes
+    // --- Shape specific constraints ---
     if (shape === "circle") {
-        // Circle: make it a perfect square with 50% border radius
         const side = Math.min(resolvedWidthPx, resolvedHeightPx);
         resolvedWidthPx = side;
         resolvedHeightPx = side;
         resolvedBorderRadius = "50%";
     }
     else if (shape === "oval") {
+        resolvedBorderRadius = "50% / 50%";
     }
-    const finalWidthPx = resolvedWidthPx;
-    const finalHeightPx = resolvedHeightPx;
+    const finalBackgroundColor = shapeColor || backgroundColor;
     const alignmentStyles = {
         left: "margin-right:auto;margin-left:0;",
         center: "margin-left:auto;margin-right:auto;",
         right: "margin-left:auto;margin-right:0;",
     };
     const alignmentStyle = alignmentStyles[alignment] || "";
-    const finalBackgroundColor = shapeColor || backgroundColor;
-    // --- Modern clients content ---
+    const verticalAlignStyles = {
+        top: "align-items:flex-start;padding-top:8px;",
+        center: "align-items:center;",
+        bottom: "align-items:flex-end;padding-bottom:8px;",
+    };
+    const verticalAlignStyle = verticalAlignStyles[verticalAlign] ||
+        verticalAlignStyles.center;
+    // Text styling (safe across clients)
+    const textSizeStyle = `font-size:${fontSize}px;line-height:1.3;word-break:break-word;overflow-wrap:break-word;text-align:center;color:${color};`;
+    // ============================
+    // Modern HTML (non-MSO)
+    // ============================
     let nonMsoContent = "";
-    // For modern browsers, use CSS border-radius
-    const modernBorderRadius = shape === "oval" ? "50%" : resolvedBorderRadius;
-    // Case 1: Image + Text → use background-image
     if (imageUrl && text) {
         nonMsoContent = `
-<div style="display:inline-block;width:${finalWidthPx}px;height:${finalHeightPx}px;
+<div style="display:inline-block;width:${resolvedWidthPx}px;height:${resolvedHeightPx}px;
   border:${borderWidth}px ${borderStyle} ${borderColor};
-  border-radius:${modernBorderRadius};
+  border-radius:${resolvedBorderRadius};
   background:${finalBackgroundColor} url('${imageUrl}') center/cover no-repeat;
   overflow:hidden;${alignmentStyle}${customCss || ""}">
-  <div style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;">
-    <div style="color:${textColor};text-align:center;padding:8px;box-sizing:border-box;word-break:break-word;
-      border-radius:4px;max-width:90%;">
+  <div style="width:100%;height:100%;display:flex;${verticalAlignStyle}justify-content:center;overflow:hidden;">
+    <div style="${textSizeStyle}padding:6px;max-width:90%;-webkit-line-clamp:3;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden;">
       ${text}
     </div>
   </div>
 </div>`;
     }
-    // Case 2: Image only → use <img>
     else if (imageUrl) {
         nonMsoContent = `
-<div style="display:inline-block;width:${finalWidthPx}px;height:${finalHeightPx}px;
+<div style="display:inline-block;width:${resolvedWidthPx}px;height:${resolvedHeightPx}px;
   border:${borderWidth}px ${borderStyle} ${borderColor};
-  border-radius:${modernBorderRadius};
+  border-radius:${resolvedBorderRadius};
   overflow:hidden;${alignmentStyle}${customCss || ""}">
-  <img src="${imageUrl}" alt="${text || "Shape image"}"
-       width="${finalWidthPx}" height="${finalHeightPx}"
-       style="width:100%;height:100%;object-fit:cover;border-radius:${modernBorderRadius};display:block;" />
+  <img src="${imageUrl}" alt="${text || "shape image"}"
+    width="${resolvedWidthPx}" height="${resolvedHeightPx}"
+    style="width:100%;height:100%;object-fit:cover;border-radius:${resolvedBorderRadius};display:block;" />
 </div>`;
     }
-    // Case 3: No image → solid background
     else {
+        const circlePadding = shape === "circle" ? Math.round(resolvedHeightPx * 0.15) : 8;
         nonMsoContent = `
-<div style="display:inline-block;width:${finalWidthPx}px;height:${finalHeightPx}px;
+<div style="display:inline-block;width:${resolvedWidthPx}px;height:${resolvedHeightPx}px;
   background:${finalBackgroundColor};
   border:${borderWidth}px ${borderStyle} ${borderColor};
-  border-radius:${modernBorderRadius};
-  ${alignmentStyle}${customCss || ""}">
-  <div style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;
-    color:${textColor};text-align:center;padding:8px;box-sizing:border-box;word-break:break-word;">
-    ${text || ""}
+  border-radius:${resolvedBorderRadius};
+  overflow:hidden;${alignmentStyle}${customCss || ""}">
+  <div style="width:100%;height:100%;display:flex;${verticalAlignStyle}justify-content:center;padding:${circlePadding}px;box-sizing:border-box;">
+    <div style="${textSizeStyle}max-width:90%;overflow:hidden;">
+      ${text || ""}
+    </div>
   </div>
 </div>`;
     }
-    // --- Old Outlook (MSO) VML ---
-    const outlookContent = await appendOutlookForShape(nonMsoContent, finalWidthPx, finalWidthPx, {
+    // ============================
+    // Outlook (VML) version
+    // ============================
+    const outlookContent = await appendOutlookForShape(nonMsoContent, resolvedWidthPx, resolvedWidthPx, {
         shape,
         imageUrl,
         backgroundColor,
@@ -651,19 +584,22 @@ async function convertShapeBlock(blockData) {
         borderWidth,
         borderColor,
         borderRadius: resolvedBorderRadius,
-        heightPx: finalHeightPx,
+        heightPx: resolvedHeightPx,
         text,
-        textColor,
+        textColor: color,
+        textSize: fontSize,
+        verticalAlign,
         alignment,
         padding,
-        msoBakeImageWithText
+        msoBakeImageWithText,
     });
-    // Wrap in container table
-    const containerTable = `
+    // ============================
+    // Final combined block
+    // ============================
+    return `
 <table width="100%" style="border-collapse:collapse;table-layout:fixed;">
   <tr>
-    <td style="padding:${padding.top || 0}px ${padding.right || 0}px ${padding.bottom || 0}px ${padding.left || 0}px;
-      background-color:transparent;text-align:${alignment};">
+    <td style="padding:${padding.top || 0}px ${padding.right || 0}px ${padding.bottom || 0}px ${padding.left || 0}px;text-align:${alignment};">
       ${outlookContent}
       <!--[if !mso]><!-->
       ${nonMsoContent}
@@ -671,8 +607,85 @@ async function convertShapeBlock(blockData) {
     </td>
   </tr>
 </table>`;
-    return appendOutlookSupport(containerTable, buildStyles(style, {
-        perChanges: addPxOrPerToAttributes,
-        pxChanges: allPxAttributes,
-    }));
+}
+// ---------- Updated VML builder with better text containment ----------
+function buildVMLShape({ shape, widthPx, heightPx, imageUrl, backgroundColor, borderWidth, borderColor, borderRadius, text, textColor = "#000000", textSize = 14, verticalAlign = "center", msoHasBakedText = false, }) {
+    // --- Basic setup ---
+    const bw = borderWidth || 0;
+    const bc = borderColor || "transparent";
+    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 ---
+    let tag = "rect";
+    let extraAttr = "";
+    if (shape === "circle" || shape === "oval") {
+        tag = "oval";
+    }
+    else if (shape === "rounded") {
+        tag = "roundrect";
+        extraAttr = `arcsize="${computeArcSize(borderRadius, widthPx)}"`;
+    }
+    // --- Text alignment ---
+    const vAlignMap = { top: "top", center: "middle", bottom: "bottom" };
+    const vAlign = vAlignMap[verticalAlign] || "middle";
+    const safeFontSize = Math.max(textSize, 10);
+    // --- Text inside shape ---
+    const textboxMarkup = text && !msoHasBakedText
+        ? `<v:textbox inset="6pt,6pt,6pt,6pt" style="mso-fit-shape-to-text:false;">
+           <div style="display:table;width:100%;height:100%;">
+             <div style="display:table-cell;vertical-align:${vAlign};text-align:center;">
+               <div style="color:${textColor};font-family:Arial, sans-serif;font-size:${safeFontSize}px;line-height:1.3;word-wrap:break-word;">
+                 ${text}
+               </div>
+             </div>
+           </div>
+         </v:textbox>`
+        : `<v:textbox inset="0,0,0,0"><div style="display:none;">.</div></v:textbox>`;
+    // --- Final shape markup ---
+    return `
+<v:${tag} xmlns:v="urn:schemas-microsoft-com:vml"
+  style="width:${widthPx}px;height:${heightPx}px;
+         mso-position-horizontal:center;
+         mso-position-vertical:center;"
+  ${borderAttrs}
+  fill="true" fillcolor="${fillColor}"${extraAttr}>
+  ${fillMarkup}
+  ${textboxMarkup}
+</v:${tag}>`;
+}
+// ---------- Updated appendOutlookForShape ----------
+async function appendOutlookForShape(content, outerContainerWidth, innerContainerWidth, opts) {
+    const widthPx = Math.round(Math.min(outerContainerWidth, innerContainerWidth));
+    const heightPx = Math.max(1, Math.round(opts.heightPx));
+    const vml = buildVMLShape({
+        shape: opts.shape,
+        widthPx,
+        heightPx,
+        imageUrl: opts.msoBakeImageWithText || opts.imageUrl,
+        backgroundColor: opts.shapeColor || opts.backgroundColor,
+        borderWidth: opts.borderWidth,
+        borderColor: opts.borderColor,
+        borderRadius: opts.borderRadius,
+        text: opts.text,
+        textColor: opts.textColor,
+        textSize: opts.textSize,
+        msoHasBakedText: Boolean(opts.msoBakeImageWithText),
+    });
+    const pad = opts.padding || {};
+    const align = opts.alignment || "left";
+    const valign = opts.verticalAlign || "middle";
+    return `<!--[if mso]>
+  <table align="${align}" border="0" cellpadding="0" cellspacing="0"
+         style="width:${widthPx}px;height:${heightPx}px;">
+    <tr>
+      <td valign="${valign}"
+          style="padding:${pad.top || 0}px ${pad.right || 0}px ${pad.bottom || 0}px ${pad.left || 0}px;">
+        ${vml}
+      </td>
+    </tr>
+  </table>
+  <![endif]-->`;
 }

package/package.json

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