email-builder-utils 1.1.46 → 1.1.48

package/dist/utils/blocks/shape.js

@@ -0,0 +1,256 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.convertShapeBlock = convertShapeBlock;
+const common_1 = require("../common");
+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("%"))
+        return Math.min((parseFloat(s.replace("%", "")) || 0) / 100, 1).toFixed(2);
+    return Math.min((parseFloat(s.replace("px", "")) || 0) / widthPx, 1).toFixed(2);
+}
+function buildVMLShape({ shape, widthPx, heightPx, imageUrl, backgroundColor, borderWidth, borderColor, borderRadius, text, textColor = "#000000", textSize = 14, verticalAlign = "middle", textAlign = "center", msoHasBakedText = false, }) {
+    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}" />`;
+    let tag = "rect";
+    let extraAttr = "";
+    if (shape === "circle" || shape === "oval") {
+        tag = "oval";
+    }
+    else if (shape === "rounded") {
+        tag = "roundrect";
+        extraAttr = `arcsize="${computeArcSize(borderRadius, widthPx)}"`;
+    }
+    const vAlignMap = { top: "top", middle: "middle", bottom: "bottom" };
+    const hAlignMap = { left: "left", center: "center", right: "right", justify: "left" };
+    const vAlign = vAlignMap[verticalAlign] || "middle";
+    const hAlign = hAlignMap[textAlign] || "center";
+    const safeFontSize = Math.max(Math.round(textSize), 10);
+    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:${hAlign};padding:0 6px;">
+             <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>`;
+    return `
+<v:${tag} xmlns:v="urn:schemas-microsoft-com:vml"
+  style="width:${widthPx}px;height:${heightPx}px;display:inline-block;"
+  ${borderAttrs}
+  fill="true" fillcolor="${fillColor}"${extraAttr}>
+  ${fillMarkup}
+  ${textboxMarkup}
+</v:${tag}>`;
+}
+function appendOutlookForShape(content, outerContainerWidth, innerContainerWidth, opts, visibilityClass) {
+    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,
+        verticalAlign: opts.verticalAlign, textAlign: opts.textAlign,
+        msoHasBakedText: Boolean(opts.msoBakeImageWithText),
+    });
+    const pad = opts.padding || {};
+    const align = opts.alignment || "left";
+    const valign = opts.verticalAlign || "middle";
+    const shouldHideInOutlook = visibilityClass.includes("hide-desktop");
+    if (shouldHideInOutlook) {
+        return `<!--[if !mso]><!-->
+    <table align="${align}" border="0" cellpadding="0" cellspacing="0"
+           style="width:${widthPx}px;height:${heightPx}px;border-collapse:collapse;" class="${visibilityClass}">
+      <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]-->`;
+    }
+    return `<!--[if mso]>
+  <table align="${align}" border="0" cellpadding="0" cellspacing="0"
+         style="width:${widthPx}px;height:${heightPx}px;border-collapse:collapse;" class="${visibilityClass}">
+    <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]-->`;
+}
+async function convertShapeBlock(blockData) {
+    const { style, props } = blockData.data;
+    const { shape, text, imageUrl } = props;
+    const visibilityClass = (0, common_1.getVisibilityClass)(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, textAlign = "center", verticalAlign = "middle", } = 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;
+    // --- Shape-specific constraints ---
+    if (shape === "circle") {
+        const side = Math.min(resolvedWidthPx, resolvedHeightPx);
+        resolvedWidthPx = side;
+        resolvedHeightPx = side;
+        resolvedBorderRadius = "50%";
+    }
+    else if (shape === "oval") {
+        resolvedBorderRadius = "50% / 50%";
+    }
+    const finalBackgroundColor = shapeColor || backgroundColor;
+    // --- Horizontal alignment for outer container ---
+    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] || "";
+    // --- Text + vertical alignment maps ---
+    const textAlignMap = {
+        left: "left",
+        center: "center",
+        right: "right",
+        justify: "justify",
+    };
+    const textAlignStyle = textAlignMap[textAlign] || "center";
+    // --- Text styling ---
+    const textSizeStyle = `font-size:${fontSize}px;line-height:1.3;word-break:break-word;overflow-wrap:break-word;color:${color};`;
+    // ============================
+    // Modern HTML (non-MSO)
+    // ============================
+    let nonMsoContent = "";
+    // --- Case 1: Image + Text ---
+    if (imageUrl && text) {
+        nonMsoContent = `
+<div style="display:inline-block;width:${resolvedWidthPx}px;height:${resolvedHeightPx}px;
+  border:${borderWidth}px ${borderStyle} ${borderColor};
+  border-radius:${resolvedBorderRadius};
+  background-color:${finalBackgroundColor};
+  background-image:url('${imageUrl}');
+  background-position:center center;
+  background-size:cover;
+  background-repeat:no-repeat;
+  overflow:hidden;${alignmentStyle}${customCss || ""}">
+  <table border="0" cellpadding="0" cellspacing="0" width="${resolvedWidthPx}"
+    style="width:${resolvedWidthPx}px;height:${resolvedHeightPx}px;border-collapse:collapse;">
+    <tr>
+      <td align="${textAlignStyle}" valign="${verticalAlign}"
+          width="${resolvedWidthPx}" height="${resolvedHeightPx}"
+          style="padding:6px;vertical-align:${verticalAlign};text-align:${textAlignStyle};overflow:hidden;box-sizing:border-box;">
+        <div style="${textSizeStyle}text-align:${textAlignStyle};max-width:90%;overflow:hidden;">${text}</div>
+      </td>
+    </tr>
+  </table>
+</div>`;
+    }
+    // --- Case 2: Image only ---
+    else if (imageUrl) {
+        nonMsoContent = `
+<div style="display:inline-block;width:${resolvedWidthPx}px;height:${resolvedHeightPx}px;
+  border:${borderWidth}px ${borderStyle} ${borderColor};
+  border-radius:${resolvedBorderRadius};
+  overflow:hidden;${alignmentStyle}${customCss || ""}">
+  <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: Text only ---
+    else {
+        nonMsoContent = `
+<div style="display:inline-block;width:${resolvedWidthPx}px;height:${resolvedHeightPx}px;
+  background-color:${finalBackgroundColor};
+  border:${borderWidth}px ${borderStyle} ${borderColor};
+  border-radius:${resolvedBorderRadius};
+  overflow:hidden;${alignmentStyle}${customCss || ""}">
+  <table border="0" cellpadding="0" cellspacing="0" width="${resolvedWidthPx}"
+    style="width:${resolvedWidthPx}px;height:${resolvedHeightPx}px;border-collapse:collapse;">
+    <tr>
+      <td align="${textAlignStyle}" valign="${verticalAlign}"
+          width="${resolvedWidthPx}" height="${resolvedHeightPx}"
+          style="padding:8px;vertical-align:${verticalAlign};text-align:${textAlignStyle};box-sizing:border-box;">
+        <div style="${textSizeStyle}text-align:${textAlignStyle};max-width:90%;overflow:hidden;">${text || ""}</div>
+      </td>
+    </tr>
+  </table>
+</div>`;
+    }
+    // Outlook (VML) fallback
+    const outlookContent = appendOutlookForShape(nonMsoContent, resolvedWidthPx, resolvedWidthPx, {
+        shape,
+        imageUrl,
+        backgroundColor,
+        shapeColor,
+        borderWidth,
+        borderColor,
+        borderRadius: resolvedBorderRadius,
+        heightPx: resolvedHeightPx,
+        text,
+        textColor: color,
+        textSize: fontSize,
+        verticalAlign,
+        textAlign, // ✅ added
+        alignment,
+        padding,
+        msoBakeImageWithText,
+    }, visibilityClass);
+    const shapeBlockProps = (0, common_1.encodeBlockPropsAttr)({
+        shape: shape || 'rectangle',
+        width: resolvedWidthPx,
+        height: resolvedHeightPx,
+        shapeColor: shapeColor || '',
+        backgroundColor: backgroundColor || '',
+        borderRadius: resolvedBorderRadius,
+        borderWidth,
+        borderColor,
+        borderStyle,
+        imageUrl: imageUrl || '',
+        text: text || '',
+        color,
+        fontSize,
+        textAlign,
+        verticalAlign,
+        alignment,
+        padding,
+        customCss: customCss || '',
+        hideOnDesktop: Boolean(props.hideOnDesktop),
+        hideOnMobile: Boolean(props.hideOnMobile),
+    });
+    // Combine into table wrapper
+    return `
+<table width="100%" style="border-collapse:collapse;table-layout:fixed;max-width:600px;" class="${visibilityClass}" data-block-type="shape" data-block-props="${shapeBlockProps}">
+  <tr>
+    <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}
+      <!--<![endif]-->
+    </td>
+  </tr>
+</table>`;
+}

package/dist/utils/blocks/text.d.ts

@@ -0,0 +1,2 @@
+export declare function convertTextBlock(blockData: any, cellWidthInPx?: number): string;
+//# sourceMappingURL=text.d.ts.map

package/dist/utils/blocks/text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../src/utils/blocks/text.ts"],"names":[],"mappings":"AAKA,wBAAgB,gBAAgB,CAAC,SAAS,EAAE,GAAG,EAAE,aAAa,CAAC,EAAE,MAAM,UAsItE"}

package/dist/utils/blocks/text.js

@@ -0,0 +1,106 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.convertTextBlock = convertTextBlock;
+const buildStyles_1 = require("../buildStyles");
+const gradientUtils_1 = require("../gradientUtils");
+const outlookSupport_1 = require("../outlookSupport");
+const common_1 = require("../common");
+function convertTextBlock(blockData, cellWidthInPx) {
+    const { style, props } = blockData.data;
+    const visibilityClass = (0, common_1.getVisibilityClass)(props);
+    const { width, backgroundColor, padding, borderRadius, borderStyle, borderColor, borderWidth, textContainerBackgroundColor, textContainerPadding, fontSize, backgroundImage, whiteSpace: _whiteSpace, ...rest } = style;
+    const bgImageStr = typeof backgroundImage === 'string' ? backgroundImage : '';
+    const customCssStr = rest.customCss || '';
+    const gradientInCustomCss = !bgImageStr.includes('gradient(') && customCssStr.includes('gradient(')
+        ? (customCssStr.match(/(?:linear|radial|conic)-gradient\([^)]+(?:\([^)]*\)[^)]*)*\)/)?.[0] || '')
+        : '';
+    const effectiveGradient = bgImageStr.includes('gradient(') ? bgImageStr : gradientInCustomCss;
+    const isGradient = Boolean(effectiveGradient);
+    const parsedGradient = isGradient ? (0, gradientUtils_1.parseGradient)(effectiveGradient) : null;
+    const rawBgImageUrl = !isGradient && bgImageStr
+        ? bgImageStr.replace(/^url\(['"]?/, '').replace(/['"]?\)$/, '')
+        : null;
+    const hasBgImage = Boolean(rawBgImageUrl || isGradient);
+    const fallbackBgColor = textContainerBackgroundColor ||
+        parsedGradient?.fallback ||
+        (0, gradientUtils_1.extractCssFallbackColor)(customCssStr) ||
+        '#ffffff';
+    const textBoxStyle = { backgroundColor, padding, borderRadius, borderStyle, borderColor, borderWidth };
+    const convertedTextStyle = (0, buildStyles_1.buildStyles)(textBoxStyle, { perChanges: [], pxChanges: buildStyles_1.allPxAttributes });
+    const innerCustomCss = gradientInCustomCss
+        ? customCssStr.replace(/background-image\s*:[^;]+;?/gi, '').trim()
+        : customCssStr;
+    const restForStyles = gradientInCustomCss ? { ...rest, customCss: innerCustomCss } : rest;
+    const styles = (0, buildStyles_1.buildStyles)({
+        padding: textContainerPadding,
+        backgroundColor: hasBgImage ? undefined : textContainerBackgroundColor,
+        ...restForStyles,
+    }, { perChanges: [], pxChanges: buildStyles_1.allPxAttributes });
+    const sanitizedText = (props.text ?? "")
+        .replace(/<p(\s[^>]*)?>/gi, (_, attrs) => `<div${attrs || ""}>`)
+        .replace(/<\/p>/gi, "</div>");
+    const navigateToUrl = props.navigateToUrl || "";
+    const fontSizeStyle = fontSize != null ? `font-size:${fontSize}px;` : "";
+    const blockTextColor = rest.color;
+    const processedText = blockTextColor
+        ? sanitizedText.replace(/<a(\s[^>]*)?>/gi, (match, attrs = '') => {
+            if (/style\s*=\s*["'][^"']*\bcolor\s*:/i.test(attrs))
+                return match;
+            if (/\bstyle\s*=/i.test(attrs)) {
+                return `<a${attrs.replace(/(\bstyle\s*=\s*["'])/, `$1color:${blockTextColor};`)}>`;
+            }
+            return `<a${attrs} style="color:${blockTextColor};">`;
+        })
+        : sanitizedText;
+    const colorStyle = blockTextColor ? `color:${blockTextColor};` : '';
+    const convertedTextBox = `<div style="display:block; width:100%; box-sizing:border-box; ${colorStyle}${fontSizeStyle}${convertedTextStyle}">${processedText.replaceAll(/\n/g, "<br>")}</div>`;
+    const safeCellWidth = cellWidthInPx ? Math.min(cellWidthInPx, 600) : undefined;
+    const textContent = (0, outlookSupport_1.appendOutlookSupport)(convertedTextBox, styles, hasBgImage ? '' : visibilityClass, safeCellWidth);
+    const linkColorStyle = blockTextColor ? `color:${blockTextColor};` : 'color:inherit;';
+    if (hasBgImage) {
+        const msoWidth = cellWidthInPx ? Math.min(cellWidthInPx, 600) : 600;
+        const vmlFill = isGradient
+            ? (() => {
+                const vmlAngle = (0, gradientUtils_1.cssAngleToVml)(parsedGradient?.angle || 180);
+                const c1 = parsedGradient?.fallback || '#ffffff';
+                const c2 = parsedGradient?.colors[parsedGradient.colors.length - 1] || c1;
+                return `<v:fill type="gradient" color="${c1}" color2="${c2}" angle="${vmlAngle}" />`;
+            })()
+            : `<v:fill type="frame" src="${rawBgImageUrl}" color="${fallbackBgColor}" />`;
+        const bgCss = isGradient
+            ? `background:${effectiveGradient};`
+            : `background-image:url('${rawBgImageUrl}'); background-position:center center; background-size:cover; background-repeat:no-repeat;`;
+        const wrappedContent = `
+<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation"
+  style="border-collapse:collapse;width:100%;max-width:${msoWidth}px;" class="${visibilityClass}">
+  <tr>
+    <td width="100%" bgcolor="${fallbackBgColor}" valign="top"
+      ${!isGradient && rawBgImageUrl ? `background="${rawBgImageUrl}"` : ''}
+      style="width:100%;max-width:${msoWidth}px;background-color:${fallbackBgColor};${bgCss}">
+
+      <!--[if gte mso 9]>
+      <v:rect xmlns:v="urn:schemas-microsoft-com:vml"
+        fill="true" stroke="false"
+        style="width:${msoWidth}px;">
+        ${vmlFill}
+        <v:textbox inset="0,0,0,0">
+      <![endif]-->
+
+      ${textContent}
+
+      <!--[if gte mso 9]>
+        </v:textbox>
+      </v:rect>
+      <![endif]-->
+
+    </td>
+  </tr>
+</table>`;
+        return navigateToUrl
+            ? `<a href="${navigateToUrl}" rel="noreferrer noopener" style="${linkColorStyle}text-decoration:none;cursor:pointer;">${wrappedContent}</a>`
+            : wrappedContent;
+    }
+    return navigateToUrl
+        ? `<a href="${navigateToUrl}" rel="noreferrer noopener" style="${linkColorStyle}text-decoration:none;cursor:pointer;">${textContent}</a>`
+        : textContent;
+}

package/dist/utils/blocks/video.d.ts

@@ -0,0 +1,2 @@
+export declare function convertVideoBlock(blockData: any, cellWidthInPx: number): Promise<string>;
+//# sourceMappingURL=video.d.ts.map

package/dist/utils/blocks/video.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"video.d.ts","sourceRoot":"","sources":["../../../src/utils/blocks/video.ts"],"names":[],"mappings":"AAUA,wBAAsB,iBAAiB,CACrC,SAAS,EAAE,GAAG,EACd,aAAa,EAAE,MAAM,mBAiKtB"}

package/dist/utils/blocks/video.js

@@ -0,0 +1,151 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.convertVideoBlock = convertVideoBlock;
+const buildStyles_1 = require("../buildStyles");
+const common_1 = require("../common");
+const FALLBACK_THUMBNAIL = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='360'%3E%3Crect width='480' height='360' fill='%23cccccc'/%3E%3C/svg%3E`;
+const PLAY_ICON_URL = 'https://app-rsrc.getbee.io/public/resources/components/widgetBar/video-content-icon-sets/light/type-01.png';
+const SPACER_GIF_URL = 'https://app-rsrc.getbee.io/public/resources/multiparser/video_block/video_ratio_16-9.gif';
+async function convertVideoBlock(blockData, cellWidthInPx) {
+    const { style = {}, props = {} } = blockData.data;
+    const visibilityClass = (0, common_1.getVisibilityClass)(props);
+    const { videoUrl, youtubeVideoUrl, thumbnailUrl, altText } = props;
+    const hideOnDesktop = Boolean(props.hideOnDesktop);
+    const videoLink = youtubeVideoUrl || videoUrl || '#';
+    let resolvedThumbnail = thumbnailUrl || FALLBACK_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 (_) { }
+        }
+    }
+    // Width / dimensions
+    let percentWidth = '100%';
+    if (typeof style?.width === 'string' && style.width.trim().endsWith('%')) {
+        percentWidth = style.width.trim();
+    }
+    else if (typeof style?.width === 'number') {
+        percentWidth = `${style.width}%`;
+    }
+    const paddingLeft = style?.padding?.left || 0;
+    const paddingRight = style?.padding?.right || 0;
+    const innerContainerWidth = (parseFloat(percentWidth) / 100) * (cellWidthInPx - paddingLeft - paddingRight);
+    const thumbnailW = Math.round(innerContainerWidth);
+    const thumbnailH = Math.round(thumbnailW / (16 / 9));
+    // Border
+    const borderRadius = parseInt(style?.borderRadius || 0);
+    const borderWidth = parseInt(style?.borderWidth || 0);
+    const borderColor = style?.borderColor || 'transparent';
+    const borderStyleProp = style?.borderStyle || 'solid';
+    const outerContainerStyles = (0, buildStyles_1.buildStyles)({
+        ...style,
+        width: undefined,
+        borderColor: undefined,
+        borderRadius: undefined,
+        borderWidth: undefined,
+        borderStyle: undefined,
+    }, { perChanges: buildStyles_1.addPxOrPerToAttributes, pxChanges: buildStyles_1.addPxToAttributes });
+    const align = style?.textAlign || 'left';
+    const playIconW = 65;
+    const playIconH = 46;
+    // ── Industry-standard VML + background-image table approach ──────────────────
+    // Mirrors the pattern used by professional email builders (e.g. Beefree):
+    //
+    // VML (<!--[if vml]>): all Outlook / Word rendering engine versions.
+    //   v:group wraps thumbnail (v:rect frame fill) + vector play button
+    //   (v:oval white circle + v:shape black triangle). No external image needed.
+    //
+    // Non-VML (<!--[if !vml]>): Gmail, Apple Mail, Yahoo, Outlook.com, EML viewers.
+    //   thumbnail as `background` attribute + inline background-image on <table>.
+    //   3-column layout: [25% spacer GIF] [50% play icon, centred] [25% spacer].
+    //   The spacer GIF has a 4:9 aspect ratio — when it fills the 25% column its
+    //   rendered height equals thumbnailWidth × 9/16, keeping the table at 16:9
+    //   without any fixed `height` CSS (which is stripped by many clients).
+    // VML coordinate positions for the play button (in the v:group coord space).
+    const ovalSize = 65;
+    const ovalLeft = Math.round(thumbnailW / 2 - ovalSize / 2);
+    const ovalTop = Math.round(thumbnailH / 2 - ovalSize / 2);
+    const triW = 23;
+    const triH = 33;
+    // Triangle centre is slightly right of geometric centre for visual balance.
+    const triLeft = Math.round(thumbnailW / 2 - triW / 2 + 3);
+    const triTop = Math.round(thumbnailH / 2 - triH / 2);
+    const borderCss = borderWidth > 0
+        ? `border:${borderWidth}px ${borderStyleProp} ${borderColor};`
+        : '';
+    const radiusCss = borderRadius > 0 ? `border-radius:${borderRadius}px; overflow:hidden;` : '';
+    // min-height fallback for clients that ignore the spacer GIF (e.g. some webmail).
+    const minHeight = Math.round(thumbnailW * 0.3);
+    // VML block — shown only in Outlook (Word engine supports VML, not standard HTML).
+    const outlookContent = hideOnDesktop ? '' : `<!--[if vml]>
+<v:group xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word"
+  coordsize="${thumbnailW},${thumbnailH}" coordorigin="0,0"
+  href="${videoLink}"
+  style="width:${thumbnailW}px;height:${thumbnailH}px;">
+  <v:rect fill="t" stroked="f" style="position:absolute;width:${thumbnailW};height:${thumbnailH};">
+    <v:fill src="${resolvedThumbnail}" type="frame"/>
+  </v:rect>
+  <v:oval fill="t" strokecolor="#ffffff" strokeweight="3px"
+    style="position:absolute;left:${ovalLeft};top:${ovalTop};width:${ovalSize};height:${ovalSize}">
+    <v:fill color="#ffffff" opacity="100%" />
+  </v:oval>
+  <v:shape coordsize="24,32" path="m,l,32,24,16,xe" fillcolor="#000000" stroked="f"
+    style="position:absolute;left:${triLeft};top:${triTop};width:${triW};height:${triH};" />
+</v:group>
+<![endif]-->`;
+    // Non-VML block — shown in all clients except Outlook.
+    const nonMsoContent = `<!--[if !vml]><!-->
+<a href="${videoLink}" target="_blank"
+    style="display:block; text-decoration:none; background-image:url('${resolvedThumbnail}'); background-size:cover; background-position:center; ${borderCss}${radiusCss}">
+  <table cellpadding="0" cellspacing="0" border="0" width="100%"
+    background="${resolvedThumbnail}"
+    role="presentation"
+    style="background-image:url('${resolvedThumbnail}'); background-size:cover; background-position:center center; background-repeat:no-repeat; min-height:${minHeight}px;">
+    <tr>
+      <td width="25%" style="line-height:0; font-size:0; padding:0;">
+        <img src="${SPACER_GIF_URL}" width="100%" border="0" alt=""
+          style="display:block; height:auto; opacity:0; visibility:hidden;" />
+      </td>
+      <td width="50%" align="center" valign="middle"
+          style="text-align:center; vertical-align:middle; padding:0;">
+        <img src="${PLAY_ICON_URL}" width="${playIconW}" height="${playIconH}" alt="Play"
+          style="display:block; width:${playIconW}px; height:${playIconH}px; border:0; margin:0 auto;" />
+      </td>
+      <td width="25%" style="padding:0;">&nbsp;</td>
+    </tr>
+  </table>
+</a>
+<!--<![endif]-->`;
+    return `
+<table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation"
+  style="border-collapse:collapse; max-width:600px; margin:0; padding:0;"
+  class="${visibilityClass}" data-block-type="video"
+  data-video-url="${videoUrl || ''}" data-youtube-url="${youtubeVideoUrl || ''}"
+  data-thumbnail-url="${thumbnailUrl || ''}" data-alt-text="${altText || ''}"
+  data-width="${typeof style?.width === 'number' ? style.width : 100}">
+  <tr>
+    <td align="${align}" style="${outerContainerStyles}">
+      <table border="0" cellpadding="0" cellspacing="0" role="presentation"
+        align="${align}"
+        style="border-collapse:collapse; max-width:${thumbnailW}px; width:${percentWidth};">
+        <tr>
+          <td align="${align}" style="padding:0;">
+            ${outlookContent}${nonMsoContent}
+          </td>
+        </tr>
+      </table>
+    </td>
+  </tr>
+</table>`;
+}

package/dist/utils/buildStyles.d.ts

@@ -0,0 +1,10 @@
+export declare const addPxToAttributes: string[];
+export declare const addPxOrPerToAttributes: string[];
+export declare const allPxAttributes: string[];
+export declare const tableCommonStyle = "border-collapse:collapse; table-layout:fixed";
+export declare function sanitizeFontFamily(fontFamily: string): string;
+export declare function buildStyles(style: any, { pxChanges, perChanges }: {
+    pxChanges: string[];
+    perChanges: string[];
+}): string;
+//# sourceMappingURL=buildStyles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"buildStyles.d.ts","sourceRoot":"","sources":["../../src/utils/buildStyles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB,UAA8C,CAAC;AAC7E,eAAO,MAAM,sBAAsB,UAAsB,CAAC;AAC1D,eAAO,MAAM,eAAe,UAAoD,CAAC;AAEjF,eAAO,MAAM,gBAAgB,iDAAiD,CAAC;AAQ/E,wBAAgB,kBAAkB,CAAC,UAAU,EAAE,MAAM,GAAG,MAAM,CAe7D;AAED,wBAAgB,WAAW,CACzB,KAAK,EAAE,GAAG,EACV,EAAE,SAAS,EAAE,UAAU,EAAE,EAAE;IAAE,SAAS,EAAE,MAAM,EAAE,CAAC;IAAC,UAAU,EAAE,MAAM,EAAE,CAAA;CAAE,UAmEzE"}

package/dist/utils/buildStyles.js

@@ -0,0 +1,101 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.tableCommonStyle = exports.allPxAttributes = exports.addPxOrPerToAttributes = exports.addPxToAttributes = void 0;
+exports.sanitizeFontFamily = sanitizeFontFamily;
+exports.buildStyles = buildStyles;
+const fontFallback_1 = require("./fontFallback");
+exports.addPxToAttributes = ["fontSize", "borderRadius", "borderWidth"];
+exports.addPxOrPerToAttributes = ["width", "height"];
+exports.allPxAttributes = [...exports.addPxToAttributes, ...exports.addPxOrPerToAttributes];
+exports.tableCommonStyle = "border-collapse:collapse; table-layout:fixed";
+const GENERIC_FONT_FAMILIES = new Set([
+    'serif', 'sans-serif', 'monospace', 'cursive', 'fantasy',
+    'system-ui', 'ui-serif', 'ui-sans-serif', 'ui-monospace',
+    'ui-rounded', 'emoji', 'math', 'fangsong',
+]);
+function sanitizeFontFamily(fontFamily) {
+    if (!fontFamily)
+        return fontFamily;
+    return fontFamily
+        .split(',')
+        .map(font => {
+        const trimmed = font.trim();
+        const unquoted = trimmed.replace(/^["']|["']$/g, '').trim();
+        if (!unquoted)
+            return '';
+        if (GENERIC_FONT_FAMILIES.has(unquoted.toLowerCase()) || !/\s/.test(unquoted)) {
+            return unquoted;
+        }
+        return `'${unquoted.replace(/'/g, "\\'")}'`;
+    })
+        .filter(Boolean)
+        .join(', ');
+}
+function buildStyles(style, { pxChanges, perChanges }) {
+    if (!style)
+        style = {};
+    const stylesObj = {};
+    const INVALID_KEYS = [
+        "columns", "cellWidths", "cellWidth", "childWidth",
+        "visibility", "hideOnMobile", "hideOnDesktop", "label", "alignment",
+    ];
+    Object.entries(style).forEach(([key, value]) => {
+        if (key === "customCss")
+            return;
+        if (INVALID_KEYS.includes(key))
+            return;
+        if (value === undefined || value === null || value === "")
+            return;
+        if ((key === "padding" || key === "buttonPadding") && typeof value === "object") {
+            const pad = value;
+            const safePad = {
+                top: Number.isFinite(pad.top) ? pad.top : 0,
+                right: Number.isFinite(pad.right) ? pad.right : 0,
+                bottom: Number.isFinite(pad.bottom) ? pad.bottom : 0,
+                left: Number.isFinite(pad.left) ? pad.left : 0,
+            };
+            value = `${safePad.top}px ${safePad.right}px ${safePad.bottom}px ${safePad.left}px`;
+        }
+        if (key === "fontFamily" && typeof value === "string") {
+            value = sanitizeFontFamily((0, fontFallback_1.withFontFallback)(value));
+        }
+        if (key === "backgroundImage" && typeof value === "string"
+            && !String(value).startsWith("url(")
+            && !String(value).toLowerCase().includes("gradient(")) {
+            value = `url('${value}')`;
+        }
+        if (key === "lineHeight" && typeof value === "number") {
+            stylesObj["line-height"] = value >= 4 ? `${value}px` : String(value);
+            return;
+        }
+        const cssKey = key.replace(/([A-Z])/g, "-$1").toLowerCase();
+        if (pxChanges.includes(key)) {
+            if (typeof value === "number") {
+                stylesObj[cssKey] = `${Math.round(value * 100) / 100}px`;
+            }
+            else if (typeof value === "string" && value.includes("null")) {
+                return;
+            }
+            else {
+                stylesObj[cssKey] = value;
+            }
+        }
+        else if (perChanges.includes(key)) {
+            if (typeof value === "number") {
+                stylesObj[cssKey] = `${value}%`;
+            }
+            else {
+                stylesObj[cssKey] = value;
+            }
+        }
+        else {
+            stylesObj[cssKey] = value;
+        }
+    });
+    const parts = Object.entries(stylesObj)
+        .filter(([, v]) => v !== undefined && v !== null && v !== '')
+        .map(([k, v]) => `${k}:${v}`);
+    if (style.customCss)
+        parts.push(style.customCss);
+    return parts.join('; ').replace(/;\s*$/, '').trim();
+}

package/dist/utils/common.d.ts

@@ -4,4 +4,5 @@ export declare function getVisibilityClass(props?: {
     hideOnDesktop?: boolean;
     hideOnMobile?: boolean;
 }): string;
+export declare function encodeBlockPropsAttr(props: Record<string, any>): string;
 //# sourceMappingURL=common.d.ts.map

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

@@ -1 +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;AAGF,wBAAgB,kBAAkB,CAAC,KAAK,CAAC,EAAE;IACzC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,UASA"}
+{"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;AAGF,wBAAgB,kBAAkB,CAAC,KAAK,CAAC,EAAE;IACzC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,UASA;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,MAAM,CAQvE"}