@dotcms/react 1.2.6-next.3 → 1.3.0-next.2

package/lib/next/components/DotCMSBlockEditorRenderer/components/blocks/Image.esm.js

@@ -11,11 +11,38 @@ const DotCMSImage = ({
 }) => {
   const {
     src,
-    alt
+    alt,
+    textWrap,
+    textAlign
   } = node.attrs;
-  return jsx("img", {
-    alt: alt,
-    src: src
+  let wrapperStyle = {};
+  if (textWrap === 'left') {
+    wrapperStyle = {
+      float: 'left',
+      width: '50%',
+      margin: '0 1rem 1rem 0'
+    };
+  } else if (textWrap === 'right') {
+    wrapperStyle = {
+      float: 'right',
+      width: '50%',
+      margin: '0 0 1rem 1rem'
+    };
+  } else if (textAlign) {
+    wrapperStyle = {
+      textAlign: textAlign
+    };
+  }
+  return jsx("figure", {
+    style: wrapperStyle,
+    children: jsx("img", {
+      alt: alt,
+      src: src,
+      style: textWrap ? {
+        maxWidth: '100%',
+        height: 'auto'
+      } : undefined
+    })
   });
 };
 

package/lib/next/utils/buildSlots.esm.js

@@ -5,21 +5,24 @@
  * (e.g., components that fetch data) within a DotCMS page layout. Pass the
  * resulting map to `DotCMSLayoutBody` via the `slots` prop.
  *
+ * Each component is awaited, so the returned record contains resolved `ReactNode`
+ * values — safe to pass as props to client components without `React.use()`.
+ *
  * @public
  * @param containers - The containers map from `pageAsset.containers`
  * @param serverComponents - A map of content type names to async server components
- * @returns A record mapping contentlet identifiers to pre-rendered ReactNodes
+ * @returns A promise resolving to a record mapping contentlet identifiers to pre-rendered ReactNodes
  *
  * @example
  * ```tsx
- * const slots = buildSlots(pageContent.pageAsset.containers, {
+ * const slots = await buildSlots(pageContent.pageAsset.containers, {
  *   BlogList: BlogListContainer,
  * });
  *
  * <DotCMSLayoutBody page={pageAsset} components={pageComponents} slots={slots} />
  * ```
  */
-function buildSlots(containers, serverComponents) {
+async function buildSlots(containers, serverComponents) {
   const slots = {};
   for (const {
     contentlets
@@ -28,7 +31,7 @@ function buildSlots(containers, serverComponents) {
       for (const contentlet of contentletList) {
         const Component = serverComponents[contentlet.contentType];
         if (Component && contentlet.identifier) {
-          slots[contentlet.identifier] = Component(contentlet);
+          slots[contentlet.identifier] = await Component(contentlet);
         }
       }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dotcms/react",
-  "version": "1.2.6-next.3",
+  "version": "1.3.0-next.2",
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18"

package/src/lib/next/components/DotCMSLayoutBody/DotCMSLayoutBody.d.ts

@@ -22,7 +22,7 @@ export interface DotCMSLayoutBodyProps<TContentlet extends DotCMSBasicContentlet
      * <DotCMSLayoutBody page={pageAsset} components={pageComponents} slots={slots} />
      * ```
      */
-    slots?: Record<string, ReactNode | Promise<ReactNode>>;
+    slots?: Record<string, ReactNode>;
 }
 /**
  * DotCMSLayoutBody component renders the layout body for a DotCMS page.

package/src/lib/next/components/DotCMSLayoutBody/DotCMSPageProvider.d.ts

@@ -4,7 +4,7 @@ interface DotCMSPageProviderProps {
     page: DotCMSPageAsset;
     components: Record<string, React.ComponentType<any>>;
     mode: DotCMSPageRendererMode;
-    slots: Record<string, ReactNode | Promise<ReactNode>>;
+    slots?: Record<string, ReactNode>;
     children: ReactNode;
 }
 /**

package/src/lib/next/contexts/DotCMSPageContext.d.ts

@@ -8,13 +8,13 @@ import { DotCMSBasicContentlet, DotCMSPageAsset, DotCMSPageRendererMode } from '
  * @property {DotCMSPageAsset} pageAsset - The DotCMS page asset
  * @property {RendererMode} mode - The renderer mode
  * @property {Record<string, React.ComponentType<DotCMSContentlet>>} userComponents - The user components
- * @property {Record<string, ReactNode | Promise<ReactNode>>} [slots] - Pre-rendered server component nodes keyed by contentlet identifier
+ * @property {Record<string, ReactNode>} [slots] - Pre-rendered server component nodes keyed by contentlet identifier
  */
 export interface DotCMSPageContextProps {
     pageAsset: DotCMSPageAsset;
     mode: DotCMSPageRendererMode;
     userComponents: Record<string, React.ComponentType<DotCMSBasicContentlet>>;
-    slots?: Record<string, ReactNode | Promise<ReactNode>>;
+    slots?: Record<string, ReactNode>;
 }
 /**
  * The `PageContext` is a React context that provides access to the DotCMS page context.

package/src/lib/next/utils/buildSlots.d.ts

@@ -7,18 +7,21 @@ import { DotCMSBasicContentlet, DotCMSPageAssetContainers } from '@dotcms/types'
  * (e.g., components that fetch data) within a DotCMS page layout. Pass the
  * resulting map to `DotCMSLayoutBody` via the `slots` prop.
  *
+ * Each component is awaited, so the returned record contains resolved `ReactNode`
+ * values — safe to pass as props to client components without `React.use()`.
+ *
  * @public
  * @param containers - The containers map from `pageAsset.containers`
  * @param serverComponents - A map of content type names to async server components
- * @returns A record mapping contentlet identifiers to pre-rendered ReactNodes
+ * @returns A promise resolving to a record mapping contentlet identifiers to pre-rendered ReactNodes
  *
  * @example
  * ```tsx
- * const slots = buildSlots(pageContent.pageAsset.containers, {
+ * const slots = await buildSlots(pageContent.pageAsset.containers, {
  *   BlogList: BlogListContainer,
  * });
  *
  * <DotCMSLayoutBody page={pageAsset} components={pageComponents} slots={slots} />
  * ```
  */
-export declare function buildSlots(containers: DotCMSPageAssetContainers, serverComponents: Record<string, (props: DotCMSBasicContentlet) => ReactNode | Promise<ReactNode>>): Record<string, ReactNode | Promise<ReactNode>>;
+export declare function buildSlots(containers: DotCMSPageAssetContainers, serverComponents: Record<string, (props: DotCMSBasicContentlet) => ReactNode | Promise<ReactNode>>): Promise<Record<string, ReactNode>>;