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

package/{index.cjs2.js → public.cjs.js}

@@ -1,42 +1,7 @@
 'use strict';
 
-var types = require('./types.cjs.js');
-
-/**
- * Actions received from the dotcms editor
- *
- * @export
- * @enum {number}
- */
-exports.__DOTCMS_UVE_EVENT__ = void 0;
-(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";
-})(exports.__DOTCMS_UVE_EVENT__ || (exports.__DOTCMS_UVE_EVENT__ = {}));
+var types = require('@dotcms/types');
+var internal = require('@dotcms/types/internal');
 
 /**
  * Calculates the bounding information for each page element within the given containers.
@@ -255,7 +220,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
  */
@@ -267,7 +232,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'
   };
 }
 /**
@@ -319,7 +284,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);
@@ -372,274 +337,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: types.DotCMSUVEAction.IFRAME_SCROLL
-    });
-  };
-  const scrollEndCallback = () => {
-    sendMessageToUVE({
-      action: types.DotCMSUVEAction.IFRAME_SCROLL_END
-    });
+function onContentChanges(callback) {
+  const messageCallback = event => {
+    if (event.data.name === internal.__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: types.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 === internal.__DOTCMS_UVE_EVENT__.UVE_RELOAD_PAGE) {
+      callback();
     }
-    contentlet.classList.add('empty-contentlet');
-  });
+  };
+  window.addEventListener('message', messageCallback);
+  return {
+    unsubscribe: () => {
+      window.removeEventListener('message', messageCallback);
+    },
+    event: types.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(types.UVEEventType.PAGE_RELOAD, () => {
-    window.location.reload();
-  });
-  const requestBoundsSubscription = createUVESubscription(types.UVEEventType.REQUEST_BOUNDS, bounds => {
-    setBounds(bounds);
-  });
-  const iframeScrollSubscription = createUVESubscription(types.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 === internal.__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(types.UVEEventType.CONTENTLET_HOVERED, contentletHovered => {
-    sendMessageToUVE({
-      action: types.DotCMSUVEAction.SET_CONTENTLET,
-      payload: contentletHovered
-    });
-  });
+  };
+  window.addEventListener('message', messageCallback);
   return {
-    subscriptions: [pageReloadSubscription, requestBoundsSubscription, iframeScrollSubscription, contentletHoveredSubscription]
+    unsubscribe: () => {
+      window.removeEventListener('message', messageCallback);
+    },
+    event: types.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: types.DotCMSUVEAction.CLIENT_READY,
-    payload: config
-  });
+function onIframeScroll(callback) {
+  const messageCallback = event => {
+    if (event.data.name === internal.__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: types.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: types.UVEEventType.CONTENTLET_HOVERED
   };
 }
-const listenBlockEditorClick = () => {
-  const editBlockEditorNodes = document.querySelectorAll('[data-block-editor-content]');
-  if (!editBlockEditorNodes.length) {
-    return;
+
+/**
+ * Events that can be subscribed to in the UVE
+ *
+ * @internal
+ * @type {Record<UVEEventType, UVEEventSubscriber>}
+ */
+const __UVE_EVENTS__ = {
+  [types.UVEEventType.CONTENT_CHANGES]: callback => {
+    return onContentChanges(callback);
+  },
+  [types.UVEEventType.PAGE_RELOAD]: callback => {
+    return onPageReload(callback);
+  },
+  [types.UVEEventType.REQUEST_BOUNDS]: callback => {
+    return onRequestBounds(callback);
+  },
+  [types.UVEEventType.IFRAME_SCROLL]: callback => {
+    return onIframeScroll(callback);
+  },
+  [types.UVEEventType.CONTENTLET_HOVERED]: callback => {
+    return onContentletHovered(callback);
   }
-  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
+ * Default UVE event
  *
- * @export
- * @template T
- * @param {DotCMSUVEMessage<T>} message
+ * @param {string} event - The event to subscribe to.
+ * @internal
  */
-function sendMessageToUVE(message) {
-  window.parent.postMessage(message, '*');
-}
+const __UVE_EVENT_ERROR_FALLBACK__ = event => {
+  return {
+    unsubscribe: () => {
+      /* do nothing */
+    },
+    event
+  };
+};
 /**
- * You can use this function to edit a contentlet in the editor.
+ * Development mode
  *
- * Calling this function inside the editor, will prompt the UVE to open a dialog to edit the contentlet.
+ * @internal
+ */
+const DEVELOPMENT_MODE = 'development';
+/**
+ * Production mode
  *
- * @export
- * @template T
- * @param {Contentlet<T>} contentlet - The contentlet to edit.
+ * @internal
  */
-function editContentlet(contentlet) {
-  sendMessageToUVE({
-    action: types.DotCMSUVEAction.EDIT_CONTENTLET,
-    payload: contentlet
-  });
-}
-/*
- * Reorders the menu based on the provided configuration.
+const PRODUCTION_MODE = 'production';
+/**
+ * End class
  *
- * @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 END_CLASS = 'col-end-';
+/**
+ * Start 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: types.DotCMSUVEAction.REORDER_MENU,
-    payload: {
-      startLevel,
-      depth
-    }
-  });
-}
+const START_CLASS = 'col-start-';
 /**
- * Initializes the inline editing in the editor.
+ * 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: types.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(types.UVE_MODE);
+  let mode = url.searchParams.get('mode') ?? types.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 = types.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);
 }
 
 /**
@@ -741,383 +777,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.
  */
-exports.Blocks = void 0;
-(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";
-})(exports.Blocks || (exports.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 === exports.__DOTCMS_UVE_EVENT__.UVE_SET_PAGE_DATA) {
-      callback(event.data.payload);
-    }
+function scrollHandler() {
+  const scrollCallback = () => {
+    sendMessageToUVE({
+      action: types.DotCMSUVEAction.IFRAME_SCROLL
+    });
   };
-  window.addEventListener('message', messageCallback);
+  const scrollEndCallback = () => {
+    sendMessageToUVE({
+      action: types.DotCMSUVEAction.IFRAME_SCROLL_END
+    });
+  };
+  window.addEventListener('scroll', scrollCallback);
+  window.addEventListener('scrollend', scrollEndCallback);
   return {
-    unsubscribe: () => {
-      window.removeEventListener('message', messageCallback);
-    },
-    event: types.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 === exports.__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: types.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 === exports.__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(types.UVEEventType.PAGE_RELOAD, () => {
+    window.location.reload();
+  });
+  const requestBoundsSubscription = createUVESubscription(types.UVEEventType.REQUEST_BOUNDS, bounds => {
+    setBounds(bounds);
+  });
+  const iframeScrollSubscription = createUVESubscription(types.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(types.UVEEventType.CONTENTLET_HOVERED, contentletHovered => {
+    sendMessageToUVE({
+      action: types.DotCMSUVEAction.SET_CONTENTLET,
+      payload: contentletHovered
+    });
+  });
   return {
-    unsubscribe: () => {
-      window.removeEventListener('message', messageCallback);
-    },
-    event: types.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 === exports.__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: types.UVEEventType.IFRAME_SCROLL
-  };
+function setClientIsReady(config) {
+  sendMessageToUVE({
+    action: types.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: types.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__ = {
-  [types.UVEEventType.CONTENT_CHANGES]: callback => {
-    return onContentChanges(callback);
-  },
-  [types.UVEEventType.PAGE_RELOAD]: callback => {
-    return onPageReload(callback);
-  },
-  [types.UVEEventType.REQUEST_BOUNDS]: callback => {
-    return onRequestBounds(callback);
-  },
-  [types.UVEEventType.IFRAME_SCROLL]: callback => {
-    return onIframeScroll(callback);
-  },
-  [types.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: types.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: types.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(types.UVE_MODE);
-  let mode = url.searchParams.get('mode') ?? types.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 = types.UVE_MODE.EDIT;
-  }
-  return {
-    mode,
-    languageId,
-    persona,
-    variantName,
-    experimentId,
-    publishDate,
-    dotCMSHost
-  };
+function initInlineEditing(type, data) {
+  sendMessageToUVE({
+    action: types.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();
+    }
+  };
 }
 
 exports.CUSTOM_NO_COMPONENT = CUSTOM_NO_COMPONENT;