@dotcms/react 0.0.1-beta.4 → 0.0.1-beta.41

package/next.esm.js

@@ -1,8 +1,11 @@
+import { s as styleInject } from './web.url-search-params.size.esm.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { createContext, useContext, useState, useEffect, useLayoutEffect, useRef, useMemo } from 'react';
-import { s as styleInject } from './es.regexp.to-string.esm.js';
-import { getUVEState } from '@dotcms/uve';
-import { UVE_MODE } from '@dotcms/uve/types';
+import { UVE_MODE, UVEEventType, DotCMSUVEAction } from '@dotcms/types';
+import { getUVEState, initUVE, updateNavigation, createUVESubscription, sendMessageToUVE } from '@dotcms/uve';
+import { DEVELOPMENT_MODE, EMPTY_CONTAINER_STYLE_REACT, getDotContentletAttributes, CUSTOM_NO_COMPONENT, getContainersData, getContentletsInContainer, getDotContainerAttributes, getColumnPositionClasses, combineClasses, __DEFAULT_TINYMCE_CONFIG__, __BASE_TINYMCE_CONFIG_WITH_NO_DEFAULT__, __TINYMCE_PATH_ON_DOTCMS__, isValidBlocks } from '@dotcms/uve/internal';
+import { Editor } from '@tinymce/tinymce-react';
+import { __DOTCMS_UVE_EVENT__, BlockEditorDefaultBlocks } from '@dotcms/types/internal';
 
 /**
  * The `PageContext` is a React context that provides access to the DotCMS page context.
@@ -20,18 +23,15 @@ const DotCMSPageContext = /*#__PURE__*/createContext({
  * A React hook that determines if the current environment is in development mode.
  *
  * The hook returns `true` if either:
- *   - The context mode (or the optional `renderMode` argument) is set to 'development', or
- *   - The application is running inside the DotCMS editor (as determined by `isInsideEditor()`).
+ *   - The application is running inside the DotCMS editor (as determined by `getUVEState()`).
  *
- * @param {DotCMSPageRendererMode} [renderMode] - Optional override for the render mode.
  * @returns {boolean} - `true` if in development mode or inside the editor; otherwise, `false`.
  */
-const useIsDevMode = renderMode => {
+const useIsDevMode = () => {
   const {
     mode
   } = useContext(DotCMSPageContext);
-  const effectiveMode = renderMode != null ? renderMode : mode;
-  const [isDevMode, setIsDevMode] = useState(effectiveMode === 'development');
+  const [isDevMode, setIsDevMode] = useState(mode === 'development');
   useEffect(() => {
     var _getUVEState;
     // Inside UVE we rely on the UVE state to determine if we are in development mode
@@ -41,9 +41,8 @@ const useIsDevMode = renderMode => {
       setIsDevMode(isUVEInEditor);
       return;
     }
-    const effectiveMode = renderMode != null ? renderMode : mode;
-    setIsDevMode(effectiveMode === 'development');
-  }, [renderMode, mode]);
+    setIsDevMode(mode === DEVELOPMENT_MODE);
+  }, [mode]);
   return isDevMode;
 };
 
@@ -52,17 +51,12 @@ const useIsDevMode = renderMode => {
  *
  * @return {JSX.Element} Error message component
  */
-const ErrorMessage = ({
-  mode
-}) => {
+const ErrorMessage = () => {
+  const isDevMode = useIsDevMode();
   useEffect(() => {
     console.warn('Missing required layout.body property in page');
   }, []);
-  const isDevMode = useIsDevMode(mode);
-  if (!isDevMode) {
-    return null;
-  }
-  return jsxs("div", {
+  return isDevMode && jsxs("div", {
     "data-testid": "error-message",
     style: {
       padding: '1rem',
@@ -97,207 +91,6 @@ var css_248z = ".Column-module_col-start-1__xylw6 {\n    grid-column-start: 1;\n
 var styles = {"col-start-1":"Column-module_col-start-1__xylw6","col-start-2":"Column-module_col-start-2__Mod81","col-start-3":"Column-module_col-start-3__HHbXB","col-start-4":"Column-module_col-start-4__Uk-Qj","col-start-5":"Column-module_col-start-5__jlV8e","col-start-6":"Column-module_col-start-6__oi8k0","col-start-7":"Column-module_col-start-7__EmPky","col-start-8":"Column-module_col-start-8__hLI1h","col-start-9":"Column-module_col-start-9__Kcv9X","col-start-10":"Column-module_col-start-10__-MOrt","col-start-11":"Column-module_col-start-11__gDEQM","col-start-12":"Column-module_col-start-12__omVX6","col-end-1":"Column-module_col-end-1__Ho2y9","col-end-2":"Column-module_col-end-2__KwFu9","col-end-3":"Column-module_col-end-3__vfbJk","col-end-4":"Column-module_col-end-4__d4pyL","col-end-5":"Column-module_col-end-5__6yPd4","col-end-6":"Column-module_col-end-6__xQpAX","col-end-7":"Column-module_col-end-7__CCF7e","col-end-8":"Column-module_col-end-8__fVWEi","col-end-9":"Column-module_col-end-9__tpIGv","col-end-10":"Column-module_col-end-10__SX75K","col-end-11":"Column-module_col-end-11__9K1zv","col-end-12":"Column-module_col-end-12__oqTiE","col-end-13":"Column-module_col-end-13__L-nK9"};
 styleInject(css_248z);
 
-const endClassMap = {
-  1: 'col-end-1',
-  2: 'col-end-2',
-  3: 'col-end-3',
-  4: 'col-end-4',
-  5: 'col-end-5',
-  6: 'col-end-6',
-  7: 'col-end-7',
-  8: 'col-end-8',
-  9: 'col-end-9',
-  10: 'col-end-10',
-  11: 'col-end-11',
-  12: 'col-end-12',
-  13: 'col-end-13'
-};
-const startClassMap = {
-  1: 'col-start-1',
-  2: 'col-start-2',
-  3: 'col-start-3',
-  4: 'col-start-4',
-  5: 'col-start-5',
-  6: 'col-start-6',
-  7: 'col-start-7',
-  8: 'col-start-8',
-  9: 'col-start-9',
-  10: 'col-start-10',
-  11: 'col-start-11',
-  12: 'col-start-12'
-};
-/**
- * @internal
- *
- * Combine classes into a single string.
- *
- * @param {string[]} classes
- * @returns {string} Combined classes
- */
-const combineClasses = classes => classes.filter(Boolean).join(' ');
-/**
- * @internal
- *
- * Calculates and returns the CSS Grid positioning classes for a column based on its configuration.
- * Uses a 12-column grid system where columns are positioned using grid-column-start and grid-column-end.
- *
- * @example
- * ```typescript
- * const classes = getColumnPositionClasses({
- *   leftOffset: 1, // Starts at the first column
- *   width: 6      // Spans 6 columns
- * });
- * // Returns: { startClass: 'col-start-1', endClass: 'col-end-7' }
- * ```
- *
- * @param {DotPageAssetLayoutColumn} column - Column configuration object
- * @param {number} column.leftOffset - Starting position (0-based) in the grid
- * @param {number} column.width - Number of columns to span
- * @returns {{ startClass: string, endClass: string }} Object containing CSS class names for grid positioning
- */
-const getColumnPositionClasses = column => {
-  const {
-    leftOffset,
-    width
-  } = column;
-  const startClass = startClassMap[leftOffset];
-  const endClass = endClassMap[leftOffset + width];
-  return {
-    startClass,
-    endClass
-  };
-};
-/**
- * @internal
- *
- * Helper function that returns an object containing the dotCMS data attributes.
- * @param {DotCMSContentlet} contentlet - The contentlet to get the attributes for
- * @param {string} container - The container to get the attributes for
- * @returns {DotContentletAttributes} The dotCMS data attributes
- */
-function getDotContentletAttributes(contentlet, container) {
-  return {
-    'data-dot-identifier': contentlet == null ? void 0 : contentlet.identifier,
-    'data-dot-basetype': contentlet == null ? void 0 : contentlet.baseType,
-    'data-dot-title': (contentlet == null ? void 0 : contentlet.widgetTitle) || (contentlet == null ? void 0 : contentlet.title),
-    'data-dot-inode': contentlet == null ? void 0 : contentlet.inode,
-    'data-dot-type': contentlet == null ? void 0 : contentlet.contentType,
-    'data-dot-container': container,
-    'data-dot-on-number-of-pages': contentlet == null ? void 0 : contentlet.onNumberOfPages
-  };
-}
-/**
- * @internal
- *
- * Retrieves container data from a DotCMS page asset using the container reference.
- * This function processes the container information and returns a standardized format
- * for container editing.
- *
- * @param {DotCMSPageAsset} dotCMSPageAsset - The page asset containing all containers data
- * @param {DotCMSColumnContainer} columContainer - The container reference from the layout
- * @throws {Error} When page asset is invalid or container is not found
- * @returns {EditableContainerData} Formatted container data for editing
- *
- * @example
- * const containerData = getContainersData(pageAsset, containerRef);
- * // Returns: { uuid: '123', identifier: 'cont1', acceptTypes: 'type1,type2', maxContentlets: 5 }
- */
-const getContainersData = (dotCMSPageAsset, columContainer) => {
-  var _containerStructures$, _container$parentPerm, _container$maxContent;
-  const {
-    identifier,
-    uuid
-  } = columContainer;
-  const dotContainer = dotCMSPageAsset.containers[identifier];
-  if (!dotContainer) {
-    return null;
-  }
-  const {
-    containerStructures,
-    container
-  } = dotContainer;
-  const acceptTypes = (_containerStructures$ = containerStructures == null ? void 0 : containerStructures.map(structure => structure.contentTypeVar).join(',')) != null ? _containerStructures$ : '';
-  const variantId = container == null || (_container$parentPerm = container.parentPermissionable) == null ? void 0 : _container$parentPerm.variantId;
-  const maxContentlets = (_container$maxContent = container == null ? void 0 : container.maxContentlets) != null ? _container$maxContent : 0;
-  const path = container == null ? void 0 : container.path;
-  return {
-    uuid,
-    variantId,
-    acceptTypes,
-    maxContentlets,
-    identifier: path != null ? path : identifier
-  };
-};
-/**
- * @internal
- *
- * Retrieves the contentlets (content items) associated with a specific container.
- * Handles different UUID formats and provides warning for missing contentlets.
- *
- * @param {DotCMSPageAsset} dotCMSPageAsset - The page asset containing all containers data
- * @param {DotCMSColumnContainer} columContainer - The container reference from the layout
- * @returns {DotCMSContentlet[]} Array of contentlets in the container
- *
- * @example
- * const contentlets = getContentletsInContainer(pageAsset, containerRef);
- * // Returns: [{ identifier: 'cont1', ... }, { identifier: 'cont2', ... }]
- */
-const getContentletsInContainer = (dotCMSPageAsset, columContainer) => {
-  const {
-    identifier,
-    uuid
-  } = columContainer;
-  const {
-    contentlets
-  } = dotCMSPageAsset.containers[identifier];
-  const contentletsInContainer = contentlets[`uuid-${uuid}`] || contentlets[`uuid-dotParser_${uuid}`] || [];
-  if (!contentletsInContainer) {
-    console.warn(`We couldn't find the contentlets for the container with the identifier ${identifier} and the uuid ${uuid} becareful by adding content to this container.\nWe recommend to change the container in the layout and add the content again.`);
-  }
-  return contentletsInContainer;
-};
-/**
- * @internal
- *
- * Generates the required DotCMS data attributes for a container element.
- * These attributes are used by DotCMS for container identification and functionality.
- *
- * @param {EditableContainerData} params - Container data including uuid, identifier, acceptTypes, and maxContentlets
- * @returns {DotContainerAttributes} Object containing all necessary data attributes
- *
- * @example
- * const attributes = getDotContainerAttributes({
- *   uuid: '123',
- *   identifier: 'cont1',
- *   acceptTypes: 'type1,type2',
- *   maxContentlets: 5
- * });
- * // Returns: { 'data-dot-object': 'container', 'data-dot-identifier': 'cont1', ... }
- */
-function getDotContainerAttributes({
-  uuid,
-  identifier,
-  acceptTypes,
-  maxContentlets
-}) {
-  return {
-    'data-dot-object': 'container',
-    'data-dot-accept-types': acceptTypes,
-    'data-dot-identifier': identifier,
-    'data-max-contentlets': maxContentlets.toString(),
-    'data-dot-uuid': uuid
-  };
-}
-
-const EMPTY_CONTAINER_STYLE = {
-  width: '100%',
-  backgroundColor: '#ECF0FD',
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  color: '#030E32',
-  height: '10rem'
-};
 /**
  * @internal
  *
@@ -309,7 +102,7 @@ const EMPTY_CONTAINER_STYLE = {
  * @param {string} props.identifier - Container identifier
  * @returns {JSX.Element | null} Message about missing container or null in production
  */
-const ContainerNoFound = ({
+const ContainerNotFound = ({
   identifier
 }) => {
   const isDevMode = useIsDevMode();
@@ -324,7 +117,7 @@ const ContainerNoFound = ({
   }
   return jsxs("div", {
     "data-testid": "container-not-found",
-    style: EMPTY_CONTAINER_STYLE,
+    style: EMPTY_CONTAINER_STYLE_REACT,
     children: ["This container with identifier ", identifier, " was not found."]
   });
 };
@@ -342,9 +135,10 @@ const EmptyContainer = dotAttributes => {
     return null;
   }
   return jsx("div", Object.assign({}, dotAttributes, {
-    style: EMPTY_CONTAINER_STYLE,
+    style: EMPTY_CONTAINER_STYLE_REACT,
     children: jsx("span", {
       "data-testid": "empty-container-message",
+      "data-dot-object": "empty-content",
       children: "This container is empty."
     })
   }));
@@ -422,7 +216,7 @@ function FallbackComponent({
  *
  * Component to render when there is no component for the content type.
  *
- * @param {DotCMSContentlet} contentType - The content type that couldn't be rendered
+ * @param {DotCMSBasicContentlet} contentType - The content type that couldn't be rendered
  * @return {*}
  */
 function NoComponent({
@@ -493,7 +287,7 @@ function CustomComponent({
   if (UserComponent) {
     return jsx(UserComponent, Object.assign({}, contentlet));
   }
-  const UserNoComponent = userComponents['CustomNoComponent'];
+  const UserNoComponent = userComponents[CUSTOM_NO_COMPONENT];
   return jsx(FallbackComponent, {
     UserNoComponent: UserNoComponent,
     contentlet: contentlet
@@ -528,7 +322,7 @@ function Container({
   const containerData = useMemo(() => getContainersData(pageAsset, container), [pageAsset, container]);
   const contentlets = useMemo(() => getContentletsInContainer(pageAsset, container), [pageAsset, container]);
   if (!containerData) {
-    return jsx(ContainerNoFound, {
+    return jsx(ContainerNotFound, {
       identifier: container.identifier
     });
   }
@@ -598,7 +392,7 @@ function Column({
 const Row = ({
   row
 }) => {
-  const customRowClass = `${row.styleClass || ''} ${styles$1.row}`;
+  const customRowClass = combineClasses([row.styleClass || '', styles$1.row]);
   return jsx("div", {
     className: "dot-row-container",
     children: jsx("div", {
@@ -634,11 +428,6 @@ const DotCMSLayoutBody = ({
 }) => {
   var _page$layout;
   const dotCMSPageBody = page == null || (_page$layout = page.layout) == null ? void 0 : _page$layout.body;
-  if (!dotCMSPageBody) {
-    return jsx(ErrorMessage, {
-      mode: _mode
-    });
-  }
   const contextValue = {
     pageAsset: page,
     userComponents: _components,
@@ -646,10 +435,1022 @@ const DotCMSLayoutBody = ({
   };
   return jsx(DotCMSPageContext.Provider, {
     value: contextValue,
-    children: dotCMSPageBody.rows.map((row, index) => jsx(Row, {
+    children: dotCMSPageBody ? dotCMSPageBody.rows.map((row, index) => jsx(Row, {
       row: row
-    }, index))
+    }, index)) : jsx(ErrorMessage, {})
+  });
+};
+
+/**
+ * Custom hook to determine if the current UVE (Universal Visual Editor) mode
+ * matches the specified mode. This hook is useful for conditionally rendering
+ * components based on the UVE mode.
+ *
+ * @param {UVE_MODE} when - The UVE mode to check against.
+ * @returns {boolean} True if the current UVE mode matches the specified mode, otherwise false.
+ *
+ * @example
+ * // Basic usage: Check if the UVE is in edit mode
+ * const showInEditMode = useDotCMSShowWhen(UVE_MODE.EDIT);
+ * if (showInEditMode) {
+ *     // Render edit-specific components
+ * }
+ *
+ * @example
+ * // Check if the UVE is in preview mode
+ * const showInPreviewMode = useDotCMSShowWhen(UVE_MODE.PREVIEW);
+ * if (showInPreviewMode) {
+ *     // Render preview-specific components
+ * }
+ *
+ * @example
+ * // Check if the UVE is in live mode
+ * const showInLiveMode = useDotCMSShowWhen(UVE_MODE.LIVE);
+ * if (showInLiveMode) {
+ *     // Render live-specific components
+ * }
+ */
+const useDotCMSShowWhen = when => {
+  const [show, setShow] = useState(false);
+  useEffect(() => {
+    var _getUVEState;
+    setShow(((_getUVEState = getUVEState()) == null ? void 0 : _getUVEState.mode) === when);
+  }, [when]);
+  return show;
+};
+
+/**
+ * DotCMSShow component is used to conditionally render its children
+ * based on the Universal Visual Editor (UVE) mode. It checks if the UVE
+ * is in a specified mode and only renders its children in that case.
+ *
+ * @param {Object} props - The component props.
+ * @param {React.ReactNode} props.children - The children to be rendered when the condition is met.
+ * @param {UVE_MODE} [props.when=UVE_MODE.EDIT] - The UVE mode in which the children should be rendered.
+ * @returns {React.ReactNode | null} The children if the current UVE mode matches the `when` prop, otherwise null.
+ *
+ * @example
+ * // Basic usage: Render content only in edit mode
+ * <DotCMSShow when={UVE_MODE.EDIT}>
+ *     <div>Edit Mode Content</div>
+ * </DotCMSShow>
+ *
+ * // This will render <div>Edit Mode Content</div> only if the UVE is in edit mode.
+ *
+ * @example
+ * // Render content in preview mode
+ * <DotCMSShow when={UVE_MODE.PREVIEW}>
+ *     <MyCustomPreviewComponent />
+ * </DotCMSShow>
+ *
+ * // MyCustomPreviewComponent will only be rendered if the UVE is in preview mode.
+ *
+ * @example
+ * // Render content in live mode
+ * <DotCMSShow when={UVE_MODE.LIVE}>
+ *     <LiveContentComponent />
+ * </DotCMSShow>
+ *
+ * // LiveContentComponent will only be rendered if the UVE is in live mode.
+ */
+const DotCMSShow = ({
+  children,
+  when: _when = UVE_MODE.EDIT
+}) => {
+  const show = useDotCMSShowWhen(_when);
+  if (!show) {
+    return null;
+  }
+  return children;
+};
+
+/**
+ * Custom hook to manage the editable state of a DotCMS page.
+ *
+ * This hook initializes the Universal Visual Editor (UVE) and subscribes to content changes.
+ * It updates the editable page state when content changes are detected in the UVE,
+ * ensuring your React components always display the latest content when editing in DotCMS.
+ *
+ * @example
+ * ```ts
+ * // Import the hook and the client
+ * import { useEditableDotCMSPage } from '@dotcms/react';
+ * import { createDotCMSClient } from '@dotcms/client';
+ *
+ * // Create the client
+ * const client = createDotCMSClient({
+ *   dotcmsURL: 'https://your-dotcms-instance.com',
+ *   authToken: 'your-auth-token'
+ * });
+ *
+ * // Get the page
+ * const page = await client.page.get('/', {
+ *   languageId: '1',
+ * });
+ *
+ * // Use the hook to get an editable version of the page
+ * const editablePage = useEditableDotCMSPage(page);
+ *
+ * // Then use the page data in your component
+ * return (
+ *   <div>
+ *     <h1>{editablePage.page.title}</h1>
+ *     <div dangerouslySetInnerHTML={{ __html: editablePage.page.body }} />
+ *   </div>
+ * );
+ * ```
+ *
+ * @example
+ * ```ts
+ * // Import the hook and the client
+ * import { useEditableDotCMSPage } from '@dotcms/react';
+ * import { createDotCMSClient } from '@dotcms/client';
+ *
+ * // Create the client
+ * const client = createDotCMSClient({
+ *   dotcmsURL: 'https://your-dotcms-instance.com',
+ *   authToken: 'your-auth-token'
+ * });
+ *
+ * // Get the page with GraphQL content
+ * const page = await client.page.get('/', {
+ *   languageId: '1',
+ *   graphql: {
+ *     content: {
+ *       products: `ProductCollection(query: "+title:snow", limit: 10, offset: 0, sortBy: "score") {
+ *         title
+ *         urlMap
+ *         category {
+ *           name
+ *           inode
+ *         }
+ *         retailPrice
+ *         image {
+ *           versionPath
+ *         }
+ *       }`
+ *     }
+ *   }
+ * });
+ *
+ * // Use the hook to get an editable version of the page and its content
+ * const editablePage = useEditableDotCMSPage(page);
+ *
+ * // Access both page data and GraphQL content
+ * const { page: pageData, content } = editablePage;
+ *
+ * // Use the products from GraphQL content
+ * return (
+ *   <div>
+ *     <h1>{pageData.title}</h1>
+ *     <ProductList products={content.products} />
+ *   </div>
+ * );
+ * ```
+ * @param {DotCMSPageResponse} pageResponse - The initial editable page data from client.page.get().
+ *
+ * @returns {DotCMSPageResponse} The updated editable page state that reflects any changes made in the UVE.
+ * The structure includes page data and any GraphQL content that was requested.
+ */
+const useEditableDotCMSPage = pageResponse => {
+  const [updatedPageResponse, setUpdatedPageResponse] = useState(pageResponse);
+  useEffect(() => {
+    var _pageResponse$pageAss;
+    if (!getUVEState()) {
+      return;
+    }
+    if (!pageResponse) {
+      console.warn('[useEditableDotCMSPage]: No DotCMSPageResponse provided');
+      return;
+    }
+    const pageURI = pageResponse == null || (_pageResponse$pageAss = pageResponse.pageAsset) == null || (_pageResponse$pageAss = _pageResponse$pageAss.page) == null ? void 0 : _pageResponse$pageAss.pageURI;
+    const {
+      destroyUVESubscriptions
+    } = initUVE(pageResponse);
+    // Update the navigation to the pageURI, when we have a pageURI
+    // Sometimes the page is null due to permissions, so we don't want to update the navigation
+    // And wait for the UVE to resolve the page
+    if (pageURI) {
+      updateNavigation(pageURI);
+    }
+    return () => {
+      destroyUVESubscriptions();
+    };
+  }, [pageResponse]);
+  useEffect(() => {
+    const {
+      unsubscribe
+    } = createUVESubscription(UVEEventType.CONTENT_CHANGES, payload => {
+      setUpdatedPageResponse(payload);
+    });
+    return () => {
+      unsubscribe();
+    };
+  }, []);
+  return updatedPageResponse;
+};
+
+const DEFAULT_TINYMCE_CONFIG = Object.assign({}, __DEFAULT_TINYMCE_CONFIG__, {
+  licenseKey: 'gpl' // Using self-hosted license key
+});
+const TINYMCE_CONFIG = {
+  full: Object.assign({}, DEFAULT_TINYMCE_CONFIG, __BASE_TINYMCE_CONFIG_WITH_NO_DEFAULT__.full),
+  plain: Object.assign({}, DEFAULT_TINYMCE_CONFIG, __BASE_TINYMCE_CONFIG_WITH_NO_DEFAULT__.plain),
+  minimal: Object.assign({}, DEFAULT_TINYMCE_CONFIG, __BASE_TINYMCE_CONFIG_WITH_NO_DEFAULT__.minimal)
+};
+
+/**
+ * Allows inline edit content pulled from dotCMS API using TinyMCE editor
+ *
+ * @export
+ * @component
+ * @param {Readonly<DotCMSEditableTextProps>} props {
+ *     mode = 'plain',
+ *     format = 'text',
+ *     contentlet,
+ *     fieldName = ''
+ * }
+ * @example
+ * ```javascript
+ * import { DotCMSEditableText } from '@dotcms/react';
+ *
+ * const MyContentletWithTitle = ({ contentlet }) => (
+ *     <h2>
+ *         <DotCMSEditableText
+ *             contentlet={contentlet}
+ *             fieldName="title"
+ *             mode='full'
+ *             format='text'/>
+ *     </h2>
+ * );
+ * ```
+ * @returns {JSX.Element} A component to edit content inline
+ */
+function DotCMSEditableText({
+  mode = 'plain',
+  format = 'text',
+  contentlet,
+  fieldName
+}) {
+  const editorRef = useRef(null);
+  const [scriptSrc, setScriptSrc] = useState('');
+  const [initEditor, setInitEditor] = useState(false);
+  const [content, setContent] = useState((contentlet == null ? void 0 : contentlet[fieldName]) || '');
+  useEffect(() => {
+    setContent((contentlet == null ? void 0 : contentlet[fieldName]) || '');
+  }, [fieldName, contentlet]);
+  useEffect(() => {
+    var _state$dotCMSHost, _editorRef$current;
+    const state = getUVEState();
+    setInitEditor((state == null ? void 0 : state.mode) === UVE_MODE.EDIT && !!(state != null && (_state$dotCMSHost = state.dotCMSHost) != null && _state$dotCMSHost.length));
+    if (!contentlet || !fieldName) {
+      console.error('[DotCMSEditableText]: contentlet or fieldName is missing', 'Ensure that all needed props are passed to view and edit the content');
+      return;
+    }
+    if (state && state.mode !== UVE_MODE.EDIT) {
+      console.warn('[DotCMSEditableText]: TinyMCE is not available in the current mode');
+      return;
+    }
+    if (!(state != null && state.dotCMSHost)) {
+      console.warn('[DotCMSEditableText]: The `dotCMSHost` parameter is not defined. Check that the UVE is sending the correct parameters.');
+      return;
+    }
+    const createURL = new URL(__TINYMCE_PATH_ON_DOTCMS__, state.dotCMSHost);
+    setScriptSrc(createURL.toString());
+    const content = (contentlet == null ? void 0 : contentlet[fieldName]) || '';
+    (_editorRef$current = editorRef.current) == null || _editorRef$current.setContent(content, {
+      format
+    });
+  }, [format, fieldName, contentlet, content]);
+  useEffect(() => {
+    var _getUVEState;
+    if (((_getUVEState = getUVEState()) == null ? void 0 : _getUVEState.mode) !== UVE_MODE.EDIT) {
+      return;
+    }
+    const onMessage = ({
+      data
+    }) => {
+      const {
+        name,
+        payload
+      } = data;
+      if (name !== __DOTCMS_UVE_EVENT__.UVE_COPY_CONTENTLET_INLINE_EDITING_SUCCESS) {
+        return;
+      }
+      const {
+        oldInode,
+        inode
+      } = payload;
+      const currentInode = contentlet.inode;
+      const shouldFocus = currentInode === oldInode || currentInode === inode;
+      if (shouldFocus) {
+        var _editorRef$current2;
+        (_editorRef$current2 = editorRef.current) == null || _editorRef$current2.focus();
+      }
+    };
+    window.addEventListener('message', onMessage);
+    return () => {
+      window.removeEventListener('message', onMessage);
+    };
+  }, [contentlet == null ? void 0 : contentlet.inode]);
+  const onMouseDown = event => {
+    var _editorRef$current3;
+    const {
+      onNumberOfPages = 1
+    } = contentlet;
+    const {
+      inode,
+      languageId: language
+    } = contentlet;
+    if (Number(onNumberOfPages) <= 1 || (_editorRef$current3 = editorRef.current) != null && _editorRef$current3.hasFocus()) {
+      return;
+    }
+    event.stopPropagation();
+    event.preventDefault();
+    sendMessageToUVE({
+      action: DotCMSUVEAction.COPY_CONTENTLET_INLINE_EDITING,
+      payload: {
+        dataset: {
+          inode,
+          language,
+          fieldName
+        }
+      }
+    });
+  };
+  const onFocusOut = () => {
+    var _editorRef$current4, _editorRef$current5;
+    const editedContent = ((_editorRef$current4 = editorRef.current) == null ? void 0 : _editorRef$current4.getContent({
+      format: format
+    })) || '';
+    const {
+      inode,
+      languageId: langId
+    } = contentlet;
+    if (!((_editorRef$current5 = editorRef.current) != null && _editorRef$current5.isDirty()) || !didContentChange(editedContent)) {
+      return;
+    }
+    sendMessageToUVE({
+      action: DotCMSUVEAction.UPDATE_CONTENTLET_INLINE_EDITING,
+      payload: {
+        content: editedContent,
+        dataset: {
+          inode,
+          langId,
+          fieldName
+        }
+      }
+    });
+  };
+  const didContentChange = editedContent => {
+    return content !== editedContent;
+  };
+  if (!initEditor) {
+    // We can let the user pass the Child Component and create a root to get the HTML for the editor
+    return jsx("span", {
+      dangerouslySetInnerHTML: {
+        __html: content
+      }
+    });
+  }
+  return jsx("div", {
+    style: {
+      outline: '2px solid #006ce7',
+      borderRadius: '4px'
+    },
+    children: jsx(Editor, {
+      tinymceScriptSrc: scriptSrc,
+      inline: true,
+      onInit: (_, editor) => editorRef.current = editor,
+      init: TINYMCE_CONFIG[mode],
+      initialValue: content,
+      onMouseDown: onMouseDown,
+      onFocusOut: onFocusOut
+    })
+  });
+}
+
+/**
+ * Renders a code block component.
+ *
+ * @param attrs - The attributes of the code block.
+ * @param children - The content of the code block.
+ * @returns The rendered code block component.
+ */
+const CodeBlock = ({
+  node,
+  children
+}) => {
+  var _node$attrs;
+  const language = (node == null || (_node$attrs = node.attrs) == null ? void 0 : _node$attrs.language) || '';
+  return jsx("pre", {
+    "data-language": language,
+    children: jsx("code", {
+      children: children
+    })
+  });
+};
+/**
+ * Renders a blockquote component.
+ *
+ * @param children - The content to be rendered inside the blockquote.
+ * @returns The rendered blockquote component.
+ */
+const BlockQuote = ({
+  children
+}) => {
+  return jsx("blockquote", {
+    children: children
+  });
+};
+
+const NoComponentProvided = ({
+  contentType
+}) => {
+  const style = {
+    backgroundColor: '#fffaf0',
+    color: '#333',
+    padding: '1rem',
+    borderRadius: '0.5rem',
+    marginBottom: '1rem',
+    marginTop: '1rem',
+    border: '1px solid #ed8936'
+  };
+  return jsxs("div", {
+    "data-testid": "no-component-provided",
+    style: style,
+    children: [jsx("strong", {
+      style: {
+        color: '#c05621'
+      },
+      children: "Dev Warning"
+    }), ": No component or custom renderer provided for content type", jsx("strong", {
+      style: {
+        color: '#c05621'
+      },
+      children: contentType || 'Unknown'
+    }), ".", jsx("br", {}), "Please refer to the", jsx("a", {
+      href: "https://dev.dotcms.com/docs/block-editor",
+      target: "_blank",
+      rel: "noopener noreferrer",
+      style: {
+        color: '#c05621'
+      },
+      children: "Block Editor Custom Renderers Documentation"
+    }), ' ', "for guidance."]
+  });
+};
+
+const DOT_CONTENT_NO_DATA_MESSAGE = '[DotCMSBlockEditorRenderer]: No data provided for Contentlet Block. Try to add a contentlet to the block editor. If the error persists, please contact the DotCMS support team.';
+const DOT_CONTENT_NO_MATCHING_COMPONENT_MESSAGE = contentType => `[DotCMSBlockEditorRenderer]: No matching component found for content type: ${contentType}. Provide a custom renderer for this content type to fix this error.`;
+/**
+ * Renders a DotContent component.
+ *
+ * @param {DotContentProps} props - The props for the DotContent component.
+ * @returns {JSX.Element} The rendered DotContent component.
+ */
+const DotContent = ({
+  customRenderers,
+  node
+}) => {
+  const isDevMode = useIsDevMode();
+  const {
+    attrs = {}
+  } = node;
+  const {
+    data
+  } = attrs;
+  if (!data) {
+    console.error(DOT_CONTENT_NO_DATA_MESSAGE);
+    return null;
+  }
+  const {
+    contentType = 'Unknown Content Type'
+  } = data;
+  const Component = customRenderers[contentType];
+  /* In dev mode, show a helpful message for unknown content types */
+  if (isDevMode && !Component) {
+    return jsx(NoComponentProvided, {
+      contentType: contentType
+    });
+  }
+  /* In production, use default component if no matching component found */
+  if (!Component) {
+    console.warn(DOT_CONTENT_NO_MATCHING_COMPONENT_MESSAGE(contentType));
+    return null;
+  }
+  return jsx(Component, Object.assign({}, node));
+};
+
+/**
+ * Renders an image component for dotCMS.
+ *
+ * @param node - The node for the DotCMSImage component.
+ * @returns The rendered image component.
+ */
+const DotCMSImage = ({
+  node
+}) => {
+  const {
+    src,
+    alt
+  } = node.attrs;
+  return jsx("img", {
+    alt: alt,
+    src: src
+  });
+};
+
+/**
+ * ListItem component represents a list item in a block editor.
+ *
+ * @param children - The content of the list item.
+ * @returns The rendered list item element.
+ */
+const ListItem = ({
+  children
+}) => {
+  return jsx("li", {
+    children: children
+  });
+};
+/**
+ * Renders an ordered list component.
+ *
+ * @param children - The content to be rendered inside the ordered list.
+ * @returns The ordered list component.
+ */
+const OrderedList = ({
+  children
+}) => {
+  return jsx("ol", {
+    children: children
+  });
+};
+/**
+ * Renders a bullet list component.
+ *
+ * @param children - The content of the bullet list.
+ * @returns The rendered bullet list component.
+ */
+const BulletList = ({
+  children
+}) => {
+  return jsx("ul", {
+    children: children
+  });
+};
+
+/**
+ * Renders a table component for the Block Editor.
+ *
+ * @param content - The content of the table.
+ * @param blockEditorItem - The Block Editor item component.
+ */
+const TableRenderer = ({
+  content,
+  blockEditorItem
+}) => {
+  const BlockEditorItemComponent = blockEditorItem;
+  const renderTableContent = node => {
+    var _node$content;
+    return jsx(BlockEditorItemComponent, {
+      content: (_node$content = node.content) != null ? _node$content : []
+    });
+  };
+  return jsxs("table", {
+    children: [jsx("thead", {
+      children: content.slice(0, 1).map((rowNode, rowIndex) => {
+        var _rowNode$content;
+        return jsx("tr", {
+          children: (_rowNode$content = rowNode.content) == null ? void 0 : _rowNode$content.map((cellNode, cellIndex) => {
+            var _cellNode$attrs, _cellNode$attrs2;
+            return jsx("th", {
+              colSpan: Number(((_cellNode$attrs = cellNode.attrs) == null ? void 0 : _cellNode$attrs.colspan) || 1),
+              rowSpan: Number(((_cellNode$attrs2 = cellNode.attrs) == null ? void 0 : _cellNode$attrs2.rowspan) || 1),
+              children: renderTableContent(cellNode)
+            }, `${cellNode.type}-${cellIndex}`);
+          })
+        }, `${rowNode.type}-${rowIndex}`);
+      })
+    }), jsx("tbody", {
+      children: content.slice(1).map((rowNode, rowIndex) => {
+        var _rowNode$content2;
+        return jsx("tr", {
+          children: (_rowNode$content2 = rowNode.content) == null ? void 0 : _rowNode$content2.map((cellNode, cellIndex) => {
+            var _cellNode$attrs3, _cellNode$attrs4;
+            return jsx("td", {
+              colSpan: Number(((_cellNode$attrs3 = cellNode.attrs) == null ? void 0 : _cellNode$attrs3.colspan) || 1),
+              rowSpan: Number(((_cellNode$attrs4 = cellNode.attrs) == null ? void 0 : _cellNode$attrs4.rowspan) || 1),
+              children: renderTableContent(cellNode)
+            }, `${cellNode.type}-${cellIndex}`);
+          })
+        }, `${rowNode.type}-${rowIndex}`);
+      })
+    })]
+  });
+};
+
+/**
+ * Renders the text in bold.
+ *
+ * @param children - The content to be rendered in bold.
+ */
+const Bold = ({
+  children
+}) => jsx("strong", {
+  children: children
+});
+/**
+ * Renders the text in italic format.
+ *
+ * @param children - The content to be rendered in italic.
+ */
+const Italic = ({
+  children
+}) => jsx("em", {
+  children: children
+});
+/**
+ * Renders a strike-through text.
+ *
+ * @param children - The content to be rendered within the strike-through element.
+ */
+const Strike = ({
+  children
+}) => jsx("s", {
+  children: children
+});
+/**
+ * Renders an underline element for the given children.
+ *
+ * @param children - The content to be underlined.
+ */
+const Underline = ({
+  children
+}) => jsx("u", {
+  children: children
+});
+/**
+ * Renders a paragraph element.
+ *
+ * @param children - The content of the paragraph.
+ * @param attrs - The style attributes for the paragraph.
+ * @returns The rendered paragraph element.
+ */
+const Paragraph = ({
+  children,
+  node
+}) => {
+  const attrs = (node == null ? void 0 : node.attrs) || {};
+  return jsx("p", {
+    style: attrs,
+    children: children
+  });
+};
+/**
+ * Renders a link component.
+ *
+ * @param children - The content of the link.
+ * @param attrs - The attributes to be applied to the link.
+ * @returns The rendered link component.
+ */
+const Link = ({
+  children,
+  attrs
+}) => {
+  return jsx("a", Object.assign({}, attrs, {
+    children: children
+  }));
+};
+/**
+ * Renders a heading element with the specified level.
+ *
+ * @param children - The content of the heading.
+ * @param attrs - The attributes for the heading.
+ * @returns The rendered heading element.
+ */
+const Heading = ({
+  children,
+  node
+}) => {
+  const attrs = (node == null ? void 0 : node.attrs) || {};
+  const level = attrs.level || 1;
+  const Tag = `h${level}`;
+  return jsx(Tag, {
+    children: children
+  });
+};
+/**
+ * Renders the superscript text.
+ *
+ * @param children - The content to be rendered as superscript.
+ */
+const Superscript = ({
+  children
+}) => jsx("sup", {
+  children: children
+});
+/**
+ * Renders a subscript element.
+ *
+ * @param children - The content to be rendered as subscript.
+ */
+const Subscript = ({
+  children
+}) => jsx("sub", {
+  children: children
+});
+const nodeMarks = {
+  bold: Bold,
+  link: Link,
+  italic: Italic,
+  strike: Strike,
+  subscript: Subscript,
+  underline: Underline,
+  superscript: Superscript
+};
+const defaultMark = {
+  type: '',
+  attrs: {}
+};
+/**
+ * Renders a text block with optional marks.
+ *
+ * @param props - The props for the TextBlock component.
+ * @returns The rendered text block.
+ */
+const TextBlock = (props = {}) => {
+  const {
+    marks = [],
+    text
+  } = props;
+  const mark = marks[0] || defaultMark;
+  const textProps = Object.assign({}, props, {
+    marks: marks.slice(1)
+  });
+  const Component = nodeMarks[mark == null ? void 0 : mark.type];
+  // In React, class is not a valid attribute name, so we need to rename it to className
+  if (mark.attrs) {
+    mark.attrs.className = mark.attrs.class;
+    delete mark.attrs.class;
+  }
+  if (!Component) {
+    return text;
+  }
+  return jsx(Component, {
+    type: mark.type,
+    attrs: mark.attrs,
+    children: jsx(TextBlock, Object.assign({}, textProps))
+  });
+};
+
+/**
+ * Renders a video component for displaying videos.
+ *
+ * @param props - The properties for the video component.
+ * @returns The rendered video component.
+ */
+const DotCMSVideo = ({
+  node
+}) => {
+  const {
+    data,
+    src,
+    mimeType,
+    width,
+    height
+  } = node.attrs;
+  const poster = data == null ? void 0 : data.thumbnail;
+  const posterAttribute = poster ? {
+    poster
+  } : {};
+  return jsxs("video", Object.assign({
+    controls: true,
+    preload: "metadata",
+    width: width,
+    height: height
+  }, posterAttribute, {
+    children: [jsx("track", {
+      default: true,
+      kind: "captions",
+      srcLang: "en"
+    }), jsx("source", {
+      src: src,
+      type: mimeType
+    }), "Your browser does not support the ", jsx("code", {
+      children: "video"
+    }), " element."]
+  }));
+};
+
+/**
+ * Renders a block editor item based on the provided content and custom renderers.
+ *
+ * @param content - The content nodes to render.
+ * @param customRenderers - Optional custom renderers for specific node types.
+ * @returns The rendered block editor item.
+ */
+const BlockEditorBlock = ({
+  content,
+  customRenderers
+}) => {
+  if (!content) {
+    return null;
+  }
+  return content == null ? void 0 : content.map((node, index) => {
+    var _node$content;
+    const CustomRendererComponent = customRenderers == null ? void 0 : customRenderers[node.type];
+    const key = `${node.type}-${index}`;
+    if (CustomRendererComponent) {
+      return jsx(CustomRendererComponent, {
+        content: node.content,
+        children: jsx(BlockEditorBlock, {
+          content: node.content,
+          customRenderers: customRenderers
+        })
+      }, key);
+    }
+    switch (node.type) {
+      case BlockEditorDefaultBlocks.PARAGRAPH:
+        return jsx(Paragraph, {
+          node: node,
+          children: jsx(BlockEditorBlock, {
+            content: node.content,
+            customRenderers: customRenderers
+          })
+        }, key);
+      case BlockEditorDefaultBlocks.HEADING:
+        return jsx(Heading, {
+          node: node,
+          children: jsx(BlockEditorBlock, {
+            content: node.content,
+            customRenderers: customRenderers
+          })
+        }, key);
+      case BlockEditorDefaultBlocks.TEXT:
+        return jsx(TextBlock, Object.assign({}, node), key);
+      case BlockEditorDefaultBlocks.BULLET_LIST:
+        return jsx(BulletList, {
+          children: jsx(BlockEditorBlock, {
+            content: node.content,
+            customRenderers: customRenderers
+          })
+        }, key);
+      case BlockEditorDefaultBlocks.ORDERED_LIST:
+        return jsx(OrderedList, {
+          children: jsx(BlockEditorBlock, {
+            content: node.content,
+            customRenderers: customRenderers
+          })
+        }, key);
+      case BlockEditorDefaultBlocks.LIST_ITEM:
+        return jsx(ListItem, {
+          children: jsx(BlockEditorBlock, {
+            content: node.content,
+            customRenderers: customRenderers
+          })
+        }, key);
+      case BlockEditorDefaultBlocks.BLOCK_QUOTE:
+        return jsx(BlockQuote, {
+          children: jsx(BlockEditorBlock, {
+            content: node.content,
+            customRenderers: customRenderers
+          })
+        }, key);
+      case BlockEditorDefaultBlocks.CODE_BLOCK:
+        return jsx(CodeBlock, {
+          node: node,
+          children: jsx(BlockEditorBlock, {
+            content: node.content,
+            customRenderers: customRenderers
+          })
+        }, key);
+      case BlockEditorDefaultBlocks.HARDBREAK:
+        return jsx("br", {}, key);
+      case BlockEditorDefaultBlocks.HORIZONTAL_RULE:
+        return jsx("hr", {}, key);
+      case BlockEditorDefaultBlocks.DOT_IMAGE:
+        return jsx(DotCMSImage, {
+          node: node
+        }, key);
+      case BlockEditorDefaultBlocks.DOT_VIDEO:
+        return jsx(DotCMSVideo, {
+          node: node
+        }, key);
+      case BlockEditorDefaultBlocks.TABLE:
+        return jsx(TableRenderer, {
+          content: (_node$content = node.content) != null ? _node$content : [],
+          blockEditorItem: BlockEditorBlock
+        }, key);
+      case BlockEditorDefaultBlocks.DOT_CONTENT:
+        return jsx(DotContent, {
+          customRenderers: customRenderers,
+          node: node
+        }, key);
+      default:
+        return jsx(UnknownBlock, {
+          node: node
+        }, key);
+    }
+  });
+};
+/**
+ * Renders an unknown block type with a warning message in development mode.
+ *
+ * @param node - The block editor node to render.
+ * @returns The rendered block or null if in production mode.
+ */
+const UnknownBlock = ({
+  node
+}) => {
+  const style = {
+    backgroundColor: '#fff5f5',
+    color: '#333',
+    padding: '1rem',
+    borderRadius: '0.5rem',
+    marginBottom: '1rem',
+    marginTop: '1rem',
+    border: '1px solid #fc8181'
+  };
+  if (getUVEState()) {
+    return jsxs("div", {
+      style: style,
+      children: [jsx("strong", {
+        style: {
+          color: '#c53030'
+        },
+        children: "Warning:"
+      }), " The block type", ' ', jsx("strong", {
+        children: node.type
+      }), " is not recognized. Please check your", ' ', jsx("a", {
+        href: "https://dev.dotcms.com/docs/block-editor",
+        target: "_blank",
+        rel: "noopener noreferrer",
+        children: "configuration"
+      }), ' ', "or contact support for assistance."]
+    });
+  }
+  return null;
+};
+
+/**
+ * BlockEditorRenderer component for rendering block editor field.
+ *
+ * @component
+ * @param {Object} props - The component props.
+ * @param {BlockEditorContent} props.blocks - The blocks of content to render.
+ * @param {CustomRenderer} [props.customRenderers] - Optional custom renderers for specific block types.
+ * @param {string} [props.className] - Optional CSS class name for the container div.
+ * @param {React.CSSProperties} [props.style] - Optional inline styles for the container div.
+ * @returns {JSX.Element} A div containing the rendered blocks of content.
+ */
+const DotCMSBlockEditorRenderer = ({
+  blocks,
+  style,
+  className,
+  customRenderers
+}) => {
+  const [blockEditorState, setBlockEditorState] = useState({
+    error: null
+  });
+  const isDevMode = useIsDevMode();
+  /**
+   * Validates the blocks structure and updates the block editor state.
+   *
+   * This effect:
+   * 1. Validates that blocks have the correct structure (doc type, content array, etc)
+   * 2. Updates the block editor state with validation result
+   * 3. Logs any validation errors to console
+   *
+   * @dependency {Block} blocks - The content blocks to validate
+   */
+  useEffect(() => {
+    const validationResult = isValidBlocks(blocks);
+    setBlockEditorState(validationResult);
+    if (validationResult.error) {
+      console.error(validationResult.error);
+    }
+  }, [blocks]);
+  if (blockEditorState.error) {
+    console.error(blockEditorState.error);
+    if (isDevMode) {
+      return jsx("div", {
+        "data-testid": "invalid-blocks-message",
+        children: blockEditorState.error
+      });
+    }
+    return null;
+  }
+  return jsx("div", {
+    className: className,
+    style: style,
+    "data-testid": "dot-block-editor-container",
+    children: jsx(BlockEditorBlock, {
+      content: blocks == null ? void 0 : blocks.content,
+      customRenderers: customRenderers
+    })
   });
 };
 
-export { DotCMSLayoutBody };
+export { DotCMSBlockEditorRenderer, DotCMSEditableText, DotCMSLayoutBody, DotCMSShow, useDotCMSShowWhen, useEditableDotCMSPage };