@unlayer/react-elements 0.1.12 → 0.1.14

package/dist/index.d.cts

@@ -308,11 +308,16 @@ interface BaseItemComponentProps {
     className?: string;
     style?: React__default.CSSProperties;
     mode?: RenderMode;
+    /** Padding of the content wrapper around this item — a number (→ px) or a CSS
+     *  string ("10px", "16px 24px"). Applied by the containing Column. */
+    containerPadding?: SizeInput;
     index?: number;
     colIndex?: number;
     cells?: any[];
     bodyValues?: any;
     rowValues?: any;
+    /** @internal - this column's values, threaded by Column for width-aware exporters */
+    columnValues?: any;
     /** @internal - Unlayer config threaded from UnlayerProvider */
     _config?: UnlayerConfig;
 }

package/dist/index.d.ts

@@ -308,11 +308,16 @@ interface BaseItemComponentProps {
     className?: string;
     style?: React__default.CSSProperties;
     mode?: RenderMode;
+    /** Padding of the content wrapper around this item — a number (→ px) or a CSS
+     *  string ("10px", "16px 24px"). Applied by the containing Column. */
+    containerPadding?: SizeInput;
     index?: number;
     colIndex?: number;
     cells?: any[];
     bodyValues?: any;
     rowValues?: any;
+    /** @internal - this column's values, threaded by Column for width-aware exporters */
+    columnValues?: any;
     /** @internal - Unlayer config threaded from UnlayerProvider */
     _config?: UnlayerConfig;
 }

package/dist/index.js

@@ -5,6 +5,81 @@ import ReactDOMServer, { renderToStaticMarkup } from 'react-dom/server';
 
 // src/components/Button.tsx
 
+// src/utils/image-sizing.ts
+function toPx(value) {
+  if (typeof value === "number") return Number.isFinite(value) ? value : void 0;
+  if (typeof value !== "string") return void 0;
+  const m = /^(\d+(?:\.\d+)?)(?:px)?$/.exec(value.trim());
+  return m ? parseFloat(m[1]) : void 0;
+}
+function edges(value) {
+  if (value == null) return { left: 0, right: 0 };
+  if (typeof value === "number") return { left: value, right: value };
+  const parts = String(value).trim().split(/\s+/).map((p) => parseFloat(p) || 0);
+  if (parts.length === 1) return { left: parts[0], right: parts[0] };
+  if (parts.length === 2 || parts.length === 3)
+    return { left: parts[1], right: parts[1] };
+  return { left: parts[3] || 0, right: parts[1] || 0 };
+}
+function borderEdges(border) {
+  if (!border || typeof border !== "object") return { left: 0, right: 0 };
+  const b = border;
+  const width = (v) => parseFloat(`${v ?? ""}`) || 0;
+  return {
+    left: width(b.borderLeftWidth),
+    right: width(b.borderRightWidth)
+  };
+}
+function fixedContentWidth(contentWidth) {
+  if (typeof contentWidth === "number")
+    return Number.isFinite(contentWidth) ? contentWidth : void 0;
+  if (typeof contentWidth === "string") {
+    const m = /^(\d+(?:\.\d+)?)(?:px)?$/.exec(contentWidth.trim());
+    if (m) return parseFloat(m[1]);
+  }
+  return void 0;
+}
+var FALLBACK_BODY_CONTENT_WIDTH = 500;
+var DEFAULT_CONTAINER_PADDING = "10px";
+function bodyContentWidthPx(contentWidth, fallback = FALLBACK_BODY_CONTENT_WIDTH) {
+  return fixedContentWidth(contentWidth) ?? fallback;
+}
+function contentSlotWidth(ctx) {
+  const { bodyValues = {}, rowValues = {}, columnValues = {} } = ctx;
+  const rowCells = ctx.rowCells && ctx.rowCells.length ? ctx.rowCells : [1];
+  const columnIndex = ctx.columnIndex ?? 0;
+  const bodyWidth = bodyContentWidthPx(bodyValues.contentWidth);
+  const bp = edges(bodyValues.padding);
+  const bb = borderEdges(bodyValues.border);
+  const bodyAvail = bodyWidth - bp.left - bp.right - bb.left - bb.right;
+  const rp = edges(rowValues.padding);
+  const rb = borderEdges(rowValues.border);
+  const rowAvail = bodyAvail - rp.left - rp.right - rb.left - rb.right;
+  const rowSpan = rowCells.reduce((a, b) => a + b, 0) || 1;
+  const colSpan = rowCells[columnIndex] || 1;
+  const colWidth = colSpan / rowSpan * rowAvail;
+  const cp = edges(columnValues.padding);
+  const cb = borderEdges(columnValues.border);
+  const colAvail = colWidth - cp.left - cp.right - cb.left - cb.right;
+  const ip = edges(ctx.containerPadding ?? DEFAULT_CONTAINER_PADDING);
+  return colAvail - ip.left - ip.right;
+}
+var PERCENT = /^\d+(?:\.\d+)?%$/;
+function round2(n) {
+  return Math.round(n * 100) / 100;
+}
+function pinImageSrc(src, availableWidth) {
+  if (!src || typeof src !== "object") return src;
+  if (src.autoWidth !== false) return src;
+  const maxWidth = src.maxWidth;
+  if (typeof maxWidth === "string" && PERCENT.test(maxWidth.trim())) return src;
+  const pinPx = toPx(maxWidth);
+  if (pinPx == null) return src;
+  const avail = availableWidth && availableWidth > 0 ? availableWidth : void 0;
+  const pct = avail ? pinPx >= avail ? 100 : round2(pinPx / avail * 100) : 100;
+  return { ...src, autoWidth: false, maxWidth: `${pct}%` };
+}
+
 // ../shared/dist/index.js
 var DEFAULT_CONFIG = {
   cdnBaseUrl: "https://cdn.tools.unlayer.com",
@@ -466,6 +541,12 @@ var ErrorFallback = ({
     ]
   }
 ) });
+function nextHtmlId(config, prefix) {
+  if (!config) return `${prefix}_1`;
+  const ids = config.__ids ?? (config.__ids = {});
+  ids[prefix] = (ids[prefix] || 0) + 1;
+  return `${prefix}_${ids[prefix]}`;
+}
 function ensureMeta(values, type, index = 0) {
   return {
     ...values,
@@ -477,7 +558,7 @@ function ensureMeta(values, type, index = 0) {
   };
 }
 function renderComponent(config) {
-  const { type, values, className, style, args = [], innerHTML, _config, exporter } = config;
+  const { type, values, className, style, args = [], innerHTML, _config, exporter, metaContext } = config;
   try {
     const cfg = _config ?? DEFAULT_CONFIG;
     const exporterConfig = {
@@ -492,7 +573,8 @@ function renderComponent(config) {
     } else {
       const meta = {
         exporterConfig,
-        mergeTagState: cfg.mergeTagState
+        mergeTagState: cfg.mergeTagState,
+        ...metaContext ?? {}
       };
       html = exporter(values, ...args, void 0, meta);
     }
@@ -531,6 +613,7 @@ function createItemComponent(config) {
       cells = [],
       bodyValues = {},
       rowValues = {},
+      columnValues = {},
       _config,
       // Children
       children,
@@ -549,13 +632,25 @@ function createItemComponent(config) {
       index
     );
     const safeBodyValues = {
-      contentWidth: 600,
+      contentWidth: "500px",
       ...bodyValues
     };
     const valuesForExporter = normalizeValuesForExporter(
       valuesWithMeta,
       config.name
     );
+    const exportSrc = valuesForExporter.src;
+    if (exportSrc && typeof exportSrc === "object" && exportSrc.autoWidth === false) {
+      const availableWidth = contentSlotWidth({
+        bodyValues: safeBodyValues,
+        rowValues,
+        rowCells: cells,
+        columnIndex: colIndex,
+        columnValues,
+        containerPadding: props.containerPadding ?? props.values?.containerPadding
+      });
+      valuesForExporter.src = pinImageSrc(exportSrc, availableWidth);
+    }
     const exporter = config.exporters[mode] || config.exporters.web;
     return renderComponent({
       type: config.name,
@@ -563,6 +658,15 @@ function createItemComponent(config) {
       className,
       style,
       args: [index, colIndex, cells, safeBodyValues, rowValues],
+      // The 8th arg the exporters actually read: column/body context for
+      // width-aware rendering (Image's available-width calc), mirroring the editor.
+      metaContext: {
+        columnIndex: colIndex,
+        columnValues,
+        rowCells: cells,
+        rowValues,
+        bodyValues: safeBodyValues
+      },
       _config,
       exporter
     });
@@ -672,7 +776,7 @@ var Image = createItemComponent({
   name: "Image",
   defaultValues: DEFAULT_VALUES5,
   propMapper: (props) => {
-    const { alt, src, ...rest } = props;
+    const { alt, src, width: widthProp, maxWidth: maxWidthProp, ...rest } = props;
     const restValues = rest.values;
     const normalizedRest = restValues && typeof restValues.src === "string" ? { ...rest, values: { ...restValues, src: { url: restValues.src } } } : rest;
     const base = mapSemanticProps(
@@ -692,21 +796,39 @@ var Image = createItemComponent({
       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 asPercent = (v) => typeof v === "string" && pctRe.test(v.trim()) ? v.trim() : void 0;
+      const asPx = (v) => {
+        if (typeof v === "number" && Number.isFinite(v)) return v;
+        if (typeof v === "string") {
+          const t = v.trim();
+          if (pctRe.test(t)) return void 0;
+          const m = /^(\d+(?:\.\d+)?)(?:px)?$/.exec(t);
+          if (m) return parseFloat(m[1]);
+        }
+        return void 0;
+      };
+      let displayPct;
+      let displayPx;
+      for (const candidate of [widthProp, maxWidthProp, userSrc.maxWidth]) {
+        if (candidate === void 0) continue;
+        const pct = asPercent(candidate);
+        if (pct) {
+          displayPct = pct;
+          break;
+        }
+        const px = asPx(candidate);
+        if (px != null) {
+          displayPx = px;
+          break;
         }
       }
-      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 if (displayPx != null) {
+          merged.autoWidth = false;
+          merged.maxWidth = displayPx;
         } else {
           merged.autoWidth = true;
           merged.maxWidth = "100%";
@@ -1015,13 +1137,7 @@ ${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;
+  return bodyContentWidthPx(bodyValues?.contentWidth, fallback);
 }
 function renderRowToHtml(innerHTML, values, bodyValues, mode, cells, collection = "rows") {
   const rowExporter = RowExporters[mode] || RowExporters.web;
@@ -1098,7 +1214,7 @@ var Row = (props) => {
     ...values,
     cells,
     _meta: {
-      htmlID: `u_row_${index + 1}`,
+      htmlID: nextHtmlId(_config, "u_row"),
       htmlClassNames: "u_row",
       ...values._meta || {}
     }
@@ -1128,7 +1244,7 @@ var Row = (props) => {
 };
 Row.displayName = "Row";
 var Row_default = Row;
-var DEFAULT_CONTAINER_PADDING = "10px";
+var DEFAULT_CONTAINER_PADDING2 = "10px";
 var DEFAULT_VALUES12 = COLUMN_DEFAULTS;
 function renderColumnToHtml(innerHTML, values, index, cells, bodyValues, rowValues, mode) {
   const columnExporter = ColumnExporters[mode] || ColumnExporters.web;
@@ -1160,7 +1276,7 @@ var Column = (props) => {
   const valuesWithMeta = {
     ...values,
     _meta: {
-      htmlID: `u_column_${index + 1}`,
+      htmlID: nextHtmlId(_config, "u_column"),
       htmlClassNames: "u_column",
       ...values._meta || {}
     }
@@ -1176,17 +1292,26 @@ var Column = (props) => {
           if (typeof child.type === "function") {
             const ComponentType = child.type;
             const renderFn = ComponentType[UNLAYER_RENDER_KEY] || ComponentType;
-            const rendered = renderFn({ ...child.props, _config });
+            const rendered = renderFn({
+              ...child.props,
+              _config,
+              colIndex: index,
+              cells,
+              bodyValues,
+              rowValues,
+              columnValues: valuesWithMeta
+            });
             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").toLowerCase();
               const childProps = child.props;
-              const containerPadding = childProps.containerPadding ?? childProps.values?.containerPadding ?? DEFAULT_CONTAINER_PADDING;
+              const rawContainerPadding = childProps.containerPadding ?? childProps.values?.containerPadding ?? DEFAULT_CONTAINER_PADDING2;
+              const containerPadding = typeof rawContainerPadding === "number" ? `${rawContainerPadding}px` : rawContainerPadding;
               const contentValues = {
                 containerPadding,
                 _meta: {
-                  htmlID: `u_content_${componentName}_${childIndex + 1}`,
+                  htmlID: nextHtmlId(_config, `u_content_${componentName}`),
                   htmlClassNames: `u_content_${componentName}`
                 }
               };
@@ -1271,6 +1396,7 @@ var Body = (props) => {
   const resolvedConfig = { ...DEFAULT_CONFIG, ...configProp };
   const mode = modeProp ?? resolvedConfig.mode ?? "web";
   const _config = { ...resolvedConfig, mode };
+  _config.__ids = {};
   const values = mergeValues(
     DEFAULT_VALUES13,
     mapSemanticProps(semanticProps, DEFAULT_VALUES13, "Body")
@@ -1278,7 +1404,7 @@ var Body = (props) => {
   const valuesWithMeta = {
     ...values,
     _meta: {
-      htmlID: `u_body_${index + 1}`,
+      htmlID: nextHtmlId(_config, "u_body"),
       htmlClassNames: "u_body",
       ...values._meta || {}
     }
@@ -1635,7 +1761,7 @@ function extractTextFromTextJson(textJson) {
     return "";
   }
 }
-function processItem(element, counters) {
+function processItem(element, counters, layout = {}) {
   const componentType = element.type;
   const config = componentType[UNLAYER_CONFIG_KEY];
   if (!config) {
@@ -1669,9 +1795,17 @@ function processItem(element, counters) {
     deletable: true,
     hideable: true
   };
+  const itemSrc = values.src;
+  if (itemSrc && typeof itemSrc === "object" && itemSrc.autoWidth === false) {
+    const availableWidth = contentSlotWidth({
+      ...layout,
+      containerPadding: values.containerPadding
+    });
+    values.src = pinImageSrc(itemSrc, availableWidth);
+  }
   return { type: contentType, values };
 }
-function processColumn(element, counters) {
+function processColumn(element, counters, layout = {}) {
   const count = nextCounter2(counters, "u_column");
   const id = makeId("u_column", count);
   const semanticProps = extractSemanticProps2(element.props);
@@ -1687,12 +1821,13 @@ function processColumn(element, counters) {
   };
   const contents = [];
   const children = collectChildren2(element.props.children);
+  const itemLayout = { ...layout, columnValues: valuesWithMeta };
   for (const child of children) {
-    contents.push(processItem(child, counters));
+    contents.push(processItem(child, counters, itemLayout));
   }
   return { contents, values: valuesWithMeta };
 }
-function processRow(element, counters) {
+function processRow(element, counters, parentLayout = {}) {
   const count = nextCounter2(counters, "u_row");
   const id = makeId("u_row", count);
   const { layout, cells: propsCells } = element.props;
@@ -1704,7 +1839,9 @@ function processRow(element, counters) {
   } else {
     const columnCount = Math.max(
       1,
-      collectChildren2(element.props.children).length
+      collectChildren2(element.props.children).filter(
+        (child) => getDisplayName2(child) === "Column"
+      ).length
     );
     cells = Array(columnCount).fill(1);
   }
@@ -1728,10 +1865,19 @@ function processRow(element, counters) {
   };
   const columns = [];
   const children = collectChildren2(element.props.children);
+  const columnLayout = {
+    bodyValues: parentLayout.bodyValues,
+    rowValues: valuesWithMeta,
+    rowCells: cells
+  };
+  let columnIndex = 0;
   for (const child of children) {
     const name = getDisplayName2(child);
     if (name === "Column") {
-      columns.push(processColumn(child, counters));
+      columns.push(
+        processColumn(child, counters, { ...columnLayout, columnIndex })
+      );
+      columnIndex += 1;
     } else {
       console.warn(
         `[Unlayer] renderToJson: <${name}> is not a valid Row child. Only <Column> is allowed.`
@@ -1762,7 +1908,7 @@ function processBody(element, counters) {
   for (const child of children) {
     const name = getDisplayName2(child);
     if (name === "Row") {
-      rows.push(processRow(child, counters));
+      rows.push(processRow(child, counters, { bodyValues: valuesWithMeta }));
     } else {
       console.warn(
         `[Unlayer] renderToJson: <${name}> is not a valid Body child. Only <Row> is allowed.`