@remkoj/optimizely-cms-react 6.0.0-pre8 → 6.0.0-rc.1

package/dist/components/cms-content-area/types.d.ts

@@ -53,31 +53,31 @@ export type ItemsProperty<T extends ElementType> = "children" extends ElementChi
 export type PassthroughProps<T extends ElementType, ParentKeys extends string | number | symbol> = Omit<ElementProps<T>, ParentKeys | ReservedKeys | ElementChildrenProps<T>>;
 export type CmsContentAreaCoreProps = PropsWithOptionalContext<{
     /**
-     * The content area items to be rendered
+    * Content area items to render.
+    *
+    * Each item should contain `_metadata` with at least a key and content type data.
      */
     items: (ContentAreaItemDefinition | null | undefined)[] | undefined | null;
     /**
-     * Whether or not a suspense must be applied around each item of the
-     * ContentArea to allow dynamic content within the ContentArea items.
+      * Whether a suspense boundary is applied around each rendered content area item.
      */
     useSuspense?: boolean;
     /**
-     * The fallback component to use as suspense boundary
+      * Fallback UI rendered while suspense-wrapped items are loading.
      */
     fallback?: SuspenseProps['fallback'];
     /**
-     * The fieldname of this content area, provide this to allow in-context
-     * editing
+      * Name of the CMS field represented by this content area.
+      *
+      * Set this to enable in-context edit markers for the content area container.
      */
     fieldName?: string;
     /**
-     * If set to true, there will be no wrapping element around the
-     * items in the Content Area. Setting this to `true` ignores
+      * If `true`, no container wrapper is rendered around the full list of items.
      */
     noWrapper?: boolean;
     /**
-     * Allows requesting of specific template variant, to accomodate different
-     * renditions, without changing the main path of the component.
+     * Optional template variant forwarded to each `CmsContent` item render.
      */
     variant?: string;
 }>;
@@ -117,6 +117,47 @@ export type CmsContentAreaItemWrapperProps<CT extends ElementType> = ({
      */
     className?: MayBeArray<PropTypeIfPropExists<CT, "className">>;
 } & ItemsProperty<CT> & PassthroughProps<CT, "as" | "noWrapper" | "className">);
+/**
+ * Properties for `CmsContentArea`.
+ *
+ * Combines core rendering options and wrapper customization options.
+ *
+ * Property overview:
+ * - `items` (required): content area items to render.
+ * - `fieldName`: enables edit marker output for the content area.
+ * - `variant`: template variant for all rendered items.
+ * - `useSuspense` + `fallback`: per-item suspense rendering.
+ * - `noWrapper`: disables outer content area container.
+ * - `as`: outer container element/component.
+ * - `itemsProperty`: target prop on `as` component to inject item list.
+ * - `className`: classes for outer container.
+ * - `classMapper`: computes per-item wrapper classes from display option/type/index.
+ * - `itemWrapper`: configures per-item wrapper element, classes and prop target.
+ * - `ctx`: optional CMS context override.
+ *
+ * @example
+ * ```tsx
+ * <CmsContentArea
+ *   items={content.MainContentArea}
+ *   fieldName="MainContentArea"
+ *   as="section"
+ *   className="main-content"
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <CmsContentArea
+ *   items={content.SidebarContentArea}
+ *   itemWrapper={{ as: 'aside', className: 'sidebar-item' }}
+ *   classMapper={(displayOption, contentType, index) =>
+ *     `item-${index} display-${displayOption} type-${contentType?.join('-') ?? 'unknown'}`
+ *   }
+ *   useSuspense
+ *   fallback={<div>Loading…</div>}
+ * />
+ * ```
+ */
 export type CmsContentAreaProps<T extends ElementType, CT extends ElementType> = CmsContentAreaCoreProps & CmsContentAreaWrapperProps<T, CT>;
 export type CmsContentAreaClassMapper = (displayOption: string, contentType: ContentType | null, index: number) => string;
 export type BaseCmsContentAreaProps<T extends ElementType, CT extends ElementType> = PropsWithCmsContent<PropsWithContext<CmsContentAreaProps<T, CT>>>;

package/dist/components/cms-editable/index.d.ts

@@ -2,48 +2,117 @@ import { PropsWithChildren, type ReactNode } from 'react';
 import { GenericContext, PropsWithContext } from '../../context/types.js';
 import type { ElementType, GenericContextProps, ElementProps } from '../type-utils.js';
 import { type ContentLink } from '@remkoj/optimizely-graph-client';
+/**
+ * Properties for `CmsEditable`.
+ *
+ * `CmsEditable` wraps output with Optimizely edit markers so fields and blocks can be
+ * selected in edit mode.
+ *
+ * Quick start:
+ * - Provide `cmsId` for block/content identification.
+ * - Provide `cmsFieldName` when you want field-level editing.
+ * - Choose wrapper element with `as` (defaults to `div`).
+ *
+ * @example
+ * ```tsx
+ * <CmsEditable as="section" cmsId={content._metadata.key} cmsFieldName="MainBody">
+ *   <p>{content.MainBody}</p>
+ * </CmsEditable>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <CmsEditable
+ *   as="h2"
+ *   cmsId={content._metadata.key}
+ *   cmsFieldName="Heading"
+ *   editType="inline"
+ * >
+ *   {content.Heading}
+ * </CmsEditable>
+ * ```
+ */
 export type CmsEditableProps<FT extends ElementType> = PropsWithChildren<{
     /**
-     * Override the component used to render, instead of wrapping the children. It allows
-     * any valid JSX identifier (e.g. HTML Element, Component or ExoticComponent)
+     * Wrapper element or component used for rendering.
+     *
+     * Defaults to `div`.
+     * Accepts intrinsic elements (for example `"span"`, `"section"`) or custom
+     * React components.
      */
     as?: FT;
     /**
-     * The identifier of the component wrapped in this CmsEditable component. This will
-     * add the 'data-epi-block-id' property to the component.
+     * Identifier of the rendered CMS content item.
+     *
+     * When edit attributes are active, this is written to `data-epi-block-id` and/or
+     * `data-epi-content-id`.
+     *
+     * Recommended value: content key from your model metadata.
      */
     cmsId?: string | null;
     /**
-     * The name of the component field wrapped by this CmsEditable component. This will
-     * add the 'data-epi-property-name' property to the component.
+     * Field name to mark as editable (for example `"Heading"`, `"MainBody"`).
+     *
+     * In edit mode this enables field-level highlighting/editing metadata.
      */
     cmsFieldName?: string | null;
     /**
-     * The Context to be used when determining if the page rendering happens in edit mode
-     * or not.
+     * Optional CMS context override.
+     *
+     * Use this when you need to provide context explicitly; otherwise context is resolved
+     * by the caller/wrapper.
      */
     ctx?: GenericContext;
     /**
-     * The default CTX paramteer is caught by this component, set this to true to pass the
-     * `ctx` property to the 'as' Component, or set to a valid property name to pass into
-     * that property.
+     * Forward `ctx` to the custom `as` component.
+     *
+      * - `true` (default): forward as prop name `ctx`.
+      * - `false`: do not forward context.
+     * - `"propName"`: forward using custom prop name.
+     *
+     * Ignored for intrinsic HTML elements.
+      *
+      * If the component passed through `as` is on the opposite rendering side,
+      * set this to `false` to prevent boundary issues:
+      * - `CmsEditable` on client + `as` server component -> use `forwardCtx={false}`
+      * - `CmsEditable` on server + `as` client component -> use `forwardCtx={false}`
      */
     forwardCtx?: boolean | GenericContextProps<FT>;
     /**
-     * If set, the `data-epi-block-id` attribute will always be included when the `cmsId`
-     * parameter is being set.
+     * Force adding `data-epi-block-id` when `cmsId` is present.
+     *
+     * Useful when you need block-level markers even if the default filtering logic would
+     * otherwise suppress them.
      */
     forceBlockId?: boolean;
     /**
-     * If set, this will be used to test if the content item being rendered is actually
-     * the one being edited. This allows
+     * Reserved compatibility flag.
+     *
+     * This property is currently accepted for API compatibility but is not used by the
+     * current implementation.
+     *
+     * @deprecated This property is preserved for historical use and should not be used in new code.
+     */
+    forceId?: boolean;
+    /**
+     * Content identity check used to conditionally output field-level edit markers.
+     *
+     * When provided, field attributes are added only if
+     * `currentContent.key === editableContent.key`.
+     * This condition affects field-level markers, not `cmsId` output.
      */
     currentContent?: ContentLink;
     /**
-     * Override the value for the `data-epi-property-edittype` property
+     * Override edit rendering mode.
+     *
+     * - `"floating"`: floating editor UI.
+     * - `"inline"`: inline editor UI.
+     * - `null`/`undefined`: default behavior via `data-epi-edit`.
+     *
+     * @deprecated The `editType` property is deprecated and should not be used in new code. Future versions may remove support for this property.
      */
     editType?: 'floating' | 'inline' | null;
-} & Omit<ElementProps<FT>, 'as' | 'cmsId' | 'cmsFieldName' | 'ctx' | 'forwardCtx'>>;
+} & Omit<ElementProps<FT>, 'as' | 'cmsId' | 'cmsFieldName' | 'ctx' | 'forwardCtx' | 'forceBlockId' | 'forceId' | 'currentContent' | 'editType'>>;
 export type CmsEditableComponent = <CT extends ElementType>(props: CmsEditableProps<CT>) => ReactNode;
 export type CmsEditableBaseComponent = <CT extends ElementType>(props: PropsWithContext<CmsEditableProps<CT>>) => ReactNode;
 /**

package/dist/components/cms-editable/index.js

@@ -8,7 +8,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * @param   param0      The HTML element with the simple properties
  * @returns
  */
-export const CmsEditable = ({ ctx, forwardCtx, as, cmsId, cmsFieldName, children, key, forceBlockId, currentContent, editType, ...props }) => {
+export const CmsEditable = ({ ctx, forwardCtx = false, as, cmsId = null, cmsFieldName = null, children, key, forceBlockId = false, forceId = true, currentContent, editType = null, ...props }) => {
     const { inEditMode, isDebugOrDevelopment, isDebug, editableContent, editableContentIsExperience, } = ctx || {
         inEditMode: false,
         isDebug: true,
@@ -24,34 +24,44 @@ export const CmsEditable = ({ ctx, forwardCtx, as, cmsId, cmsFieldName, children
     }
     const addEditProps = inEditMode
         ? currentContent
-            ? editableContent?.key == currentContent.key
+            ? editableContent?.key === currentContent.key
             : true
         : false;
     // If we're rendering for an experience, we don't need to inject property names, as the
     // experience editor only deals with property ids - injecting property names will cause
     // it to outline incorrect items.
-    const dataEpiPropertyName = editableContentIsExperience
+    const dataEpiPropertyName = false && editableContentIsExperience
         ? undefined
         : (cmsFieldName ?? undefined);
+    const showBlockId = forceBlockId || (cmsId && editableContent?.key ?
+        editableContent.key !== cmsId :
+        true);
+    const showContentId = forceBlockId || (cmsId?.length == 32 && (cmsId && editableContent?.key ?
+        editableContent.key !== cmsId :
+        true));
     const itemProps = addEditProps
         ? {
             ...props,
             // We assume GUIDs are represented as 32 char long strings, all other values are IDs
-            'data-epi-block-id': cmsId && (cmsId.length != 32 || forceBlockId) ? cmsId : undefined,
+            'data-epi-block-id': showBlockId ? cmsId : undefined,
             // We assume GUIDs are represented as 32 char long strings
-            'data-epi-content-id': cmsId && cmsId.length == 32 ? cmsId : undefined,
+            'data-epi-content-id': showContentId ? cmsId : undefined,
             // We pass through the property name if provided
-            'data-epi-property-name': dataEpiPropertyName,
+            'data-epi-property-name': editType ? dataEpiPropertyName : undefined,
+            // We pass through the property name if provided
+            'data-epi-edit': editType ? undefined : dataEpiPropertyName,
             // Configure the rendition of the property editor
             'data-epi-property-edittype': editType ?? undefined,
         }
         : {
             ...props,
         };
-    if (forwardCtx === true)
-        itemProps['ctx'] = ctx;
-    if (typeof forwardCtx == 'string' && forwardCtx.length > 0)
-        itemProps[forwardCtx] = ctx;
+    if (typeof DefaultElement !== 'string') {
+        if (forwardCtx === true)
+            itemProps['ctx'] = ctx;
+        if (typeof forwardCtx === 'string' && forwardCtx.length > 0)
+            itemProps[forwardCtx] = ctx;
+    }
     return _jsx(DefaultElement, { ...itemProps, children: children });
 };
 export default CmsEditable;

package/dist/components/cms-editable/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/cms-editable/index.tsx"],"names":[],"mappings":";AAuEA;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,WAAW,GAA6B,CAAyB,EAC5E,GAAG,EACH,UAAU,EACV,EAAE,EACF,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,GAAG,EACH,YAAY,EACZ,cAAc,EACd,QAAQ,EACR,GAAG,KAAK,EAC+B,EAAE,EAAE;IAC3C,MAAM,EACJ,UAAU,EACV,oBAAoB,EACpB,OAAO,EACP,eAAe,EACf,2BAA2B,GAC5B,GAAG,GAAG,IAAI;QACT,UAAU,EAAE,KAAK;QACjB,OAAO,EAAE,IAAI;QACb,oBAAoB,EAAE,IAAI;QAC1B,2BAA2B,EAAE,KAAK;KACnC,CAAA;IACD,MAAM,cAAc,GAAG,EAAE,IAAI,KAAK,CAAA;IAElC,IAAI,oBAAoB,IAAI,UAAU,IAAI,CAAC,YAAY,IAAI,CAAC,KAAK,EAAE,CAAC;QAClE,OAAO,CAAC,IAAI,CACV,4FAA4F,CAC7F,CAAA;QACD,IAAI,OAAO,EAAE,CAAC;YACZ,OAAO,CAAC,KAAK,CAAC,oBAAoB,CAAC,CAAA;QACrC,CAAC;IACH,CAAC;IAED,MAAM,YAAY,GAAG,UAAU;QAC7B,CAAC,CAAC,cAAc;YACd,CAAC,CAAC,eAAe,EAAE,GAAG,IAAI,cAAc,CAAC,GAAG;YAC5C,CAAC,CAAC,IAAI;QACR,CAAC,CAAC,KAAK,CAAA;IAET,uFAAuF;IACvF,uFAAuF;IACvF,iCAAiC;IACjC,MAAM,mBAAmB,GAAG,2BAA2B;QACrD,CAAC,CAAC,SAAS;QACX,CAAC,CAAC,CAAC,YAAY,IAAI,SAAS,CAAC,CAAA;IAE/B,MAAM,SAAS,GAAwB,YAAY;QACjD,CAAC,CAAC;YACE,GAAG,KAAK;YACR,oFAAoF;YACpF,mBAAmB,EACjB,KAAK,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,EAAE,IAAI,YAAY,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS;YACnE,0DAA0D;YAC1D,qBAAqB,EAAE,KAAK,IAAI,KAAK,CAAC,MAAM,IAAI,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS;YACtE,gDAAgD;YAChD,wBAAwB,EAAE,mBAAmB;YAC7C,iDAAiD;YACjD,4BAA4B,EAAE,QAAQ,IAAI,SAAS;SACpD;QACH,CAAC,CAAC;YACE,GAAG,KAAK;SACT,CAAA;IAEL,IAAI,UAAU,KAAK,IAAI;QAAE,SAAS,CAAC,KAAK,CAAC,GAAG,GAAG,CAAA;IAC/C,IAAI,OAAO,UAAU,IAAI,QAAQ,IAAI,UAAU,CAAC,MAAM,GAAG,CAAC;QACxD,SAAS,CAAC,UAAU,CAAC,GAAG,GAAG,CAAA;IAE7B,OAAO,KAAC,cAAc,OAAK,SAAS,YAAG,QAAQ,GAAkB,CAAA;AACnE,CAAC,CAAA;AAED,eAAe,WAAW,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/cms-editable/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/rich-text/index.d.ts

@@ -1,4 +1,5 @@
+import type { ReactNode } from 'react';
 import type { RichTextImplProps } from './types.js';
 import type { ElementWithChildrenType } from '../type-utils.js';
 export * from './types.js';
-export declare const RichText: <ET extends ElementWithChildrenType>({ factory, text, className, as: Wrapper, debug, noWrapper, cmsFieldName, cmsId, ctx, children, ...props }: RichTextImplProps<ET>) => import("react/jsx-runtime").JSX.Element;
+export declare const RichText: <ET extends ElementWithChildrenType>({ factory, text, className, as: Wrapper, debug, noWrapper, cmsFieldName, cmsId, ctx, children, ...props }: RichTextImplProps<ET>) => string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null | undefined;

package/dist/components/rich-text/index.js

@@ -14,10 +14,13 @@ export const RichText = ({ factory, text = '{ "type": "richText" }', className =
             const elementId = id + '::' + idx;
             return (_jsx(RichTextElement, { factory: richTextFactory, node: child, idPrefix: elementId + '::', ctx: ctx }, elementId));
         }) || children;
+        if (noWrapper || !Wrapper) {
+            if (isDebug)
+                console.warn('🟠 [Rich Text] Text without wrapper, make sure you add your own `CmsEditable` as one of the parents of this component');
+            return textContent;
+        }
         if (cmsId || cmsFieldName)
-            return (_jsx(CmsEditable, { as: (Wrapper ?? 'div'), className: className, cmsId: cmsId || undefined, cmsFieldName: cmsFieldName || undefined, ctx: ctx, ...props, children: textContent }));
-        if (noWrapper || !Wrapper)
-            return _jsx(_Fragment, { children: textContent });
+            return (_jsx(CmsEditable, { as: Wrapper, className: className, cmsId: cmsId || undefined, cmsFieldName: cmsFieldName || undefined, ctx: ctx, ...props, children: textContent }));
         return (
         //@ts-expect-error
         _jsx(Wrapper, { className: className, ...props, children: textContent }));

package/dist/components/rich-text/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/rich-text/index.tsx"],"names":[],"mappings":";AAEA,OAAO,KAAK,KAAK,MAAM,YAAY,CAAA;AACnC,OAAO,EAAE,uBAAuB,EAAE,MAAM,0BAA0B,CAAA;AAClE,OAAO,EACL,iBAAiB,EACjB,eAAe,EACf,mBAAmB,GACpB,MAAM,iBAAiB,CAAA;AAExB,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAGtD,cAAc,YAAY,CAAA;AAE1B,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAqC,EAC3D,OAAO,EACP,IAAI,GAAG,wBAAwB,EAC/B,SAAS,GAAG,WAAW,EACvB,EAAE,EAAE,OAAO,GAAG,KAAW,EACzB,KAAK,GAAG,KAAK,EACb,SAAS,GAAG,KAAK,EACjB,YAAY,GAAG,IAAI,EACnB,KAAK,GAAG,IAAI,EACZ,GAAG,EACH,QAAQ,EACR,GAAG,KAAK,EACc,EAAE,EAAE;IAC1B,MAAM,EAAE,GAAG,KAAK,CAAC,WAAW,CAAC,WAAW,CAAC,CAAA;IACzC,MAAM,eAAe,GACnB,GAAG,CAAC,OAAO,IAAI,OAAO,IAAI,IAAI,uBAAuB,CAAC,iBAAiB,CAAC,CAAA;IAC1E,MAAM,OAAO,GAAG,GAAG,CAAC,OAAO,IAAI,KAAK,CAAA;IAEpC,IAAI,CAAC;QACH,MAAM,IAAI,GAAG,KAAK,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAA;QACzC,MAAM,WAAW,GACf,IAAI,EAAE,QAAQ,EAAE,GAAG,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;YACjC,MAAM,SAAS,GAAG,EAAE,GAAG,IAAI,GAAG,GAAG,CAAA;YACjC,OAAO,CACL,KAAC,eAAe,IAEd,OAAO,EAAE,eAAe,EACxB,IAAI,EAAE,KAAK,EACX,QAAQ,EAAE,SAAS,GAAG,IAAI,EAC1B,GAAG,EAAE,GAAG,IAJH,SAAS,CAKd,CACH,CAAA;QACH,CAAC,CAAC,IAAI,QAAQ,CAAA;QAEhB,IAAI,KAAK,IAAI,YAAY;YACvB,OAAO,CACL,KAAC,WAAW,IACV,EAAE,EAAE,CAAC,OAAO,IAAI,KAAK,CAA6C,EAClE,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,IAAI,SAAS,EACzB,YAAY,EAAE,YAAY,IAAI,SAAS,EACvC,GAAG,EAAE,GAAG,KACJ,KAAK,YAER,WAAW,GACA,CACf,CAAA;QAEH,IAAI,SAAS,IAAI,CAAC,OAAO;YAAE,OAAO,4BAAG,WAAW,GAAI,CAAA;QAEpD,OAAO;QACL,kBAAkB;QAClB,KAAC,OAAO,IAAC,SAAS,EAAE,SAAS,KAAM,KAAK,YACrC,WAAW,GACJ,CACX,CAAA;IACH,CAAC;IAAC,MAAM,CAAC;QACP,IAAI,OAAO;YACT,OAAO,CAAC,IAAI,CAAC,6CAA6C,EAAE,IAAI,CAAC,CAAA;QACnE,OAAO,MAAM,CAAC,mBAAmB,CAAC,KAAK,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CACpD,cAAK,SAAS,EAAE,SAAS,KAAM,KAAK,YACjC,QAAQ,GACL,CACP,CAAC,CAAC,CAAC,CACF,4BAAG,QAAQ,GAAI,CAChB,CAAA;IACH,CAAC;AACH,CAAC,CAAA;AAED,qCAAqC;AACrC,MAAM,eAAe,GAEjB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE,EAAE;IAC9C,MAAM,OAAO,GAAG,GAAG,CAAC,OAAO,IAAI,KAAK,CAAA;IAEpC,cAAc;IACd,IAAI,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC;QACvB,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,IAAI,CAAC;YAAE,OAAO,IAAI,CAAA;QACtC,MAAM,aAAa,GAAG,OAAO,EAAE,OAAO,CAAC,eAAe,CAAC,IAAI,eAAe,CAAA;QAC1E,OAAO,KAAC,aAAa,IAAC,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,GAAI,CAAA;IAChD,CAAC;IAED,wBAAwB;IACxB,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC;QAC7B,IAAI,OAAO;YACT,OAAO,CAAC,IAAI,CACV,yDAAyD,EACzD,IAAI,CACL,CAAA;QACH,OAAO,IAAI,CAAA;IACb,CAAC;IAED,mBAAmB;IACnB,MAAM,SAAS,GACb,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC;QACvC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;YAC/B,MAAM,SAAS,GAAG,QAAQ,GAAG,GAAG,CAAA;YAChC,OAAO,CACL,KAAC,eAAe,IAEd,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,KAAK,EACX,QAAQ,EAAE,SAAS,GAAG,IAAI,EAC1B,GAAG,EAAE,GAAG,IAJH,SAAS,CAKd,CACH,CAAA;QACH,CAAC,CAAC;QACJ,CAAC,CAAC,SAAS,CAAA;IAEf,4DAA4D;IAC5D,IAAI,SAAS,GAAG,OAAO,EAAE,OAAO,CAAC,YAAY,IAAI,CAAC,IAAI,EAAE,CAAC,CAAA;IACzD,IAAI,CAAC,SAAS,EAAE,CAAC;QACf,IAAI,OAAO;YACT,OAAO,CAAC,IAAI,CACV,sFAAsF,IAAI,CAAC,IAAI,eAAe,IAAI,CAAC,IAAI,EAAE,CAC1H,CAAA;QACH,SAAS,GAAG,mBAAmB,CAAC,IAAI,CAAC,IAAmC,CAAC,CAAA;QACzE,OAAO,EAAE,QAAQ,CAAC,YAAY,IAAI,CAAC,IAAI,EAAE,EAAE,SAAS,CAAC,CAAA;IACvD,CAAC;IAED,mBAAmB;IACnB,OAAO,CACL,KAAC,SAAS,IAAC,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,YAC5B,SAAS,IAAI,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,GAChD,CACb,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/rich-text/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/rsc-components.d.ts

@@ -4,18 +4,167 @@ import { type CmsContentComponent } from './cms-content/rsc.js';
 import { type OptimizelyCompositionComponent } from './visual-builder/index.js';
 import { type RichTextComponent } from './rich-text/index.js';
 /**
- * Client side Optimizely CMS Editable
+ * Optimizely CMS editable marker wrapper for React Server Components.
+ *
+ * `CmsEditable` renders an element (default `div`) and conditionally injects
+ * Optimizely edit-mode attributes (`data-epi-*`) based on the current CMS
+ * context. In non-edit mode it behaves like a transparent wrapper.
+ *
+ * Key behavior:
+ * - Uses `ctx` from props when provided, otherwise resolves server context.
+ * - Injects edit attributes only when rendering in edit mode.
+ * - Supports custom wrapper elements/components via `as`.
+ * - Can forward `ctx` to custom components via `forwardCtx`.
+ *
+ * @example
+ * ```tsx
+ * import { CmsEditable } from '@remkoj/optimizely-cms-react/rsc'
+ *
+ * export function PageTitle({ title, id }: { title: string, id: string }) {
+ *   return (
+ *     <CmsEditable as="h1" cmsId={id} cmsFieldName="Title">
+ *       {title}
+ *     </CmsEditable>
+ *   )
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * import { CmsEditable } from '@remkoj/optimizely-cms-react/rsc'
+ *
+ * function Heading(props: { children: React.ReactNode, cmsCtx?: unknown }) {
+ *   return <h2>{props.children}</h2>
+ * }
+ *
+ * export function Teaser({ id, title }: { id: string, title: string }) {
+ *   return (
+ *     <CmsEditable
+ *       as={Heading}
+ *       cmsId={id}
+ *       cmsFieldName="Heading"
+ *       forwardCtx="cmsCtx"
+ *     >
+ *       {title}
+ *     </CmsEditable>
+ *   )
+ * }
+ * ```
+ *
+ * @remarks
+ * For a full prop reference, see `CmsEditableProps`.
  */
 export declare const CmsEditable: CmsEditableComponent;
+export type { CmsEditableComponent, CmsEditableProps } from './cms-editable/index.js';
 /**
- * Client side Optimizely CMS Content, leveraging the CMS Context to load the
- * content type and content data when needed
+ * Optimizely CMS content renderer for React Server Components.
+ *
+ * `CmsContent` resolves the component template for a content item and provides
+ * that template with loaded data and edit metadata.
+ *
+ * Key behavior:
+ * - Resolves content type from `contentType`, `fragmentData`, or Graph lookup.
+ * - Resolves template using context component dictionary and optional
+ *   `contentTypePrefix` / `variant`.
+ * - Loads content data unless `noDataLoad` is set.
+ * - Passes `editProps` to resolved CMS templates for in-context editing.
+ *
+ * Required props:
+ * - `contentLink`
+ *
+ * Optional props:
+ * - `contentType`, `contentTypePrefix`, `variant`, `fragmentData`, `layoutProps`,
+ *   `noDataLoad`, `editorComponentId`, `ctx`
+ *
+ * @example
+ * ```tsx
+ * import { CmsContent } from '@remkoj/optimizely-cms-react/rsc'
+ *
+ * export default async function Slot({ contentLink }: { contentLink: { key: string, locale?: string } }) {
+ *   return (
+ *     <CmsContent
+ *       contentLink={contentLink}
+ *       contentTypePrefix="Page"
+ *       variant="default"
+ *     />
+ *   )
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * import { CmsContent } from '@remkoj/optimizely-cms-react/rsc'
+ *
+ * export function PreloadedBlock({ contentLink, fragmentData }: { contentLink: { key: string }, fragmentData: Record<string, any> }) {
+ *   return (
+ *     <CmsContent
+ *       contentLink={contentLink}
+ *       fragmentData={fragmentData}
+ *       contentType={["Component", "TeaserBlock"]}
+ *     />
+ *   )
+ * }
+ * ```
+ *
+ * @remarks
+ * For a full prop reference, see `CmsContentProps`.
  */
 export declare const CmsContent: CmsContentComponent;
 export type { CmsContentComponent, CmsContentProps } from './cms-content/rsc.js';
 /**
- * Client side Optimizely CMS Content Area, leveraging the CMS Context to infer
- * the connection to Optimizely Graph and component dictionary.
+ * Optimizely CMS Content Area renderer for React Server Components.
+ *
+ * `CmsContentArea` renders a list of content area items by delegating each item
+ * to `CmsContent`, with optional container and item-wrapper customization.
+ *
+ * Key behavior:
+ * - Renders each item as `CmsContent` with normalized content link and type.
+ * - Adds edit markers for the content area in edit mode when `fieldName` is set.
+ * - Supports optional wrappers (`as`, `itemWrapper`) or no wrappers.
+ * - Supports per-item suspense boundaries (`useSuspense`, `fallback`).
+ *
+ * Required props:
+ * - `items`
+ *
+ * Optional props:
+ * - `fieldName`, `variant`, `as`, `itemsProperty`, `className`, `classMapper`,
+ *   `itemWrapper`, `noWrapper`, `useSuspense`, `fallback`, `ctx`
+ *
+ * @example
+ * ```tsx
+ * import { CmsContentArea } from '@remkoj/optimizely-cms-react/rsc'
+ *
+ * export function MainArea({ items }: { items: any[] }) {
+ *   return (
+ *     <CmsContentArea
+ *       items={items}
+ *       fieldName="MainContentArea"
+ *       as="section"
+ *       className="main-content-area"
+ *     />
+ *   )
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * import { CmsContentArea } from '@remkoj/optimizely-cms-react/rsc'
+ *
+ * export function GridArea({ items }: { items: any[] }) {
+ *   return (
+ *     <CmsContentArea
+ *       items={items}
+ *       itemWrapper={{ as: 'article', className: 'grid-item' }}
+ *       classMapper={(displayOption) => `display-${displayOption}`}
+ *       useSuspense
+ *       fallback={<div>Loading component…</div>}
+ *     />
+ *   )
+ * }
+ * ```
+ *
+ * @remarks
+ * For a full prop reference, see `CmsContentAreaProps`.
  */
 export declare const CmsContentArea: CmsContentAreaComponent;
 export type { CmsContentAreaClassMapper, CmsContentAreaComponent, CmsContentAreaProps, ContentAreaItemDefinition, } from './cms-content-area/index.js';