npm - @unlayer/react-elements - Versions diffs - 0.1.13 → 0.1.15 - Mend

@unlayer/react-elements 0.1.13 → 0.1.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/dist/index.d.cts CHANGED Viewed

@@ -160,7 +160,7 @@ declare const DEFAULT_CONFIG: UnlayerConfig;
  * configurations that match exactly what the Unlayer editor supports.
  *
  * Usage:
- * import { ColumnLayouts } from '@unlayer-internal/shared-elements';
+ * import { ColumnLayouts } from '@unlayer/react-elements';
  * <Row layout={ColumnLayouts.TwoEqual}>
  *   <Column>...</Column>
  *   <Column>...</Column>
@@ -368,7 +368,8 @@ interface ButtonProps extends ItemComponentProps<ButtonSemanticProps> {
  *
  * @example Flat Props (Simple - most common)
  * ```tsx
- * <Button color="white" backgroundColor="#3b82f6" fontSize="16px">
+ * // `href` accepts a plain URL string (the ergonomic form).
+ * <Button href="https://example.com" color="white" backgroundColor="#3b82f6" fontSize="16px">
  *   Click me
  * </Button>
  * ```
@@ -466,6 +467,13 @@ interface HtmlProps extends ItemComponentProps<SemanticProps<HtmlValues>> {
 /**
  * Html - Universal SSR/Client Component for custom HTML with Automatic Semantic Props
  *
+ * ⚠️ Renders the HTML verbatim — it is NOT sanitized by default. Only pass HTML
+ * you trust, and make sure it is valid: notably, an inline SVG inside a `url(...)`
+ * must be URL-encoded, because a raw `"` inside a double-quoted `style="…"`
+ * closes the attribute and the rest leaks out as text. To sanitize (matching the
+ * editor's HTML block, which strips scripts/event handlers), pass a `toSafeHtml`
+ * function via the `UnlayerProvider` config.
+ *
  * @example Flat Props
  * ```tsx
  * <Html html="<div>Custom HTML</div>" />
@@ -578,15 +586,21 @@ interface ParagraphProps extends ItemComponentProps<ParagraphSemanticProps> {
  */
 declare const Paragraph: React$1.FC<ItemComponentProps<ParagraphSemanticProps>>;
-type SocialSemanticProps = SemanticProps<SocialValues> & {
+type SocialSemanticProps = Omit<SemanticProps<SocialValues>, "iconSize" | "spacing"> & {
     /** Social icons shorthand (array of {name, url}) */
     icons?: SocialIcon[];
     /** Icon shape */
     iconType?: "circle" | "rounded" | "squared";
+    /** Icon size in px — a number (34) or px string ("34px"). */
+    iconSize?: SizeInput;
+    /** Gap between icons in px — a number or px string. */
+    spacing?: SizeInput;
 };
-interface SocialProps extends Omit<ItemComponentProps<SemanticProps<SocialValues>>, "icons"> {
+interface SocialProps extends Omit<ItemComponentProps<SemanticProps<SocialValues>>, "icons" | "iconSize" | "spacing"> {
     icons?: SocialIcon[] | SocialValues["icons"];
     iconType?: "circle" | "rounded" | "squared";
+    iconSize?: SizeInput;
+    spacing?: SizeInput;
 }
 /**
  * Social - Renders social-media icon links.
@@ -958,4 +972,4 @@ declare function renderToHtmlParts(element: React__default.ReactElement, config?
 declare function renderRowToJson(element: React__default.ReactElement): DesignRow;
 declare function renderToJson(element: React__default.ReactElement): DesignJSON;
-export { Body, Button, type ButtonProps, Column, type ColumnLayout, ColumnLayouts, DEFAULT_CONFIG, type DesignBody, type DesignColumn, type DesignContent, type DesignJSON, type DesignRow, Divider, type DividerProps, Document, type DocumentProps, Email, type EmailProps, Heading, type HeadingProps, type Href, Html, type HtmlParts, type HtmlProps, type Icons, Image, type ImageProps, type LinkStyle, Menu, type MenuItem, type MenuProps, Page, type PageProps, Paragraph, type ParagraphProps, Row, type RowProps, Social, type SocialIcon, type SocialProps, Table, type TableProps, type TextAlign, type UnlayerConfig, UnlayerProvider, type UnlayerProviderProps, type ValidColumnLayout, Video, type VideoProps, type VideoSource, htmlToTextJson, renderRowToJson, renderToHtml, renderToHtmlParts, renderToJson, renderToPlainText, useUnlayerConfig, validateColumnLayout };
+export { Body, type BorderInput, Button, type ButtonProps, Column, type ColumnLayout, ColumnLayouts, DEFAULT_CONFIG, type DesignBody, type DesignColumn, type DesignContent, type DesignJSON, type DesignRow, Divider, type DividerProps, Document, type DocumentProps, Email, type EmailProps, type FontFamilyInput, type FontWeightInput, Heading, type HeadingLevel, type HeadingProps, type Href, Html, type HtmlParts, type HtmlProps, type Icons, Image, type ImageProps, type ImageSrcInput, type LinkStyle, Menu, type MenuItem, type MenuProps, Page, type PageProps, Paragraph, type ParagraphProps, Row, type RowProps, type SizeInput, Social, type SocialIcon, type SocialProps, Table, type TableProps, type TextAlign, type TextStyleProps, type UnlayerConfig, UnlayerProvider, type UnlayerProviderProps, type ValidColumnLayout, Video, type VideoProps, type VideoSource, htmlToTextJson, renderRowToJson, renderToHtml, renderToHtmlParts, renderToJson, renderToPlainText, useUnlayerConfig, validateColumnLayout };

package/dist/index.d.ts CHANGED Viewed

@@ -160,7 +160,7 @@ declare const DEFAULT_CONFIG: UnlayerConfig;
  * configurations that match exactly what the Unlayer editor supports.
  *
  * Usage:
- * import { ColumnLayouts } from '@unlayer-internal/shared-elements';
+ * import { ColumnLayouts } from '@unlayer/react-elements';
  * <Row layout={ColumnLayouts.TwoEqual}>
  *   <Column>...</Column>
  *   <Column>...</Column>
@@ -368,7 +368,8 @@ interface ButtonProps extends ItemComponentProps<ButtonSemanticProps> {
  *
  * @example Flat Props (Simple - most common)
  * ```tsx
- * <Button color="white" backgroundColor="#3b82f6" fontSize="16px">
+ * // `href` accepts a plain URL string (the ergonomic form).
+ * <Button href="https://example.com" color="white" backgroundColor="#3b82f6" fontSize="16px">
  *   Click me
  * </Button>
  * ```
@@ -466,6 +467,13 @@ interface HtmlProps extends ItemComponentProps<SemanticProps<HtmlValues>> {
 /**
  * Html - Universal SSR/Client Component for custom HTML with Automatic Semantic Props
  *
+ * ⚠️ Renders the HTML verbatim — it is NOT sanitized by default. Only pass HTML
+ * you trust, and make sure it is valid: notably, an inline SVG inside a `url(...)`
+ * must be URL-encoded, because a raw `"` inside a double-quoted `style="…"`
+ * closes the attribute and the rest leaks out as text. To sanitize (matching the
+ * editor's HTML block, which strips scripts/event handlers), pass a `toSafeHtml`
+ * function via the `UnlayerProvider` config.
+ *
  * @example Flat Props
  * ```tsx
  * <Html html="<div>Custom HTML</div>" />
@@ -578,15 +586,21 @@ interface ParagraphProps extends ItemComponentProps<ParagraphSemanticProps> {
  */
 declare const Paragraph: React$1.FC<ItemComponentProps<ParagraphSemanticProps>>;
-type SocialSemanticProps = SemanticProps<SocialValues> & {
+type SocialSemanticProps = Omit<SemanticProps<SocialValues>, "iconSize" | "spacing"> & {
     /** Social icons shorthand (array of {name, url}) */
     icons?: SocialIcon[];
     /** Icon shape */
     iconType?: "circle" | "rounded" | "squared";
+    /** Icon size in px — a number (34) or px string ("34px"). */
+    iconSize?: SizeInput;
+    /** Gap between icons in px — a number or px string. */
+    spacing?: SizeInput;
 };
-interface SocialProps extends Omit<ItemComponentProps<SemanticProps<SocialValues>>, "icons"> {
+interface SocialProps extends Omit<ItemComponentProps<SemanticProps<SocialValues>>, "icons" | "iconSize" | "spacing"> {
     icons?: SocialIcon[] | SocialValues["icons"];
     iconType?: "circle" | "rounded" | "squared";
+    iconSize?: SizeInput;
+    spacing?: SizeInput;
 }
 /**
  * Social - Renders social-media icon links.
@@ -958,4 +972,4 @@ declare function renderToHtmlParts(element: React__default.ReactElement, config?
 declare function renderRowToJson(element: React__default.ReactElement): DesignRow;
 declare function renderToJson(element: React__default.ReactElement): DesignJSON;
-export { Body, Button, type ButtonProps, Column, type ColumnLayout, ColumnLayouts, DEFAULT_CONFIG, type DesignBody, type DesignColumn, type DesignContent, type DesignJSON, type DesignRow, Divider, type DividerProps, Document, type DocumentProps, Email, type EmailProps, Heading, type HeadingProps, type Href, Html, type HtmlParts, type HtmlProps, type Icons, Image, type ImageProps, type LinkStyle, Menu, type MenuItem, type MenuProps, Page, type PageProps, Paragraph, type ParagraphProps, Row, type RowProps, Social, type SocialIcon, type SocialProps, Table, type TableProps, type TextAlign, type UnlayerConfig, UnlayerProvider, type UnlayerProviderProps, type ValidColumnLayout, Video, type VideoProps, type VideoSource, htmlToTextJson, renderRowToJson, renderToHtml, renderToHtmlParts, renderToJson, renderToPlainText, useUnlayerConfig, validateColumnLayout };
+export { Body, type BorderInput, Button, type ButtonProps, Column, type ColumnLayout, ColumnLayouts, DEFAULT_CONFIG, type DesignBody, type DesignColumn, type DesignContent, type DesignJSON, type DesignRow, Divider, type DividerProps, Document, type DocumentProps, Email, type EmailProps, type FontFamilyInput, type FontWeightInput, Heading, type HeadingLevel, type HeadingProps, type Href, Html, type HtmlParts, type HtmlProps, type Icons, Image, type ImageProps, type ImageSrcInput, type LinkStyle, Menu, type MenuItem, type MenuProps, Page, type PageProps, Paragraph, type ParagraphProps, Row, type RowProps, type SizeInput, Social, type SocialIcon, type SocialProps, Table, type TableProps, type TextAlign, type TextStyleProps, type UnlayerConfig, UnlayerProvider, type UnlayerProviderProps, type ValidColumnLayout, Video, type VideoProps, type VideoSource, htmlToTextJson, renderRowToJson, renderToHtml, renderToHtmlParts, renderToJson, renderToPlainText, useUnlayerConfig, validateColumnLayout };

package/dist/index.js CHANGED Viewed

@@ -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",
@@ -264,14 +339,27 @@ function mapSemanticProps(props, defaultValues, componentType) {
     delete userProps.html;
     delete result.html;
   }
-  for (const key of ["href", "action"]) {
-    const v = userProps[key];
+  const canonicalizeLink = (v) => {
     if (typeof v === "string") {
-      userProps[key] = {
-        name: "web",
-        values: { href: v, target: "_blank" }
-      };
+      return { name: "web", values: { href: v, target: "_blank" } };
+    }
+    if (v && typeof v === "object" && "name" in v && v.attrs && typeof v.attrs === "object") {
+      const { href: attrsHref, target: attrsTarget, ...customAttrs } = v.attrs;
+      if (attrsHref !== void 0 || attrsTarget !== void 0) {
+        const linkValues = { ...v.values };
+        if (!linkValues.href && attrsHref !== void 0) linkValues.href = attrsHref;
+        if (!linkValues.target && attrsTarget !== void 0) linkValues.target = attrsTarget;
+        const next = { ...v, values: linkValues };
+        if (Object.keys(customAttrs).length) next.attrs = customAttrs;
+        else delete next.attrs;
+        return next;
+      }
     }
+    return v;
+  };
+  for (const key of ["href", "action"]) {
+    if (userProps[key] !== void 0) userProps[key] = canonicalizeLink(userProps[key]);
+    if (result[key] !== void 0) result[key] = canonicalizeLink(result[key]);
   }
   normalizeCssProps(userProps);
   const nestedGroups = analyzeNestedStructure(defaultValues);
@@ -331,12 +419,14 @@ function normalizeLinkValue(value) {
   if (typeof value !== "object") return void 0;
   const v = value;
   if ("url" in v) return v;
-  if ("name" in v && v.values && typeof v.values === "object") {
-    const inner = v.values;
+  if ("name" in v && (v.values && typeof v.values === "object" || v.attrs && typeof v.attrs === "object")) {
+    const inner = v.values && typeof v.values === "object" ? v.values : {};
+    const attrs = v.attrs && typeof v.attrs === "object" ? v.attrs : {};
+    const { href: attrsHref, target: attrsTarget, ...customAttrs } = attrs;
     return {
-      url: inner.href ?? "",
-      target: inner.target ?? "_blank",
-      ...v.attrs ?? {}
+      url: inner.href || attrsHref || "",
+      target: inner.target || attrsTarget || "_blank",
+      ...customAttrs
     };
   }
   return void 0;
@@ -564,6 +654,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,
@@ -676,11 +778,11 @@ var Html = createItemComponent({
   exporters: HtmlExporters
 });
 var Html_default = Html;
+var { height: _placeholderHeight, ...defaultSrc } = ImageDefaults.src;
 var DEFAULT_VALUES5 = {
   ...ImageDefaults,
-  // Override src with autoWidth/maxWidth for responsive rendering
   src: {
-    ...ImageDefaults.src,
+    ...defaultSrc,
     autoWidth: true,
     maxWidth: "100%"
   }
@@ -689,7 +791,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 +811,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, userSrc.width]) {
+        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%";
@@ -795,6 +915,17 @@ var Social = createItemComponent({
   defaultValues: DEFAULT_VALUES8,
   propMapper: (props) => {
     const { icons, iconType, ...rest } = props;
+    const coerceSizes = (base) => {
+      for (const key of ["iconSize", "spacing"]) {
+        const v = base[key];
+        if (typeof v === "string") {
+          const m = /^(\d+(?:\.\d+)?)(?:px)?$/.exec(v.trim());
+          if (m) base[key] = parseFloat(m[1]);
+          else delete base[key];
+        }
+      }
+      return base;
+    };
     if (Array.isArray(icons)) {
       const mapped = icons.map((icon) => ({
         name: icon.name,
@@ -809,7 +940,7 @@ var Social = createItemComponent({
         iconType: iconType ?? base.icons?.iconType ?? "circle",
         icons: mapped
       };
-      return base;
+      return coerceSizes(base);
     }
     if (iconType !== void 0) {
       const base = mapSemanticProps(
@@ -818,12 +949,10 @@ var Social = createItemComponent({
         "Social"
       );
       base.icons = { ...DEFAULT_ICONS, ...base.icons, iconType };
-      return base;
+      return coerceSizes(base);
     }
-    return mapSemanticProps(
-      props,
-      DEFAULT_VALUES8,
-      "Social"
+    return coerceSizes(
+      mapSemanticProps(props, DEFAULT_VALUES8, "Social")
     );
   },
   displayName: "Social",
@@ -1032,13 +1161,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 +1268,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 +1330,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 +1785,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 +1819,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 +1845,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 +1863,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 +1889,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 +1932,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.`