@unlayer/react-elements 0.1.8 → 0.1.9

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';
@@ -904,13 +904,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 +1018,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 +1070,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 +1147,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 +1161,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 +1177,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;
     });