@unlayer/react-elements 0.1.12 → 0.1.13

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

@@ -466,6 +466,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 +483,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 +498,8 @@ function renderComponent(config) {
     } else {
       const meta = {
         exporterConfig,
-        mergeTagState: cfg.mergeTagState
+        mergeTagState: cfg.mergeTagState,
+        ...metaContext ?? {}
       };
       html = exporter(values, ...args, void 0, meta);
     }
@@ -531,6 +538,7 @@ function createItemComponent(config) {
       cells = [],
       bodyValues = {},
       rowValues = {},
+      columnValues = {},
       _config,
       // Children
       children,
@@ -549,7 +557,7 @@ function createItemComponent(config) {
       index
     );
     const safeBodyValues = {
-      contentWidth: 600,
+      contentWidth: "500px",
       ...bodyValues
     };
     const valuesForExporter = normalizeValuesForExporter(
@@ -563,6 +571,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
     });
@@ -1098,7 +1115,7 @@ var Row = (props) => {
     ...values,
     cells,
     _meta: {
-      htmlID: `u_row_${index + 1}`,
+      htmlID: nextHtmlId(_config, "u_row"),
       htmlClassNames: "u_row",
       ...values._meta || {}
     }
@@ -1160,7 +1177,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 +1193,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_PADDING;
+              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 +1297,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 +1305,7 @@ var Body = (props) => {
   const valuesWithMeta = {
     ...values,
     _meta: {
-      htmlID: `u_body_${index + 1}`,
+      htmlID: nextHtmlId(_config, "u_body"),
       htmlClassNames: "u_body",
       ...values._meta || {}
     }