@unlayer/react-elements 0.1.8 → 0.1.10

package/dist/index.js

@@ -1,4 +1,4 @@
-import { ButtonDefaults, DividerDefaults, HeadingDefaults, HtmlDefaults, ImageDefaults, MenuDefaults, ParagraphDefaults, SocialDefaults, TableDefaults, VideoDefaults, BodyDefaults, RowDefaults, ColumnDefaults, ButtonExporters, DividerExporters, HeadingExporters, HtmlExporters, ImageExporters, MenuExporters, ParagraphExporters, SocialExporters, TableExporters, VideoExporters, schemaVersion as schemaVersion$1, RowExporters, ColumnExporters, BodyExporters, heads } from '@unlayer/exporters';
+import { ButtonDefaults, DividerDefaults, HeadingDefaults, HtmlDefaults, ImageDefaults, MenuDefaults, ParagraphDefaults, SocialDefaults, TableDefaults, VideoDefaults, BodyDefaults, RowDefaults, ColumnDefaults, ButtonExporters, DividerExporters, HeadingExporters, HtmlExporters, ImageExporters, MenuExporters, ParagraphExporters, SocialExporters, TableExporters, VideoExporters, schemaVersion as schemaVersion$1, RowExporters, ContentExporters, ColumnExporters, BodyExporters, heads } from '@unlayer/exporters';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React, { useMemo, useContext, createContext } from 'react';
 import ReactDOMServer, { renderToStaticMarkup } from 'react-dom/server';
@@ -201,16 +201,53 @@ function analyzeNestedStructure(defaultValues) {
   nestedStructureCache.set(defaultValues, nestedGroups);
   return nestedGroups;
 }
+var PX_SIZE_KEYS = [
+  "fontSize",
+  "padding",
+  "containerPadding",
+  "borderRadius",
+  "letterSpacing"
+];
+function normalizeCssProps(props) {
+  if (typeof props.fontFamily === "string") {
+    const v = props.fontFamily;
+    props.fontFamily = { label: v, value: v };
+  }
+  if (typeof props.fontWeight === "string" && /^\d+$/.test(props.fontWeight.trim())) {
+    props.fontWeight = Number(props.fontWeight.trim());
+  }
+  if (typeof props.lineHeight === "number") {
+    props.lineHeight = String(props.lineHeight);
+  }
+  for (const key of PX_SIZE_KEYS) {
+    const v = props[key];
+    if (typeof v === "number") {
+      props[key] = `${v}px`;
+    } else if (typeof v === "string" && /^\d+$/.test(v.trim())) {
+      props[key] = `${v.trim()}px`;
+    }
+  }
+}
+function flattenChildrenText(node) {
+  if (node == null || typeof node === "boolean") return "";
+  if (typeof node === "string") return node;
+  if (typeof node === "number") return String(node);
+  if (Array.isArray(node)) return node.map(flattenChildrenText).join("");
+  if (typeof node === "object" && "props" in node) {
+    return flattenChildrenText(node.props?.children);
+  }
+  return "";
+}
 function mapSemanticProps(props, defaultValues, componentType) {
   const { children, values, ...restProps } = props;
   const userProps = { ...restProps };
   const result = values ? { ...values } : {};
   if (children !== void 0 && !result.text && !result.textJson) {
+    const textContent = typeof children === "string" ? children : flattenChildrenText(children);
     if (componentType === "Paragraph") {
-      const textContent = typeof children === "string" ? children : String(children);
       result.textJson = textToTextJson(textContent);
     } else {
-      result.text = children;
+      result.text = textContent;
     }
   }
   const textFromEscapeHatch = result.text;
@@ -236,6 +273,7 @@ function mapSemanticProps(props, defaultValues, componentType) {
       };
     }
   }
+  normalizeCssProps(userProps);
   const nestedGroups = analyzeNestedStructure(defaultValues);
   const nested = {};
   const flat = {};
@@ -270,6 +308,19 @@ function mapSemanticProps(props, defaultValues, componentType) {
       };
     }
   }
+  if (defaultValues && typeof defaultValues === "object" && "border" in defaultValues) {
+    const borderSideRe = /^border(Top|Right|Bottom|Left)(Width|Style|Color)$/;
+    const collected = {};
+    for (const key of Object.keys(final)) {
+      if (borderSideRe.test(key)) {
+        collected[key] = final[key];
+        delete final[key];
+      }
+    }
+    if (Object.keys(collected).length > 0) {
+      final.border = { ...final.border || {}, ...collected };
+    }
+  }
   return final;
 }
 function normalizeLinkValue(value) {
@@ -538,7 +589,26 @@ var DEFAULT_VALUES = {
 var Button = createItemComponent({
   name: "Button",
   defaultValues: DEFAULT_VALUES,
-  propMapper: (props) => mapSemanticProps(props, DEFAULT_VALUES, "Button"),
+  propMapper: (props) => {
+    const mapped = mapSemanticProps(
+      props,
+      DEFAULT_VALUES,
+      "Button"
+    );
+    const size = mapped.size;
+    if (size && typeof size === "object" && !Array.isArray(size)) {
+      const s = size;
+      if (typeof s.width === "number") {
+        s.width = `${s.width}px`;
+      } else if (typeof s.width === "string" && /^\d+(?:\.\d+)?$/.test(s.width.trim())) {
+        s.width = `${s.width.trim()}px`;
+      }
+      if (s.width !== void 0 && s.autoWidth === void 0) {
+        s.autoWidth = false;
+      }
+    }
+    return mapped;
+  },
   displayName: "Button",
   exporters: ButtonExporters
 });
@@ -603,18 +673,46 @@ var Image = createItemComponent({
   defaultValues: DEFAULT_VALUES5,
   propMapper: (props) => {
     const { alt, src, ...rest } = props;
+    const restValues = rest.values;
+    const normalizedRest = restValues && typeof restValues.src === "string" ? { ...rest, values: { ...restValues, src: { url: restValues.src } } } : rest;
     const base = mapSemanticProps(
-      rest,
+      normalizedRest,
       DEFAULT_VALUES5,
       "Image"
     );
     if (alt !== void 0) {
       base.altText = alt;
     }
-    if (typeof src === "string") {
-      base.src = { url: src, autoWidth: true, maxWidth: "100%" };
-    } else if (src !== void 0) {
-      base.src = { ...DEFAULT_VALUES5.src, ...src };
+    const baseSrc = base.src;
+    const fromValues = baseSrc && typeof baseSrc === "object" && !Array.isArray(baseSrc) ? baseSrc : typeof baseSrc === "string" ? { url: baseSrc } : {};
+    const fromProp = typeof src === "string" ? { url: src } : src ?? {};
+    const userSrc = { ...fromValues, ...fromProp };
+    if (src !== void 0 || baseSrc !== void 0) {
+      const isStringUrl = typeof src === "string" || src === void 0 && typeof baseSrc === "string";
+      const start = isStringUrl ? { autoWidth: true, maxWidth: "100%" } : { ...DEFAULT_VALUES5.src };
+      const merged = { ...start, ...userSrc };
+      const pctRe = /^\d+(?:\.\d+)?%$/;
+      if (typeof merged.width === "string") {
+        const t = merged.width.trim();
+        if (pctRe.test(t)) {
+          if (userSrc.maxWidth === void 0) merged.maxWidth = t;
+          delete merged.width;
+        } else {
+          const px = /^(\d+(?:\.\d+)?)(?:px)?$/.exec(t);
+          if (px) merged.width = parseFloat(px[1]);
+        }
+      }
+      const displayPct = typeof merged.maxWidth === "string" && pctRe.test(merged.maxWidth.trim()) ? merged.maxWidth.trim() : void 0;
+      if (userSrc.autoWidth === void 0) {
+        if (displayPct && displayPct !== "100%") {
+          merged.autoWidth = false;
+          merged.maxWidth = displayPct;
+        } else {
+          merged.autoWidth = true;
+          merged.maxWidth = "100%";
+        }
+      }
+      base.src = merged;
     }
     return base;
   },
@@ -725,25 +823,37 @@ var Table = createItemComponent({
   name: "Table",
   defaultValues: DEFAULT_VALUES9,
   propMapper: (props) => {
-    const { headers, data, ...rest } = props;
-    if (headers || data) {
+    const { headers, data, columns, rows, ...rest } = props;
+    if (headers || data || typeof columns === "number" || typeof rows === "number") {
       const base = mapSemanticProps(
         rest,
         DEFAULT_VALUES9,
         "Table"
       );
+      const colCount = headers ? headers.length : typeof columns === "number" ? columns : data?.[0]?.length ?? 0;
+      const blankCells = (n) => Array.from({ length: n }, () => ({ text: "", width: 0 }));
       const tableHeaders = headers ? [{ cells: headers.map((text) => ({ text, width: 0 })), height: 0 }] : [];
       const tableRows = data ? data.map((row) => ({
         cells: row.map((text) => ({ text, width: 0 })),
         height: 0
-      })) : [];
+      })) : typeof rows === "number" ? (
+        // No data: build an empty grid sized by `columns` × `rows`.
+        Array.from({ length: rows }, () => ({
+          cells: blankCells(colCount),
+          height: 0
+        }))
+      ) : [];
       base.table = { headers: tableHeaders, rows: tableRows, footers: [] };
+      if (headers || typeof columns === "number") {
+        base.columns = colCount;
+      }
       if (headers) {
-        base.columns = headers.length;
         base.enableHeader = true;
       }
       if (data) {
         base.rows = data.length;
+      } else if (typeof rows === "number") {
+        base.rows = rows;
       }
       return base;
     }
@@ -904,13 +1014,23 @@ ${widths.map(({ value, className }) => `  .no-stack .u-col-${className} { width:
 }`;
   return baseCSS + "\n" + columnCSS + "\n" + responsiveCSS;
 }
+function toContentWidthPx(bodyValues, fallback = 500) {
+  const raw = bodyValues?.contentWidth;
+  if (typeof raw === "number" && Number.isFinite(raw)) return raw;
+  if (typeof raw === "string") {
+    const n = parseInt(raw, 10);
+    if (Number.isFinite(n)) return n;
+  }
+  return fallback;
+}
 function renderRowToHtml(innerHTML, values, bodyValues, mode, cells, collection = "rows") {
   const rowExporter = RowExporters[mode] || RowExporters.web;
   const html = rowExporter(innerHTML, values, bodyValues, {
     collection,
     variant: mode
   });
-  const css = generateGridCSS(cells, mode);
+  const contentWidth = toContentWidthPx(bodyValues);
+  const css = generateGridCSS(cells, mode, contentWidth);
   return css ? `<style>${css}</style>${html}` : html;
 }
 function processChildren(children, cells, bodyValues, rowValues, mode, _config) {
@@ -1008,11 +1128,16 @@ var Row = (props) => {
 };
 Row.displayName = "Row";
 var Row_default = Row;
+var DEFAULT_CONTAINER_PADDING = "10px";
 var DEFAULT_VALUES12 = COLUMN_DEFAULTS;
 function renderColumnToHtml(innerHTML, values, index, cells, bodyValues, rowValues, mode) {
   const columnExporter = ColumnExporters[mode] || ColumnExporters.web;
   return columnExporter(innerHTML, values, index, cells, bodyValues, rowValues);
 }
+function renderContentToHtml(innerHTML, values, bodyValues, mode) {
+  const contentExporter = ContentExporters[mode] || ContentExporters.web;
+  return contentExporter(innerHTML, values, bodyValues, {});
+}
 var Column = (props) => {
   const {
     children,
@@ -1055,10 +1180,22 @@ var Column = (props) => {
             if (rendered && typeof rendered === "object" && rendered.props && rendered.props.dangerouslySetInnerHTML) {
               const componentHTML = rendered.props.dangerouslySetInnerHTML.__html;
               const componentType = child.type;
-              const componentName = componentType?.displayName || componentType?.name || "component";
-              const componentProps = child.props;
-              const containerPadding = componentProps.values?.containerPadding || DEFAULT_VALUES12.padding || "10px";
-              innerHTML += `<div id="u_content_${componentName.toLowerCase()}_${childIndex + 1}" class="u_content_${componentName.toLowerCase()}" style="padding: ${containerPadding};">${componentHTML}</div>`;
+              const componentName = (componentType?.displayName || componentType?.name || "component").toLowerCase();
+              const childProps = child.props;
+              const containerPadding = childProps.containerPadding ?? childProps.values?.containerPadding ?? DEFAULT_CONTAINER_PADDING;
+              const contentValues = {
+                containerPadding,
+                _meta: {
+                  htmlID: `u_content_${componentName}_${childIndex + 1}`,
+                  htmlClassNames: `u_content_${componentName}`
+                }
+              };
+              innerHTML += renderContentToHtml(
+                componentHTML,
+                contentValues,
+                bodyValues,
+                mode
+              );
             } else if (rendered) {
               const name = child.type?.displayName || child.type?.name || "Unknown";
               console.warn(
@@ -1120,7 +1257,13 @@ function renderBodyToHtml(innerHTML, values, mode, previewText) {
     }
   }
   const bodyExporter = BodyExporters[mode] || BodyExporters.web;
-  const raw = mode === "document" ? bodyExporter(finalInnerHtml, values, { type: "" }) : bodyExporter(finalInnerHtml, values, values);
+  const raw = mode === "document" ? bodyExporter(finalInnerHtml, values, { type: "" }) : mode === "email" ? (
+    // The email body exporter reads body context (contentWidth,
+    // contentAlign) from the `bodyValues` field of its 3rd argument.
+    // Passing `values` directly left it undefined, so the Outlook (MSO)
+    // table fell back to 600px regardless of contentWidth.
+    bodyExporter(finalInnerHtml, values, { bodyValues: values })
+  ) : bodyExporter(finalInnerHtml, values, values);
   return raw.replace("min-height: 100vh; ", "").replace("min-height: 100vh;", "");
 }
 var Body = (props) => {
@@ -1128,7 +1271,10 @@ var Body = (props) => {
   const resolvedConfig = { ...DEFAULT_CONFIG, ...configProp };
   const mode = modeProp ?? resolvedConfig.mode ?? "web";
   const _config = { ...resolvedConfig, mode };
-  const values = mapSemanticProps(semanticProps, DEFAULT_VALUES13, "Body");
+  const values = mergeValues(
+    DEFAULT_VALUES13,
+    mapSemanticProps(semanticProps, DEFAULT_VALUES13, "Body")
+  );
   const valuesWithMeta = {
     ...values,
     _meta: {
@@ -1141,7 +1287,10 @@ var Body = (props) => {
   if (children) {
     enrichedChildren = React.Children.map(children, (child) => {
       if (React.isValidElement(child)) {
-        return React.cloneElement(child, { _config });
+        return React.cloneElement(child, {
+          _config,
+          bodyValues: values
+        });
       }
       return child;
     });
@@ -1573,6 +1722,10 @@ function processBody(element, counters) {
   const semanticProps = extractSemanticProps2(element.props);
   const mapped = mapSemanticProps(semanticProps, BODY_DEFAULTS, "Body");
   const values = mergeValues(BODY_DEFAULTS, mapped);
+  const previewText = element.props.previewText;
+  if (previewText !== void 0) {
+    values.preheaderText = previewText;
+  }
   const valuesWithMeta = {
     ...values,
     _meta: {