@unlayer/react-elements 0.1.13 → 0.1.14

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",
@@ -564,6 +639,18 @@ function createItemComponent(config) {
       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,
@@ -689,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(
@@ -709,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%";
@@ -1032,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;
@@ -1145,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;
@@ -1207,7 +1306,7 @@ var Column = (props) => {
               const componentType = child.type;
               const componentName = (componentType?.displayName || componentType?.name || "component").toLowerCase();
               const childProps = child.props;
-              const rawContainerPadding = 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,
@@ -1662,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) {
@@ -1696,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);
@@ -1714,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;
@@ -1731,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);
   }
@@ -1755,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.`
@@ -1789,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.`