email-builder-utils 1.1.21 → 1.1.22

package/dist/types/Template.d.ts

@@ -7,7 +7,9 @@ export declare enum BlockType {
     GRIDCELL = "Column",
     SPACER = "Spacer",
     DIVIDER = "Divider",
-    EMAILLAYOUT = "EmailLayout"
+    EMAILLAYOUT = "EmailLayout",
+    VIDEO = "Video",
+    SHAPE = "Shape"
 }
 export declare enum visibility {
     PUBLIC = "PUBLIC",
@@ -23,6 +25,7 @@ interface IProps {
     navigateToUrl: string;
     altText: string;
     cellWidths: number[];
+    responsive?: boolean;
 }
 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;CAC5B;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;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;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"}

package/dist/types/Template.js

@@ -12,6 +12,8 @@ var BlockType;
     BlockType["SPACER"] = "Spacer";
     BlockType["DIVIDER"] = "Divider";
     BlockType["EMAILLAYOUT"] = "EmailLayout";
+    BlockType["VIDEO"] = "Video";
+    BlockType["SHAPE"] = "Shape";
 })(BlockType || (exports.BlockType = BlockType = {}));
 var visibility;
 (function (visibility) {

package/dist/utils/common.d.ts

@@ -0,0 +1,3 @@
+export declare const extractYouTubeId: (url: string) => string | null;
+export declare const extractVimeoId: (url: string) => string | null;
+//# sourceMappingURL=common.d.ts.map

package/dist/utils/common.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../src/utils/common.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,gBAAgB,GAAI,KAAK,MAAM,KAAG,MAAM,GAAG,IAqBvD,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,KAAK,MAAM,KAAG,MAAM,GAAG,IAIrD,CAAC"}

package/dist/utils/common.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.extractVimeoId = exports.extractYouTubeId = void 0;
+const extractYouTubeId = (url) => {
+    try {
+        const u = new URL(url);
+        // Accept youtube.com, music.youtube.com, m.youtube.com, etc.
+        if (u.hostname === "youtu.be" || u.hostname.endsWith("youtube.com")) {
+            // Case: normal watch links (including music.youtube.com/watch?v=xxx)
+            const v = u.searchParams.get("v");
+            if (v && v.length === 11)
+                return v;
+            // Case: short links like https://youtu.be/xxxxxxx
+            if (u.hostname === "youtu.be") {
+                const id = u.pathname.replace("/", "");
+                if (id && id.length === 11)
+                    return id;
+            }
+        }
+    }
+    catch (err) {
+        // Invalid URL
+        return null;
+    }
+    return null;
+};
+exports.extractYouTubeId = extractYouTubeId;
+const extractVimeoId = (url) => {
+    const vimeoRegex = /(?:https?:\/\/)?(?:www\.)?vimeo\.com\/(\d+)/;
+    const match = url.match(vimeoRegex);
+    return match ? match[1] : null;
+};
+exports.extractVimeoId = extractVimeoId;

package/dist/utils/jsonToHTML.d.ts

@@ -19,5 +19,7 @@ interface IBlockData {
 }
 export declare const tableCommonStyle = "border-collapse:collapse; table-layout:fixed;";
 export declare function convertToHtml(blockData: IBlockData, rootData: any, cellWidthInPx: number): Promise<string>;
+export declare function convertVideoBlock(blockData: any, cellWidthInPx: number): Promise<string>;
+export declare function convertShapeBlock(blockData: IBlockData): Promise<string>;
 export {};
 //# sourceMappingURL=jsonToHTML.d.ts.map

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;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"}
+{"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"}

package/dist/utils/jsonToHTML.js

@@ -2,8 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.tableCommonStyle = void 0;
 exports.convertToHtml = convertToHtml;
+exports.convertVideoBlock = convertVideoBlock;
+exports.convertShapeBlock = convertShapeBlock;
 const jimp_1 = require("jimp");
 const types_1 = require("../types");
+const common_1 = require("./common");
 const addPxToAttributes = [
     "fontSize",
     "lineHeight",
@@ -72,6 +75,10 @@ async function convertToHtml(blockData, rootData, cellWidthInPx) {
             return convertDividerBlockToHtml(blockData);
         case types_1.BlockType.SPACER:
             return convertSpacerBlockToHtml(blockData);
+        case types_1.BlockType.VIDEO:
+            return convertVideoBlock(blockData, cellWidthInPx);
+        case types_1.BlockType.SHAPE:
+            return await convertShapeBlock(blockData);
         default:
             return "";
     }
@@ -81,12 +88,6 @@ function appendOutlookSupport(content, contentStyle) {
   <table width="100%" style="${exports.tableCommonStyle}"><tr><td style="${contentStyle}">${content}</td></tr></table>
   `;
 }
-// function convertDividerBlockToHtml(blockData: IBlockData) {
-//   const { style } = blockData.data;
-//   const { thickness, dividerColor, ...rest } = style;
-//   const convertedStyle = buildStyles(rest, {perChanges: [], pxChanges: allPxAttributes});
-//   return appendOutlookSupport(`<hr style="height:${thickness}px; background-color: ${dividerColor};" />`, convertedStyle);
-// }
 function convertDividerBlockToHtml(blockData) {
     const { style } = blockData.data;
     const { thickness, dividerColor, ...rest } = style;
@@ -337,3 +338,334 @@ async function convertGridCellBlock(blockData, rootData, cellWidthPercent, paren
         styles,
     };
 }
+async function convertVideoBlock(blockData, cellWidthInPx) {
+    const { style, props } = blockData.data;
+    const { videoUrl, youtubeVideoUrl, thumbnailUrl, altText } = props || {};
+    const videoLink = youtubeVideoUrl || videoUrl || "#";
+    let resolvedThumbnail = thumbnailUrl || "https://via.placeholder.com/480x360?text=No+Thumbnail";
+    if (youtubeVideoUrl) {
+        const youtubeId = (0, common_1.extractYouTubeId)(youtubeVideoUrl);
+        const vimeoId = (0, common_1.extractVimeoId)(youtubeVideoUrl);
+        if (youtubeId) {
+            resolvedThumbnail = `https://img.youtube.com/vi/${youtubeId}/hqdefault.jpg`;
+        }
+        else if (vimeoId) {
+            try {
+                const res = await fetch(`https://vimeo.com/api/v2/video/${vimeoId}.json`);
+                if (res.ok) {
+                    const data = await res.json();
+                    resolvedThumbnail = data?.[0]?.thumbnail_large || resolvedThumbnail;
+                }
+            }
+            catch (_) { }
+        }
+    }
+    // Determine width logic
+    let percentWidth;
+    if (typeof style?.width === "string" && style.width.trim().endsWith("%")) {
+        percentWidth = style.width.trim();
+    }
+    else if (typeof style?.width === "number") {
+        percentWidth = `${style.width}%`;
+    }
+    else {
+        percentWidth = "100%";
+    }
+    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({
+        ...style,
+        width: undefined,
+    }, {
+        perChanges: addPxOrPerToAttributes,
+        pxChanges: addPxToAttributes,
+    });
+    const borderRadius = parseInt(style?.borderRadius) || 0;
+    const borderWidth = parseInt(style?.borderWidth) || 0;
+    const borderColor = style?.borderColor || "transparent";
+    // Play icon size
+    const playIconWidth = 65;
+    const playIconHeight = 46;
+    // VML centering math (for Outlook)
+    const vmlLeft = innerContainerWidth / 2 - playIconWidth / 2;
+    const vmlTop = calculatedHeight / 2 - playIconHeight / 2;
+    const videoContent = `
+    <!--[if mso]>
+    <v:group xmlns:v="urn:schemas-microsoft-com:vml" coordsize="${innerContainerWidth},${calculatedHeight}"
+      coordorigin="0,0"
+      href="${videoLink}"
+      style="width:${innerContainerWidth}px;height:${calculatedHeight}px;">
+      <v:rect fill="t" stroked="f" style="position:absolute;width:${innerContainerWidth}px;height:${calculatedHeight}px;">
+        <v:fill src="${resolvedThumbnail}" type="frame"/>
+      </v:rect>
+      <v:shape type="#_x0000_t75"
+        style="position:absolute;
+               left:${vmlLeft.toFixed(1)}px;
+               top:${vmlTop.toFixed(1)}px;
+               width:${playIconWidth}px;
+               height:${playIconHeight}px;"
+        alt="Play" href="${videoLink}" title="${altText || "Video"}"
+        stroked="f" filled="t">
+        <v:imagedata src="https://app-rsrc.getbee.io/public/resources/components/widgetBar/video-content-icon-sets/light/type-01.png" />
+      </v:shape>
+    </v:group>
+    <![endif]-->
+
+    <!--[if !mso]><!-->
+    <table
+      width="${innerContainerWidth}"
+      cellpadding="0"
+      cellspacing="0"
+      border="0"
+      role="presentation"
+      style="
+        background-image: url('${resolvedThumbnail}');
+        background-size: cover;
+        background-position: center;
+        
+        max-width: ${innerContainerWidth}px;
+        height: ${calculatedHeight}px;
+        box-sizing: border-box;
+      "
+      align="center"
+    >
+      <tr>
+        <td style="height: ${calculatedHeight}px; padding: 0; text-align: center; vertical-align: middle; border-radius: ${borderRadius}px;
+        border: ${borderWidth}px solid ${borderColor};" align="center" valign="middle">
+          <a href="${videoLink}" target="_blank" style="display:inline-block; border: 0; outline: none; text-decoration: none;">
+            <img
+              src="https://app-rsrc.getbee.io/public/resources/components/widgetBar/video-content-icon-sets/light/type-01.png"
+              width="${playIconWidth}"
+              alt="Play"
+              style="display: block; border: 0; outline: none; text-decoration: none; height: auto;"
+            />
+          </a>
+        </td>
+      </tr>
+    </table>
+    <!--<![endif]-->
+  `;
+    const wrapperHtml = `
+    <table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="margin:0; padding:0; border-collapse: collapse;">
+      <tr>
+        <td align="center" style="padding:0; ${outerContainerStyles}">
+          <div style="display: inline-block; width: ${percentWidth}; max-width: ${cellWidthInPx}px; box-sizing: border-box;">
+            ${videoContent}
+          </div>
+        </td>
+      </tr>
+    </table>
+  `;
+    return wrapperHtml;
+}
+// Enhanced Shape Block HTML Conversion using appendOutlookForShape
+// ---------- helpers ----------
+function computeArcSize(borderRadius, widthPx) {
+    if (!borderRadius)
+        return "0";
+    if (typeof borderRadius === "number")
+        return Math.min(borderRadius / widthPx, 1).toFixed(2);
+    const s = borderRadius.toString().trim();
+    if (s.endsWith("%")) {
+        const pct = parseFloat(s.replace("%", "")) || 0;
+        return Math.min(pct / 100, 1).toFixed(2);
+    }
+    // assume px or raw number
+    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) ----------
+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 borderRadiusMap = {
+        rectangle: "0",
+        rounded: "10px",
+        circle: "50%",
+        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;
+    // Force circle → square
+    if (shape === "circle") {
+        const side = Math.min(resolvedWidthPx, resolvedHeightPx);
+        resolvedWidthPx = side;
+        resolvedHeightPx = side;
+        resolvedBorderRadius = "50%";
+    }
+    const finalWidthPx = resolvedWidthPx;
+    const finalHeightPx = resolvedHeightPx;
+    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 ---
+    let nonMsoContent = "";
+    // Case 1: Image + Text → use background-image
+    if (imageUrl && text) {
+        nonMsoContent = `
+<div style="display:inline-block;width:${finalWidthPx}px;height:${finalHeightPx}px;
+  border:${borderWidth}px ${borderStyle} ${borderColor};
+  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%;">
+      ${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;
+  border:${borderWidth}px ${borderStyle} ${borderColor};
+  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:${resolvedBorderRadius};display:block;" />
+</div>`;
+    }
+    // Case 3: No image → solid background
+    else {
+        nonMsoContent = `
+<div style="display:inline-block;width:${finalWidthPx}px;height:${finalHeightPx}px;
+  background:${finalBackgroundColor};
+  border:${borderWidth}px ${borderStyle} ${borderColor};
+  border-radius:${resolvedBorderRadius};
+  ${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 || ""}
+  </div>
+</div>`;
+    }
+    // --- Old Outlook (MSO) VML ---
+    const outlookContent = await appendOutlookForShape(nonMsoContent, finalWidthPx, finalWidthPx, {
+        shape,
+        imageUrl,
+        backgroundColor,
+        shapeColor,
+        borderWidth,
+        borderColor,
+        borderRadius: resolvedBorderRadius,
+        heightPx: finalHeightPx,
+        text,
+        textColor,
+        alignment,
+        padding,
+        msoBakeImageWithText
+    });
+    // Wrap in container table
+    const containerTable = `
+<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};">
+      ${outlookContent}
+      <!--[if !mso]><!-->
+      ${nonMsoContent}
+      <!--<![endif]-->
+    </td>
+  </tr>
+</table>`;
+    return appendOutlookSupport(containerTable, buildStyles(style, {
+        perChanges: addPxOrPerToAttributes,
+        pxChanges: allPxAttributes,
+    }));
+}

package/package.json

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