@unlayer/react-elements 0.1.12 → 0.1.13

package/dist/index.cjs

@@ -473,6 +473,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,
@@ -484,7 +490,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 = {
@@ -499,7 +505,8 @@ function renderComponent(config) {
     } else {
       const meta = {
         exporterConfig,
-        mergeTagState: cfg.mergeTagState
+        mergeTagState: cfg.mergeTagState,
+        ...metaContext ?? {}
       };
       html = exporter(values, ...args, void 0, meta);
     }
@@ -538,6 +545,7 @@ function createItemComponent(config) {
       cells = [],
       bodyValues = {},
       rowValues = {},
+      columnValues = {},
       _config,
       // Children
       children,
@@ -556,7 +564,7 @@ function createItemComponent(config) {
       index
     );
     const safeBodyValues = {
-      contentWidth: 600,
+      contentWidth: "500px",
       ...bodyValues
     };
     const valuesForExporter = normalizeValuesForExporter(
@@ -570,6 +578,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
     });
@@ -1105,7 +1122,7 @@ var Row = (props) => {
     ...values,
     cells,
     _meta: {
-      htmlID: `u_row_${index + 1}`,
+      htmlID: nextHtmlId(_config, "u_row"),
       htmlClassNames: "u_row",
       ...values._meta || {}
     }
@@ -1167,7 +1184,7 @@ var Column = (props) => {
   const valuesWithMeta = {
     ...values,
     _meta: {
-      htmlID: `u_column_${index + 1}`,
+      htmlID: nextHtmlId(_config, "u_column"),
       htmlClassNames: "u_column",
       ...values._meta || {}
     }
@@ -1183,17 +1200,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}`
                 }
               };
@@ -1278,6 +1304,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")
@@ -1285,7 +1312,7 @@ var Body = (props) => {
   const valuesWithMeta = {
     ...values,
     _meta: {
-      htmlID: `u_body_${index + 1}`,
+      htmlID: nextHtmlId(_config, "u_body"),
       htmlClassNames: "u_body",
       ...values._meta || {}
     }