@dotcms/uve 0.0.1-beta.24 → 0.0.1-beta.26

package/{index.esm2.js → public.esm.js}

@@ -1,40 +1,5 @@
-import { UVEEventType, DotCMSUVEAction, UVE_MODE } from './types.esm.js';
-
-/**
- * Actions received from the dotcms editor
- *
- * @export
- * @enum {number}
- */
-var __DOTCMS_UVE_EVENT__;
-(function (__DOTCMS_UVE_EVENT__) {
-  /**
-   * Request to page to reload
-   */
-  __DOTCMS_UVE_EVENT__["UVE_RELOAD_PAGE"] = "uve-reload-page";
-  /**
-   * Request the bounds for the elements
-   */
-  __DOTCMS_UVE_EVENT__["UVE_REQUEST_BOUNDS"] = "uve-request-bounds";
-  /**
-   * Received pong from the editor
-   */
-  __DOTCMS_UVE_EVENT__["UVE_EDITOR_PONG"] = "uve-editor-pong";
-  /**
-   * Received scroll event trigger from the editor
-   */
-  __DOTCMS_UVE_EVENT__["UVE_SCROLL_INSIDE_IFRAME"] = "uve-scroll-inside-iframe";
-  /**
-   * TODO:
-   * Set the page data - This is used to catch the "changes" event.
-   * We must to re-check the name late.
-   */
-  __DOTCMS_UVE_EVENT__["UVE_SET_PAGE_DATA"] = "uve-set-page-data";
-  /**
-   * Copy contentlet inline editing success
-   */
-  __DOTCMS_UVE_EVENT__["UVE_COPY_CONTENTLET_INLINE_EDITING_SUCCESS"] = "uve-copy-contentlet-inline-editing-success";
-})(__DOTCMS_UVE_EVENT__ || (__DOTCMS_UVE_EVENT__ = {}));
+import { UVEEventType, UVE_MODE, DotCMSUVEAction } from '@dotcms/types';
+import { __DOTCMS_UVE_EVENT__ } from '@dotcms/types/internal';
 
 /**
  * Calculates the bounding information for each page element within the given containers.
@@ -253,7 +218,7 @@ const getColumnPositionClasses = column => {
  *
  *
  * Helper function that returns an object containing the dotCMS data attributes.
- * @param {DotCMSContentlet} contentlet - The contentlet to get the attributes for
+ * @param {DotCMSBasicContentlet} contentlet - The contentlet to get the attributes for
  * @param {string} container - The container to get the attributes for
  * @returns {DotContentletAttributes} The dotCMS data attributes
  */
@@ -265,7 +230,7 @@ function getDotContentletAttributes(contentlet, container) {
     'data-dot-inode': contentlet?.inode,
     'data-dot-type': contentlet?.contentType,
     'data-dot-container': container,
-    'data-dot-on-number-of-pages': contentlet?.['onNumberOfPages']
+    'data-dot-on-number-of-pages': contentlet?.['onNumberOfPages'] || '1'
   };
 }
 /**
@@ -317,7 +282,7 @@ const getContainersData = (dotCMSPageAsset, columContainer) => {
  *
  * @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
+ * @returns {DotCMSBasicContentlet[]} Array of contentlets in the container
  *
  * @example
  * const contentlets = getContentletsInContainer(pageAsset, containerRef);
@@ -370,274 +335,345 @@ function getDotContainerAttributes({
   };
 }
 
-/* eslint-disable @typescript-eslint/no-explicit-any */
 /**
- * Sets up scroll event handlers for the window to notify the editor about scroll events.
- * Adds listeners for both 'scroll' and 'scrollend' events, sending appropriate messages
- * to the editor when these events occur.
+ * Subscribes to content changes in the UVE editor
+ *
+ * @param {UVEEventHandler} callback - Function to be called when content changes are detected
+ * @returns {Object} Object containing unsubscribe function and event type
+ * @returns {Function} .unsubscribe - Function to remove the event listener
+ * @returns {UVEEventType} .event - The event type being subscribed to
+ * @internal
  */
-function scrollHandler() {
-  const scrollCallback = () => {
-    sendMessageToUVE({
-      action: DotCMSUVEAction.IFRAME_SCROLL
-    });
-  };
-  const scrollEndCallback = () => {
-    sendMessageToUVE({
-      action: DotCMSUVEAction.IFRAME_SCROLL_END
-    });
+function onContentChanges(callback) {
+  const messageCallback = event => {
+    if (event.data.name === __DOTCMS_UVE_EVENT__.UVE_SET_PAGE_DATA) {
+      callback(event.data.payload);
+    }
   };
-  window.addEventListener('scroll', scrollCallback);
-  window.addEventListener('scrollend', scrollEndCallback);
+  window.addEventListener('message', messageCallback);
   return {
-    destroyScrollHandler: () => {
-      window.removeEventListener('scroll', scrollCallback);
-      window.removeEventListener('scrollend', scrollEndCallback);
-    }
+    unsubscribe: () => {
+      window.removeEventListener('message', messageCallback);
+    },
+    event: UVEEventType.CONTENT_CHANGES
   };
 }
 /**
- * Adds 'empty-contentlet' class to contentlet elements that have no height.
- * This helps identify and style empty contentlets in the editor view.
+ * Subscribes to page reload events in the UVE editor
  *
- * @remarks
- * The function queries all elements with data-dot-object="contentlet" attribute
- * and checks their clientHeight. If an element has no height (clientHeight = 0),
- * it adds the 'empty-contentlet' class to that element.
+ * @param {UVEEventHandler} callback - Function to be called when page reload is triggered
+ * @returns {Object} Object containing unsubscribe function and event type
+ * @returns {Function} .unsubscribe - Function to remove the event listener
+ * @returns {UVEEventType} .event - The event type being subscribed to
+ * @internal
  */
-function addClassToEmptyContentlets() {
-  const contentlets = document.querySelectorAll('[data-dot-object="contentlet"]');
-  contentlets.forEach(contentlet => {
-    if (contentlet.clientHeight) {
-      return;
+function onPageReload(callback) {
+  const messageCallback = event => {
+    if (event.data.name === __DOTCMS_UVE_EVENT__.UVE_RELOAD_PAGE) {
+      callback();
     }
-    contentlet.classList.add('empty-contentlet');
-  });
+  };
+  window.addEventListener('message', messageCallback);
+  return {
+    unsubscribe: () => {
+      window.removeEventListener('message', messageCallback);
+    },
+    event: UVEEventType.PAGE_RELOAD
+  };
 }
 /**
- * Registers event handlers for various UVE (Universal Visual Editor) events.
- *
- * This function sets up subscriptions for:
- * - Page reload events that refresh the window
- * - Bounds request events to update editor boundaries
- * - Iframe scroll events to handle smooth scrolling within bounds
- * - Contentlet hover events to notify the editor
+ * Subscribes to request bounds events in the UVE editor
  *
- * @remarks
- * For scroll events, the function includes logic to prevent scrolling beyond
- * the top or bottom boundaries of the iframe, which helps maintain proper
- * scroll event handling.
+ * @param {UVEEventHandler} callback - Function to be called when bounds are requested
+ * @returns {Object} Object containing unsubscribe function and event type
+ * @returns {Function} .unsubscribe - Function to remove the event listener
+ * @returns {UVEEventType} .event - The event type being subscribed to
+ * @internal
  */
-function registerUVEEvents() {
-  const pageReloadSubscription = createUVESubscription(UVEEventType.PAGE_RELOAD, () => {
-    window.location.reload();
-  });
-  const requestBoundsSubscription = createUVESubscription(UVEEventType.REQUEST_BOUNDS, bounds => {
-    setBounds(bounds);
-  });
-  const iframeScrollSubscription = createUVESubscription(UVEEventType.IFRAME_SCROLL, direction => {
-    if (window.scrollY === 0 && direction === 'up' || computeScrollIsInBottom() && direction === 'down') {
-      // If the iframe scroll is at the top or bottom, do not send anything.
-      // This avoids losing the scrollend event.
-      return;
+function onRequestBounds(callback) {
+  const messageCallback = event => {
+    if (event.data.name === __DOTCMS_UVE_EVENT__.UVE_REQUEST_BOUNDS) {
+      const containers = Array.from(document.querySelectorAll('[data-dot-object="container"]'));
+      const positionData = getDotCMSPageBounds(containers);
+      callback(positionData);
     }
-    const scrollY = direction === 'up' ? -120 : 120;
-    window.scrollBy({
-      left: 0,
-      top: scrollY,
-      behavior: 'smooth'
-    });
-  });
-  const contentletHoveredSubscription = createUVESubscription(UVEEventType.CONTENTLET_HOVERED, contentletHovered => {
-    sendMessageToUVE({
-      action: DotCMSUVEAction.SET_CONTENTLET,
-      payload: contentletHovered
-    });
-  });
+  };
+  window.addEventListener('message', messageCallback);
   return {
-    subscriptions: [pageReloadSubscription, requestBoundsSubscription, iframeScrollSubscription, contentletHoveredSubscription]
+    unsubscribe: () => {
+      window.removeEventListener('message', messageCallback);
+    },
+    event: UVEEventType.REQUEST_BOUNDS
   };
 }
 /**
- * Notifies the editor that the UVE client is ready to receive messages.
- *
- * This function sends a message to the editor indicating that the client-side
- * initialization is complete and it's ready to handle editor interactions.
+ * Subscribes to iframe scroll events in the UVE editor
  *
- * @remarks
- * This is typically called after all UVE event handlers and DOM listeners
- * have been set up successfully.
+ * @param {UVEEventHandler} callback - Function to be called when iframe scroll occurs
+ * @returns {Object} Object containing unsubscribe function and event type
+ * @returns {Function} .unsubscribe - Function to remove the event listener
+ * @returns {UVEEventType} .event - The event type being subscribed to
+ * @internal
  */
-function setClientIsReady(config) {
-  sendMessageToUVE({
-    action: DotCMSUVEAction.CLIENT_READY,
-    payload: config
-  });
+function onIframeScroll(callback) {
+  const messageCallback = event => {
+    if (event.data.name === __DOTCMS_UVE_EVENT__.UVE_SCROLL_INSIDE_IFRAME) {
+      const direction = event.data.direction;
+      callback(direction);
+    }
+  };
+  window.addEventListener('message', messageCallback);
+  return {
+    unsubscribe: () => {
+      window.removeEventListener('message', messageCallback);
+    },
+    event: UVEEventType.IFRAME_SCROLL
+  };
 }
 /**
- * Listen for block editor inline event.
+ * Subscribes to contentlet hover events in the UVE editor
+ *
+ * @param {UVEEventHandler} callback - Function to be called when a contentlet is hovered
+ * @returns {Object} Object containing unsubscribe function and event type
+ * @returns {Function} .unsubscribe - Function to remove the event listener
+ * @returns {UVEEventType} .event - The event type being subscribed to
+ * @internal
  */
-function listenBlockEditorInlineEvent() {
-  if (document.readyState === 'complete') {
-    // The page is fully loaded or interactive
-    listenBlockEditorClick();
-    return {
-      destroyListenBlockEditorInlineEvent: () => {
-        window.removeEventListener('load', () => listenBlockEditorClick());
-      }
+function onContentletHovered(callback) {
+  const pointerMoveCallback = event => {
+    const foundElement = findDotCMSElement(event.target);
+    if (!foundElement) return;
+    const {
+      x,
+      y,
+      width,
+      height
+    } = foundElement.getBoundingClientRect();
+    const isContainer = foundElement.dataset?.['dotObject'] === 'container';
+    const contentletForEmptyContainer = {
+      identifier: 'TEMP_EMPTY_CONTENTLET',
+      title: 'TEMP_EMPTY_CONTENTLET',
+      contentType: 'TEMP_EMPTY_CONTENTLET_TYPE',
+      inode: 'TEMPY_EMPTY_CONTENTLET_INODE',
+      widgetTitle: 'TEMP_EMPTY_CONTENTLET',
+      baseType: 'TEMP_EMPTY_CONTENTLET',
+      onNumberOfPages: 1
     };
-  }
-  window.addEventListener('load', () => listenBlockEditorClick());
+    const contentlet = {
+      identifier: foundElement.dataset?.['dotIdentifier'],
+      title: foundElement.dataset?.['dotTitle'],
+      inode: foundElement.dataset?.['dotInode'],
+      contentType: foundElement.dataset?.['dotType'],
+      baseType: foundElement.dataset?.['dotBasetype'],
+      widgetTitle: foundElement.dataset?.['dotWidgetTitle'],
+      onNumberOfPages: foundElement.dataset?.['dotOnNumberOfPages']
+    };
+    const vtlFiles = findDotCMSVTLData(foundElement);
+    const contentletPayload = {
+      container:
+      // Here extract dot-container from contentlet if it is Headless
+      // or search in parent container if it is VTL
+      foundElement.dataset?.['dotContainer'] ? JSON.parse(foundElement.dataset?.['dotContainer']) : getClosestDotCMSContainerData(foundElement),
+      contentlet: isContainer ? contentletForEmptyContainer : contentlet,
+      vtlFiles
+    };
+    const contentletHoveredPayload = {
+      x,
+      y,
+      width,
+      height,
+      payload: contentletPayload
+    };
+    callback(contentletHoveredPayload);
+  };
+  document.addEventListener('pointermove', pointerMoveCallback);
   return {
-    destroyListenBlockEditorInlineEvent: () => {
-      window.removeEventListener('load', () => listenBlockEditorClick());
-    }
+    unsubscribe: () => {
+      document.removeEventListener('pointermove', pointerMoveCallback);
+    },
+    event: UVEEventType.CONTENTLET_HOVERED
   };
 }
-const listenBlockEditorClick = () => {
-  const editBlockEditorNodes = document.querySelectorAll('[data-block-editor-content]');
-  if (!editBlockEditorNodes.length) {
-    return;
-  }
-  editBlockEditorNodes.forEach(node => {
-    const {
-      inode,
-      language = '1',
-      contentType,
-      fieldName,
-      blockEditorContent
-    } = node.dataset;
-    const content = JSON.parse(blockEditorContent || '');
-    if (!inode || !language || !contentType || !fieldName) {
-      console.error('Missing data attributes for block editor inline editing.');
-      console.warn('inode, language, contentType and fieldName are required.');
-      return;
-    }
-    node.classList.add('dotcms__inline-edit-field');
-    node.addEventListener('click', () => {
-      initInlineEditing('BLOCK_EDITOR', {
-        inode,
-        content,
-        language: parseInt(language),
-        fieldName,
-        contentType
-      });
-    });
-  });
-};
 
 /**
- * Post message to dotcms page editor
+ * Events that can be subscribed to in the UVE
  *
- * @export
- * @template T
- * @param {DotCMSUVEMessage<T>} message
+ * @internal
+ * @type {Record<UVEEventType, UVEEventSubscriber>}
  */
-function sendMessageToUVE(message) {
-  window.parent.postMessage(message, '*');
-}
+const __UVE_EVENTS__ = {
+  [UVEEventType.CONTENT_CHANGES]: callback => {
+    return onContentChanges(callback);
+  },
+  [UVEEventType.PAGE_RELOAD]: callback => {
+    return onPageReload(callback);
+  },
+  [UVEEventType.REQUEST_BOUNDS]: callback => {
+    return onRequestBounds(callback);
+  },
+  [UVEEventType.IFRAME_SCROLL]: callback => {
+    return onIframeScroll(callback);
+  },
+  [UVEEventType.CONTENTLET_HOVERED]: callback => {
+    return onContentletHovered(callback);
+  }
+};
 /**
- * You can use this function to edit a contentlet in the editor.
+ * Default UVE event
  *
- * Calling this function inside the editor, will prompt the UVE to open a dialog to edit the contentlet.
+ * @param {string} event - The event to subscribe to.
+ * @internal
+ */
+const __UVE_EVENT_ERROR_FALLBACK__ = event => {
+  return {
+    unsubscribe: () => {
+      /* do nothing */
+    },
+    event
+  };
+};
+/**
+ * Development mode
  *
- * @export
- * @template T
- * @param {Contentlet<T>} contentlet - The contentlet to edit.
+ * @internal
  */
-function editContentlet(contentlet) {
-  sendMessageToUVE({
-    action: DotCMSUVEAction.EDIT_CONTENTLET,
-    payload: contentlet
-  });
-}
-/*
- * Reorders the menu based on the provided configuration.
+const DEVELOPMENT_MODE = 'development';
+/**
+ * Production mode
  *
- * @param {ReorderMenuConfig} [config] - Optional configuration for reordering the menu.
- * @param {number} [config.startLevel=1] - The starting level of the menu to reorder.
- * @param {number} [config.depth=2] - The depth of the menu to reorder.
+ * @internal
+ */
+const PRODUCTION_MODE = 'production';
+/**
+ * End class
  *
- * This function constructs a URL for the reorder menu page with the specified
- * start level and depth, and sends a message to the editor to perform the reorder action.
+ * @internal
  */
-function reorderMenu(config) {
-  const {
-    startLevel = 1,
-    depth = 2
-  } = config || {};
-  sendMessageToUVE({
-    action: DotCMSUVEAction.REORDER_MENU,
-    payload: {
-      startLevel,
-      depth
-    }
-  });
-}
+const END_CLASS = 'col-end-';
 /**
- * Initializes the inline editing in the editor.
+ * Start class
+ *
+ * @internal
+ */
+const START_CLASS = 'col-start-';
+/**
+ * Empty container style for React
+ *
+ * @internal
+ */
+const EMPTY_CONTAINER_STYLE_REACT = {
+  width: '100%',
+  backgroundColor: '#ECF0FD',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  color: '#030E32',
+  height: '10rem'
+};
+/**
+ * Empty container style for Angular
+ *
+ * @internal
+ */
+const EMPTY_CONTAINER_STYLE_ANGULAR = {
+  width: '100%',
+  'background-color': '#ECF0FD',
+  display: 'flex',
+  'justify-content': 'center',
+  'align-items': 'center',
+  color: '#030E32',
+  height: '10rem'
+};
+/**
+ * Custom no component
+ *
+ * @internal
+ */
+const CUSTOM_NO_COMPONENT = 'CustomNoComponent';
+
+/**
+ * Gets the current state of the Universal Visual Editor (UVE).
+ *
+ * This function checks if the code is running inside the DotCMS Universal Visual Editor
+ * and returns information about its current state, including the editor mode.
  *
  * @export
- * @param {INLINE_EDITING_EVENT_KEY} type
- * @param {InlineEditEventData} eventData
- * @return {*}
+ * @return {UVEState | undefined} Returns the UVE state object if running inside the editor,
+ * undefined otherwise.
  *
- *  * @example
- * ```html
- * <div onclick="initInlineEditing('BLOCK_EDITOR', { inode, languageId, contentType, fieldName, content })">
- *      ${My Content}
- * </div>
+ * The state includes:
+ * - mode: The current editor mode (preview, edit, live)
+ * - languageId: The language ID of the current page setted on the UVE
+ * - persona: The persona of the current page setted on the UVE
+ * - variantName: The name of the current variant
+ * - experimentId: The ID of the current experiment
+ * - publishDate: The publish date of the current page setted on the UVE
+ *
+ * @note The absence of any of these properties means that the value is the default one.
+ *
+ * @example
+ * ```ts
+ * const editorState = getUVEState();
+ * if (editorState?.mode === 'edit') {
+ *   // Enable editing features
+ * }
  * ```
  */
-function initInlineEditing(type, data) {
-  sendMessageToUVE({
-    action: DotCMSUVEAction.INIT_INLINE_EDITING,
-    payload: {
-      type,
-      data
-    }
-  });
+function getUVEState() {
+  if (typeof window === 'undefined' || window.parent === window || !window.location) {
+    return undefined;
+  }
+  const url = new URL(window.location.href);
+  const possibleModes = Object.values(UVE_MODE);
+  let mode = url.searchParams.get('mode') ?? UVE_MODE.EDIT;
+  const languageId = url.searchParams.get('language_id');
+  const persona = url.searchParams.get('personaId');
+  const variantName = url.searchParams.get('variantName');
+  const experimentId = url.searchParams.get('experimentId');
+  const publishDate = url.searchParams.get('publishDate');
+  const dotCMSHost = url.searchParams.get('dotCMSHost');
+  if (!possibleModes.includes(mode)) {
+    mode = UVE_MODE.EDIT;
+  }
+  return {
+    mode,
+    languageId,
+    persona,
+    variantName,
+    experimentId,
+    publishDate,
+    dotCMSHost
+  };
 }
 /**
- * Initializes the Universal Visual Editor (UVE) with required handlers and event listeners.
- *
- * This function sets up:
- * - Scroll handling
- * - Empty contentlet styling
- * - Block editor inline event listening
- * - Client ready state
- * - UVE event subscriptions
+ * Creates a subscription to a UVE event.
  *
- * @returns {Object} An object containing the cleanup function
- * @returns {Function} destroyUVESubscriptions - Function to clean up all UVE event subscriptions
+ * @param eventType - The type of event to subscribe to
+ * @param callback - The callback function that will be called when the event occurs
+ * @returns An event subscription that can be used to unsubscribe
  *
  * @example
- * ```typescript
- * const { destroyUVESubscriptions } = initUVE();
+ * ```ts
+ * // Subscribe to page changes
+ * const subscription = createUVESubscription(UVEEventType.CONTENT_CHANGES, (changes) => {
+ *   console.log('Content changes:', changes);
+ * });
  *
- * // When done with UVE
- * destroyUVESubscriptions();
+ * // Later, unsubscribe when no longer needed
+ * subscription.unsubscribe();
  * ```
  */
-function initUVE(config = {}) {
-  addClassToEmptyContentlets();
-  setClientIsReady(config);
-  const {
-    subscriptions
-  } = registerUVEEvents();
-  const {
-    destroyScrollHandler
-  } = scrollHandler();
-  const {
-    destroyListenBlockEditorInlineEvent
-  } = listenBlockEditorInlineEvent();
-  return {
-    destroyUVESubscriptions: () => {
-      subscriptions.forEach(subscription => subscription.unsubscribe());
-      destroyScrollHandler();
-      destroyListenBlockEditorInlineEvent();
-    }
-  };
+function createUVESubscription(eventType, callback) {
+  if (!getUVEState()) {
+    console.warn('UVE Subscription: Not running inside UVE');
+    return __UVE_EVENT_ERROR_FALLBACK__(eventType);
+  }
+  const eventCallback = __UVE_EVENTS__[eventType];
+  if (!eventCallback) {
+    console.error(`UVE Subscription: Event ${eventType} not found`);
+    return __UVE_EVENT_ERROR_FALLBACK__(eventType);
+  }
+  return eventCallback(callback);
 }
 
 /**
@@ -739,383 +775,274 @@ const isValidBlocks = blocks => {
   };
 };
 
+/* eslint-disable @typescript-eslint/no-explicit-any */
 /**
- * Enum representing the different types of blocks available in the Block Editor
- *
- * @export
- * @enum {string}
+ * Sets up scroll event handlers for the window to notify the editor about scroll events.
+ * Adds listeners for both 'scroll' and 'scrollend' events, sending appropriate messages
+ * to the editor when these events occur.
  */
-var Blocks;
-(function (Blocks) {
-  /** Represents a paragraph block */
-  Blocks["PARAGRAPH"] = "paragraph";
-  /** Represents a heading block */
-  Blocks["HEADING"] = "heading";
-  /** Represents a text block */
-  Blocks["TEXT"] = "text";
-  /** Represents a bullet/unordered list block */
-  Blocks["BULLET_LIST"] = "bulletList";
-  /** Represents an ordered/numbered list block */
-  Blocks["ORDERED_LIST"] = "orderedList";
-  /** Represents a list item within a list block */
-  Blocks["LIST_ITEM"] = "listItem";
-  /** Represents a blockquote block */
-  Blocks["BLOCK_QUOTE"] = "blockquote";
-  /** Represents a code block */
-  Blocks["CODE_BLOCK"] = "codeBlock";
-  /** Represents a hard break (line break) */
-  Blocks["HARDBREAK"] = "hardBreak";
-  /** Represents a horizontal rule/divider */
-  Blocks["HORIZONTAL_RULE"] = "horizontalRule";
-  /** Represents a DotCMS image block */
-  Blocks["DOT_IMAGE"] = "dotImage";
-  /** Represents a DotCMS video block */
-  Blocks["DOT_VIDEO"] = "dotVideo";
-  /** Represents a table block */
-  Blocks["TABLE"] = "table";
-  /** Represents a DotCMS content block */
-  Blocks["DOT_CONTENT"] = "dotContent";
-})(Blocks || (Blocks = {}));
-
-/**
- * Subscribes to content changes in the UVE editor
- *
- * @param {UVEEventHandler} callback - Function to be called when content changes are detected
- * @returns {Object} Object containing unsubscribe function and event type
- * @returns {Function} .unsubscribe - Function to remove the event listener
- * @returns {UVEEventType} .event - The event type being subscribed to
- * @internal
- */
-function onContentChanges(callback) {
-  const messageCallback = event => {
-    if (event.data.name === __DOTCMS_UVE_EVENT__.UVE_SET_PAGE_DATA) {
-      callback(event.data.payload);
-    }
+function scrollHandler() {
+  const scrollCallback = () => {
+    sendMessageToUVE({
+      action: DotCMSUVEAction.IFRAME_SCROLL
+    });
   };
-  window.addEventListener('message', messageCallback);
+  const scrollEndCallback = () => {
+    sendMessageToUVE({
+      action: DotCMSUVEAction.IFRAME_SCROLL_END
+    });
+  };
+  window.addEventListener('scroll', scrollCallback);
+  window.addEventListener('scrollend', scrollEndCallback);
   return {
-    unsubscribe: () => {
-      window.removeEventListener('message', messageCallback);
-    },
-    event: UVEEventType.CONTENT_CHANGES
+    destroyScrollHandler: () => {
+      window.removeEventListener('scroll', scrollCallback);
+      window.removeEventListener('scrollend', scrollEndCallback);
+    }
   };
 }
 /**
- * Subscribes to page reload events in the UVE editor
+ * Adds 'empty-contentlet' class to contentlet elements that have no height.
+ * This helps identify and style empty contentlets in the editor view.
  *
- * @param {UVEEventHandler} callback - Function to be called when page reload is triggered
- * @returns {Object} Object containing unsubscribe function and event type
- * @returns {Function} .unsubscribe - Function to remove the event listener
- * @returns {UVEEventType} .event - The event type being subscribed to
- * @internal
+ * @remarks
+ * The function queries all elements with data-dot-object="contentlet" attribute
+ * and checks their clientHeight. If an element has no height (clientHeight = 0),
+ * it adds the 'empty-contentlet' class to that element.
  */
-function onPageReload(callback) {
-  const messageCallback = event => {
-    if (event.data.name === __DOTCMS_UVE_EVENT__.UVE_RELOAD_PAGE) {
-      callback();
+function addClassToEmptyContentlets() {
+  const contentlets = document.querySelectorAll('[data-dot-object="contentlet"]');
+  contentlets.forEach(contentlet => {
+    if (contentlet.clientHeight) {
+      return;
     }
-  };
-  window.addEventListener('message', messageCallback);
-  return {
-    unsubscribe: () => {
-      window.removeEventListener('message', messageCallback);
-    },
-    event: UVEEventType.PAGE_RELOAD
-  };
+    contentlet.classList.add('empty-contentlet');
+  });
 }
 /**
- * Subscribes to request bounds events in the UVE editor
+ * Registers event handlers for various UVE (Universal Visual Editor) events.
  *
- * @param {UVEEventHandler} callback - Function to be called when bounds are requested
- * @returns {Object} Object containing unsubscribe function and event type
- * @returns {Function} .unsubscribe - Function to remove the event listener
- * @returns {UVEEventType} .event - The event type being subscribed to
- * @internal
+ * This function sets up subscriptions for:
+ * - Page reload events that refresh the window
+ * - Bounds request events to update editor boundaries
+ * - Iframe scroll events to handle smooth scrolling within bounds
+ * - Contentlet hover events to notify the editor
+ *
+ * @remarks
+ * For scroll events, the function includes logic to prevent scrolling beyond
+ * the top or bottom boundaries of the iframe, which helps maintain proper
+ * scroll event handling.
  */
-function onRequestBounds(callback) {
-  const messageCallback = event => {
-    if (event.data.name === __DOTCMS_UVE_EVENT__.UVE_REQUEST_BOUNDS) {
-      const containers = Array.from(document.querySelectorAll('[data-dot-object="container"]'));
-      const positionData = getDotCMSPageBounds(containers);
-      callback(positionData);
+function registerUVEEvents() {
+  const pageReloadSubscription = createUVESubscription(UVEEventType.PAGE_RELOAD, () => {
+    window.location.reload();
+  });
+  const requestBoundsSubscription = createUVESubscription(UVEEventType.REQUEST_BOUNDS, bounds => {
+    setBounds(bounds);
+  });
+  const iframeScrollSubscription = createUVESubscription(UVEEventType.IFRAME_SCROLL, direction => {
+    if (window.scrollY === 0 && direction === 'up' || computeScrollIsInBottom() && direction === 'down') {
+      // If the iframe scroll is at the top or bottom, do not send anything.
+      // This avoids losing the scrollend event.
+      return;
     }
-  };
-  window.addEventListener('message', messageCallback);
+    const scrollY = direction === 'up' ? -120 : 120;
+    window.scrollBy({
+      left: 0,
+      top: scrollY,
+      behavior: 'smooth'
+    });
+  });
+  const contentletHoveredSubscription = createUVESubscription(UVEEventType.CONTENTLET_HOVERED, contentletHovered => {
+    sendMessageToUVE({
+      action: DotCMSUVEAction.SET_CONTENTLET,
+      payload: contentletHovered
+    });
+  });
   return {
-    unsubscribe: () => {
-      window.removeEventListener('message', messageCallback);
-    },
-    event: UVEEventType.REQUEST_BOUNDS
+    subscriptions: [pageReloadSubscription, requestBoundsSubscription, iframeScrollSubscription, contentletHoveredSubscription]
   };
 }
 /**
- * Subscribes to iframe scroll events in the UVE editor
+ * Notifies the editor that the UVE client is ready to receive messages.
  *
- * @param {UVEEventHandler} callback - Function to be called when iframe scroll occurs
- * @returns {Object} Object containing unsubscribe function and event type
- * @returns {Function} .unsubscribe - Function to remove the event listener
- * @returns {UVEEventType} .event - The event type being subscribed to
- * @internal
+ * This function sends a message to the editor indicating that the client-side
+ * initialization is complete and it's ready to handle editor interactions.
+ *
+ * @remarks
+ * This is typically called after all UVE event handlers and DOM listeners
+ * have been set up successfully.
  */
-function onIframeScroll(callback) {
-  const messageCallback = event => {
-    if (event.data.name === __DOTCMS_UVE_EVENT__.UVE_SCROLL_INSIDE_IFRAME) {
-      const direction = event.data.direction;
-      callback(direction);
-    }
-  };
-  window.addEventListener('message', messageCallback);
-  return {
-    unsubscribe: () => {
-      window.removeEventListener('message', messageCallback);
-    },
-    event: UVEEventType.IFRAME_SCROLL
-  };
+function setClientIsReady(config) {
+  sendMessageToUVE({
+    action: DotCMSUVEAction.CLIENT_READY,
+    payload: config
+  });
 }
 /**
- * Subscribes to contentlet hover events in the UVE editor
- *
- * @param {UVEEventHandler} callback - Function to be called when a contentlet is hovered
- * @returns {Object} Object containing unsubscribe function and event type
- * @returns {Function} .unsubscribe - Function to remove the event listener
- * @returns {UVEEventType} .event - The event type being subscribed to
- * @internal
+ * Listen for block editor inline event.
  */
-function onContentletHovered(callback) {
-  const pointerMoveCallback = event => {
-    const foundElement = findDotCMSElement(event.target);
-    if (!foundElement) return;
-    const {
-      x,
-      y,
-      width,
-      height
-    } = foundElement.getBoundingClientRect();
-    const isContainer = foundElement.dataset?.['dotObject'] === 'container';
-    const contentletForEmptyContainer = {
-      identifier: 'TEMP_EMPTY_CONTENTLET',
-      title: 'TEMP_EMPTY_CONTENTLET',
-      contentType: 'TEMP_EMPTY_CONTENTLET_TYPE',
-      inode: 'TEMPY_EMPTY_CONTENTLET_INODE',
-      widgetTitle: 'TEMP_EMPTY_CONTENTLET',
-      baseType: 'TEMP_EMPTY_CONTENTLET',
-      onNumberOfPages: 1
-    };
-    const contentlet = {
-      identifier: foundElement.dataset?.['dotIdentifier'],
-      title: foundElement.dataset?.['dotTitle'],
-      inode: foundElement.dataset?.['dotInode'],
-      contentType: foundElement.dataset?.['dotType'],
-      baseType: foundElement.dataset?.['dotBasetype'],
-      widgetTitle: foundElement.dataset?.['dotWidgetTitle'],
-      onNumberOfPages: foundElement.dataset?.['dotOnNumberOfPages']
-    };
-    const vtlFiles = findDotCMSVTLData(foundElement);
-    const contentletPayload = {
-      container:
-      // Here extract dot-container from contentlet if it is Headless
-      // or search in parent container if it is VTL
-      foundElement.dataset?.['dotContainer'] ? JSON.parse(foundElement.dataset?.['dotContainer']) : getClosestDotCMSContainerData(foundElement),
-      contentlet: isContainer ? contentletForEmptyContainer : contentlet,
-      vtlFiles
-    };
-    const contentletHoveredPayload = {
-      x,
-      y,
-      width,
-      height,
-      payload: contentletPayload
+function listenBlockEditorInlineEvent() {
+  if (document.readyState === 'complete') {
+    // The page is fully loaded or interactive
+    listenBlockEditorClick();
+    return {
+      destroyListenBlockEditorInlineEvent: () => {
+        window.removeEventListener('load', () => listenBlockEditorClick());
+      }
     };
-    callback(contentletHoveredPayload);
-  };
-  document.addEventListener('pointermove', pointerMoveCallback);
+  }
+  window.addEventListener('load', () => listenBlockEditorClick());
   return {
-    unsubscribe: () => {
-      document.removeEventListener('pointermove', pointerMoveCallback);
-    },
-    event: UVEEventType.CONTENTLET_HOVERED
+    destroyListenBlockEditorInlineEvent: () => {
+      window.removeEventListener('load', () => listenBlockEditorClick());
+    }
   };
 }
-
-/**
- * Events that can be subscribed to in the UVE
- *
- * @internal
- * @type {Record<UVEEventType, UVEEventSubscriber>}
- */
-const __UVE_EVENTS__ = {
-  [UVEEventType.CONTENT_CHANGES]: callback => {
-    return onContentChanges(callback);
-  },
-  [UVEEventType.PAGE_RELOAD]: callback => {
-    return onPageReload(callback);
-  },
-  [UVEEventType.REQUEST_BOUNDS]: callback => {
-    return onRequestBounds(callback);
-  },
-  [UVEEventType.IFRAME_SCROLL]: callback => {
-    return onIframeScroll(callback);
-  },
-  [UVEEventType.CONTENTLET_HOVERED]: callback => {
-    return onContentletHovered(callback);
+const listenBlockEditorClick = () => {
+  const editBlockEditorNodes = document.querySelectorAll('[data-block-editor-content]');
+  if (!editBlockEditorNodes.length) {
+    return;
   }
+  editBlockEditorNodes.forEach(node => {
+    const {
+      inode,
+      language = '1',
+      contentType,
+      fieldName,
+      blockEditorContent
+    } = node.dataset;
+    const content = JSON.parse(blockEditorContent || '');
+    if (!inode || !language || !contentType || !fieldName) {
+      console.error('Missing data attributes for block editor inline editing.');
+      console.warn('inode, language, contentType and fieldName are required.');
+      return;
+    }
+    node.classList.add('dotcms__inline-edit-field');
+    node.addEventListener('click', () => {
+      initInlineEditing('BLOCK_EDITOR', {
+        inode,
+        content,
+        language: parseInt(language),
+        fieldName,
+        contentType
+      });
+    });
+  });
 };
+
 /**
- * Default UVE event
- *
- * @param {string} event - The event to subscribe to.
- * @internal
- */
-const __UVE_EVENT_ERROR_FALLBACK__ = event => {
-  return {
-    unsubscribe: () => {
-      /* do nothing */
-    },
-    event
-  };
-};
-/**
- * Development mode
- *
- * @internal
- */
-const DEVELOPMENT_MODE = 'development';
-/**
- * Production mode
- *
- * @internal
- */
-const PRODUCTION_MODE = 'production';
-/**
- * End class
+ * Post message to dotcms page editor
  *
- * @internal
+ * @export
+ * @template T
+ * @param {DotCMSUVEMessage<T>} message
  */
-const END_CLASS = 'col-end-';
+function sendMessageToUVE(message) {
+  window.parent.postMessage(message, '*');
+}
 /**
- * Start class
+ * You can use this function to edit a contentlet in the editor.
  *
- * @internal
- */
-const START_CLASS = 'col-start-';
-/**
- * Empty container style for React
+ * Calling this function inside the editor, will prompt the UVE to open a dialog to edit the contentlet.
  *
- * @internal
+ * @export
+ * @template T
+ * @param {Contentlet<T>} contentlet - The contentlet to edit.
  */
-const EMPTY_CONTAINER_STYLE_REACT = {
-  width: '100%',
-  backgroundColor: '#ECF0FD',
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  color: '#030E32',
-  height: '10rem'
-};
-/**
- * Empty container style for Angular
+function editContentlet(contentlet) {
+  sendMessageToUVE({
+    action: DotCMSUVEAction.EDIT_CONTENTLET,
+    payload: contentlet
+  });
+}
+/*
+ * Reorders the menu based on the provided configuration.
  *
- * @internal
- */
-const EMPTY_CONTAINER_STYLE_ANGULAR = {
-  width: '100%',
-  'background-color': '#ECF0FD',
-  display: 'flex',
-  'justify-content': 'center',
-  'align-items': 'center',
-  color: '#030E32',
-  height: '10rem'
-};
-/**
- * Custom no component
+ * @param {ReorderMenuConfig} [config] - Optional configuration for reordering the menu.
+ * @param {number} [config.startLevel=1] - The starting level of the menu to reorder.
+ * @param {number} [config.depth=2] - The depth of the menu to reorder.
  *
- * @internal
+ * This function constructs a URL for the reorder menu page with the specified
+ * start level and depth, and sends a message to the editor to perform the reorder action.
  */
-const CUSTOM_NO_COMPONENT = 'CustomNoComponent';
-
+function reorderMenu(config) {
+  const {
+    startLevel = 1,
+    depth = 2
+  } = config || {};
+  sendMessageToUVE({
+    action: DotCMSUVEAction.REORDER_MENU,
+    payload: {
+      startLevel,
+      depth
+    }
+  });
+}
 /**
- * Gets the current state of the Universal Visual Editor (UVE).
- *
- * This function checks if the code is running inside the DotCMS Universal Visual Editor
- * and returns information about its current state, including the editor mode.
+ * Initializes the inline editing in the editor.
  *
  * @export
- * @return {UVEState | undefined} Returns the UVE state object if running inside the editor,
- * undefined otherwise.
- *
- * The state includes:
- * - mode: The current editor mode (preview, edit, live)
- * - languageId: The language ID of the current page setted on the UVE
- * - persona: The persona of the current page setted on the UVE
- * - variantName: The name of the current variant
- * - experimentId: The ID of the current experiment
- * - publishDate: The publish date of the current page setted on the UVE
- *
- * @note The absence of any of these properties means that the value is the default one.
+ * @param {INLINE_EDITING_EVENT_KEY} type
+ * @param {InlineEditEventData} eventData
+ * @return {*}
  *
- * @example
- * ```ts
- * const editorState = getUVEState();
- * if (editorState?.mode === 'edit') {
- *   // Enable editing features
- * }
+ *  * @example
+ * ```html
+ * <div onclick="initInlineEditing('BLOCK_EDITOR', { inode, languageId, contentType, fieldName, content })">
+ *      ${My Content}
+ * </div>
  * ```
  */
-function getUVEState() {
-  if (typeof window === 'undefined' || window.parent === window || !window.location) {
-    return undefined;
-  }
-  const url = new URL(window.location.href);
-  const possibleModes = Object.values(UVE_MODE);
-  let mode = url.searchParams.get('mode') ?? UVE_MODE.EDIT;
-  const languageId = url.searchParams.get('language_id');
-  const persona = url.searchParams.get('personaId');
-  const variantName = url.searchParams.get('variantName');
-  const experimentId = url.searchParams.get('experimentId');
-  const publishDate = url.searchParams.get('publishDate');
-  const dotCMSHost = url.searchParams.get('dotCMSHost');
-  if (!possibleModes.includes(mode)) {
-    mode = UVE_MODE.EDIT;
-  }
-  return {
-    mode,
-    languageId,
-    persona,
-    variantName,
-    experimentId,
-    publishDate,
-    dotCMSHost
-  };
+function initInlineEditing(type, data) {
+  sendMessageToUVE({
+    action: DotCMSUVEAction.INIT_INLINE_EDITING,
+    payload: {
+      type,
+      data
+    }
+  });
 }
 /**
- * Creates a subscription to a UVE event.
+ * Initializes the Universal Visual Editor (UVE) with required handlers and event listeners.
  *
- * @param eventType - The type of event to subscribe to
- * @param callback - The callback function that will be called when the event occurs
- * @returns An event subscription that can be used to unsubscribe
+ * This function sets up:
+ * - Scroll handling
+ * - Empty contentlet styling
+ * - Block editor inline event listening
+ * - Client ready state
+ * - UVE event subscriptions
+ *
+ * @returns {Object} An object containing the cleanup function
+ * @returns {Function} destroyUVESubscriptions - Function to clean up all UVE event subscriptions
  *
  * @example
- * ```ts
- * // Subscribe to page changes
- * const subscription = createUVESubscription(UVEEventType.CONTENT_CHANGES, (changes) => {
- *   console.log('Content changes:', changes);
- * });
+ * ```typescript
+ * const { destroyUVESubscriptions } = initUVE();
  *
- * // Later, unsubscribe when no longer needed
- * subscription.unsubscribe();
+ * // When done with UVE
+ * destroyUVESubscriptions();
  * ```
  */
-function createUVESubscription(eventType, callback) {
-  if (!getUVEState()) {
-    console.warn('UVE Subscription: Not running inside UVE');
-    return __UVE_EVENT_ERROR_FALLBACK__(eventType);
-  }
-  const eventCallback = __UVE_EVENTS__[eventType];
-  if (!eventCallback) {
-    console.error(`UVE Subscription: Event ${eventType} not found`);
-    return __UVE_EVENT_ERROR_FALLBACK__(eventType);
-  }
-  return eventCallback(callback);
+function initUVE(config = {}) {
+  addClassToEmptyContentlets();
+  setClientIsReady(config);
+  const {
+    subscriptions
+  } = registerUVEEvents();
+  const {
+    destroyScrollHandler
+  } = scrollHandler();
+  const {
+    destroyListenBlockEditorInlineEvent
+  } = listenBlockEditorInlineEvent();
+  return {
+    destroyUVESubscriptions: () => {
+      subscriptions.forEach(subscription => subscription.unsubscribe());
+      destroyScrollHandler();
+      destroyListenBlockEditorInlineEvent();
+    }
+  };
 }
 
-export { Blocks as B, CUSTOM_NO_COMPONENT as C, DEVELOPMENT_MODE as D, END_CLASS as E, PRODUCTION_MODE as P, START_CLASS as S, __UVE_EVENTS__ as _, __UVE_EVENT_ERROR_FALLBACK__ as a, EMPTY_CONTAINER_STYLE_REACT as b, EMPTY_CONTAINER_STYLE_ANGULAR as c, __DOTCMS_UVE_EVENT__ as d, getDotCMSContentletsBound as e, getDotCMSContainerData as f, getDotCMSPageBounds as g, getClosestDotCMSContainerData as h, findDotCMSElement as i, findDotCMSVTLData as j, computeScrollIsInBottom as k, combineClasses as l, getColumnPositionClasses as m, getDotContentletAttributes as n, getContainersData as o, getContentletsInContainer as p, getDotContainerAttributes as q, isValidBlocks as r, setBounds as s, getUVEState as t, createUVESubscription as u, sendMessageToUVE as v, editContentlet as w, reorderMenu as x, initInlineEditing as y, initUVE as z };
+export { CUSTOM_NO_COMPONENT as C, DEVELOPMENT_MODE as D, END_CLASS as E, PRODUCTION_MODE as P, START_CLASS as S, __UVE_EVENTS__ as _, initUVE as a, __UVE_EVENT_ERROR_FALLBACK__ as b, createUVESubscription as c, EMPTY_CONTAINER_STYLE_REACT as d, editContentlet as e, EMPTY_CONTAINER_STYLE_ANGULAR as f, getUVEState as g, getDotCMSPageBounds as h, initInlineEditing as i, getDotCMSContentletsBound as j, getDotCMSContainerData as k, getClosestDotCMSContainerData as l, findDotCMSElement as m, findDotCMSVTLData as n, computeScrollIsInBottom as o, combineClasses as p, getColumnPositionClasses as q, reorderMenu as r, sendMessageToUVE as s, getDotContentletAttributes as t, getContainersData as u, getContentletsInContainer as v, getDotContainerAttributes as w, setBounds as x, isValidBlocks as y };