@pagenflow/email 1.4.8 → 1.4.9

package/dist/components/utils/injectParagraphReset.d.ts

@@ -0,0 +1 @@
+export default function injectParagraphReset(html: string): string;

package/dist/components/utils/isGapZero.d.ts

@@ -0,0 +1 @@
+export default function isGapZero(gap?: string): boolean;

package/dist/index.cjs.js

@@ -1792,6 +1792,15 @@ function Button({ config, devMode, bindings }) {
 }
 var Button_default = React.memo(Button, arePropsEqual);
 
+function isGapZero(gap) {
+    if (!gap)
+        return true;
+    // Remove whitespace and convert to lowercase
+    const trimmedGap = gap.trim().toLowerCase();
+    // Check for exact zero matches (0, 0px, 0%, 0em, 0rem, etc.)
+    return /^0(px|%|em|rem|ex|ch|vw|vh|vmin|vmax)?$/.test(trimmedGap);
+}
+
 // Helper for vertical alignment
 const vAlignMap = {
     start: "top",
@@ -1926,7 +1935,7 @@ function Column({ children, config, devNode, bindings }) {
                                                 ? vAlignMap[config.justifyContent]
                                                 : "top", align: config.alignItems
                                                 ? alignMap$2[config.alignItems]
-                                                : "left", children: child }) }), index < numChildren - 1 && (jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { style: gapSpacerStyle, children: "\u00A0" }) }))] }, `col-child-${index}`))) }) })) : (children) }) }) }) }));
+                                                : "left", children: child }) }), index < numChildren - 1 && !isGapZero(config.gap) && (jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { style: gapSpacerStyle, children: "\u00A0" }) }))] }, `col-child-${index}`))) }) })) : (children) }) }) }) }));
     return (jsxRuntime.jsxs("table", { "aria-label": "Column Wrapper", role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, ...rootBindingProps(bindings), style: {
             position: "relative",
             ...outerTableStyle,
@@ -2104,13 +2113,13 @@ function Container({ children, config, bindings, devMode, devNode, }) {
             textAlign: "left",
         };
         if (config.gap && index < numChildren - 1) {
-            return (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsxs("td", { className: isStacking ? "stack-td" : undefined, width: getChildWidths[index], style: childTdStyle, children: [child, isStacking && (jsxRuntime.jsx("div", { className: "mobile-gap-spacer", style: {
+            return (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsxs("td", { className: isStacking ? "stack-td" : undefined, width: getChildWidths[index], style: childTdStyle, children: [child, isStacking && !isGapZero(config.gap) && (jsxRuntime.jsx("div", { className: "mobile-gap-spacer", style: {
                                     display: "none",
                                     fontSize: "0",
                                     lineHeight: "0",
                                     height: config.gap,
                                     background: "transparent",
-                                }, children: "\u00A0" }))] }, `child-${index}`), jsxRuntime.jsx("td", { className: isStacking ? "desktop-gap-column" : undefined, width: config.gap, style: gapTdStyle, children: "\u00A0" }, `gap-${index}`)] }, `ctn:${index}`));
+                                }, children: "\u00A0" }))] }, `child-${index}`), !isGapZero(config.gap) && (jsxRuntime.jsx("td", { className: isStacking ? "desktop-gap-column" : undefined, width: config.gap, style: gapTdStyle, children: "\u00A0" }, `gap-${index}`))] }, `ctn:${index}`));
         }
         return (jsxRuntime.jsx("td", { className: isStacking ? "stack-td" : undefined, width: getChildWidths[index], style: childTdStyle, children: child }, `child-${index}`));
     });
@@ -2238,7 +2247,13 @@ function Head({ children, backgroundColor = "#ffffff", title = "Email Preview",
             line-height: inherit !important; 
         }
         body { background-color: ${backgroundColor} !important; }
-        p { margin: 0; }
+        p {
+          margin: 0;
+          margin-block-start: 0px;
+          margin-block-end: 0px;
+          margin-inline-start: 0px;
+          margin-inline-end: 0px;
+        }
     `;
     const globalStyles = `
         @media screen and (max-width: 768px) {
@@ -2460,6 +2475,30 @@ function injectLinkStyles(html, fallback) {
     return result;
 }
 
+// injectParagraphReset.ts
+const P_RESET_STYLE = [
+    "margin:0",
+    "margin-block-start:0px",
+    "margin-block-end:0px",
+    "margin-inline-start:0px",
+    "margin-inline-end:0px",
+].join(";");
+function injectParagraphReset(html) {
+    if (!html || !html.includes("<p"))
+        return html;
+    return html.replace(/<p(\s[^>]*)?>/gi, (_, attrs = "") => {
+        var _a, _b;
+        const existingStyle = (_b = (_a = /style\s*=\s*"([^"]*)"/i.exec(attrs)) === null || _a === void 0 ? void 0 : _a[1]) !== null && _b !== void 0 ? _b : "";
+        const mergedStyle = existingStyle
+            ? `${existingStyle};${P_RESET_STYLE}`
+            : P_RESET_STYLE;
+        const cleanAttrs = attrs.replace(/\s*style\s*=\s*"[^"]*"/i, "").trim();
+        return cleanAttrs
+            ? `<p ${cleanAttrs} style="${mergedStyle}">`
+            : `<p style="${mergedStyle}">`;
+    });
+}
+
 // Helper to build link href based on innerLink type
 function buildLinkHref$3(innerLink) {
     if (!innerLink || innerLink.type === "none")
@@ -2518,7 +2557,7 @@ function Heading({ config, devMode, children, bindings }) {
         ["msoLineHeightRule"]: "exactly",
     };
     const processedHtml = isString
-        ? injectLinkStyles(content, headingStyle)
+        ? injectParagraphReset(injectLinkStyles(content, headingStyle))
         : "";
     // Dynamically create the Heading element
     const HeadingTag = level;