@dotcms/uve 0.0.1-beta.17 → 0.0.1-beta.18

package/index.cjs.js

@@ -1,94 +1,14 @@
 'use strict';
 
-var constants = require('./constants.cjs.js');
-var types = require('./types.cjs.js');
+var internal = require('./index.cjs2.js');
+require('./types.cjs.js');
 
-/**
- * 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
- * @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.
- *
- * @example
- * ```ts
- * const editorState = getUVEState();
- * if (editorState?.mode === 'edit') {
- *   // Enable editing features
- * }
- * ```
- */
-function getUVEState() {
-  if (typeof window === 'undefined' || window.parent === window || !window.location) {
-    return;
-  }
-  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');
-  if (!possibleModes.includes(mode)) {
-    mode = types.UVE_MODE.EDIT;
-  }
-  return {
-    mode,
-    languageId,
-    persona,
-    variantName,
-    experimentId,
-    publishDate
-  };
-}
-/**
- * Creates a subscription to a UVE event.
- *
- * @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
- * ```ts
- * // Subscribe to page changes
- * const subscription = createUVESubscription(UVEEventType.CONTENT_CHANGES, (changes) => {
- *   console.log('Content changes:', changes);
- * });
- *
- * // Later, unsubscribe when no longer needed
- * subscription.unsubscribe();
- * ```
- */
-function createUVESubscription(eventType, callback) {
-  if (!getUVEState()) {
-    console.warn('UVE Subscription: Not running inside UVE');
-    return constants.__UVE_EVENT_ERROR_FALLBACK__(eventType);
-  }
-  const eventCallback = constants.__UVE_EVENTS__[eventType];
-  if (!eventCallback) {
-    console.error(`UVE Subscription: Event ${eventType} not found`);
-    return constants.__UVE_EVENT_ERROR_FALLBACK__(eventType);
-  }
-  return eventCallback(callback);
-}
 
-exports.editContentlet = constants.editContentlet;
-exports.initInlineEditing = constants.initInlineEditing;
-exports.reorderMenu = constants.reorderMenu;
-exports.sendMessageToUVE = constants.sendMessageToUVE;
-exports.createUVESubscription = createUVESubscription;
-exports.getUVEState = getUVEState;
+
+exports.createUVESubscription = internal.createUVESubscription;
+exports.editContentlet = internal.editContentlet;
+exports.getUVEState = internal.getUVEState;
+exports.initInlineEditing = internal.initInlineEditing;
+exports.initUVE = internal.initUVE;
+exports.reorderMenu = internal.reorderMenu;
+exports.sendMessageToUVE = internal.sendMessageToUVE;

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

@@ -372,6 +372,161 @@ 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.
+ */
+function scrollHandler() {
+  const scrollCallback = () => {
+    sendMessageToUVE({
+      action: types.DotCMSUVEAction.IFRAME_SCROLL
+    });
+  };
+  const scrollEndCallback = () => {
+    sendMessageToUVE({
+      action: types.DotCMSUVEAction.IFRAME_SCROLL_END
+    });
+  };
+  window.addEventListener('scroll', scrollCallback);
+  window.addEventListener('scrollend', scrollEndCallback);
+  return {
+    destroyScrollHandler: () => {
+      window.removeEventListener('scroll', scrollCallback);
+      window.removeEventListener('scrollend', scrollEndCallback);
+    }
+  };
+}
+/**
+ * Adds 'empty-contentlet' class to contentlet elements that have no height.
+ * This helps identify and style empty contentlets in the editor view.
+ *
+ * @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 addClassToEmptyContentlets() {
+  const contentlets = document.querySelectorAll('[data-dot-object="contentlet"]');
+  contentlets.forEach(contentlet => {
+    if (contentlet.clientHeight) {
+      return;
+    }
+    contentlet.classList.add('empty-contentlet');
+  });
+}
+/**
+ * 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
+ *
+ * @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 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;
+    }
+    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 {
+    subscriptions: [pageReloadSubscription, requestBoundsSubscription, iframeScrollSubscription, contentletHoveredSubscription]
+  };
+}
+/**
+ * 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.
+ *
+ * @remarks
+ * This is typically called after all UVE event handlers and DOM listeners
+ * have been set up successfully.
+ */
+function setClientIsReady() {
+  sendMessageToUVE({
+    action: types.DotCMSUVEAction.CLIENT_READY
+  });
+}
+/**
+ * Listen for block editor inline event.
+ */
+function listenBlockEditorInlineEvent() {
+  if (document.readyState === 'complete') {
+    // The page is fully loaded or interactive
+    listenBlockEditorClick();
+    return {
+      destroyListenBlockEditorInlineEvent: () => {
+        window.removeEventListener('load', () => listenBlockEditorClick());
+      }
+    };
+  }
+  window.addEventListener('load', () => listenBlockEditorClick());
+  return {
+    destroyListenBlockEditorInlineEvent: () => {
+      window.removeEventListener('load', () => listenBlockEditorClick());
+    }
+  };
+}
+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
  *
@@ -444,6 +599,146 @@ function initInlineEditing(type, data) {
     }
   });
 }
+/**
+ * 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
+ *
+ * @returns {Object} An object containing the cleanup function
+ * @returns {Function} destroyUVESubscriptions - Function to clean up all UVE event subscriptions
+ *
+ * @example
+ * ```typescript
+ * const { destroyUVESubscriptions } = initUVE();
+ *
+ * // When done with UVE
+ * destroyUVESubscriptions();
+ * ```
+ */
+function initUVE() {
+  addClassToEmptyContentlets();
+  setClientIsReady();
+  const {
+    subscriptions
+  } = registerUVEEvents();
+  const {
+    destroyScrollHandler
+  } = scrollHandler();
+  const {
+    destroyListenBlockEditorInlineEvent
+  } = listenBlockEditorInlineEvent();
+  return {
+    destroyUVESubscriptions: () => {
+      subscriptions.forEach(subscription => subscription.unsubscribe());
+      destroyScrollHandler();
+      destroyListenBlockEditorInlineEvent();
+    }
+  };
+}
+
+/**
+ * Sets the bounds of the containers in the editor.
+ * Retrieves the containers from the DOM and sends their position data to the editor.
+ * @private
+ * @memberof DotCMSPageEditor
+ */
+function setBounds(bounds) {
+  sendMessageToUVE({
+    action: types.DotCMSUVEAction.SET_BOUNDS,
+    payload: bounds
+  });
+}
+/**
+ * Validates the structure of a Block Editor block.
+ *
+ * This function checks that:
+ * 1. The blocks parameter is a valid object
+ * 2. The block has a 'doc' type
+ * 3. The block has a valid content array that is not empty
+ *
+ * @param {Block} blocks - The blocks structure to validate
+ * @returns {BlockEditorState} Object containing validation state and any error message
+ * @property {boolean} BlockEditorState.isValid - Whether the blocks structure is valid
+ * @property {string | null} BlockEditorState.error - Error message if invalid, null if valid
+ */
+const isValidBlocks = blocks => {
+  if (!blocks) {
+    return {
+      error: `Error: Blocks object is not defined`
+    };
+  }
+  if (typeof blocks !== 'object') {
+    return {
+      error: `Error: Blocks must be an object, but received: ${typeof blocks}`
+    };
+  }
+  if (blocks.type !== 'doc') {
+    return {
+      error: `Error: Invalid block type. Expected 'doc' but received: '${blocks.type}'`
+    };
+  }
+  if (!blocks.content) {
+    return {
+      error: 'Error: Blocks content is missing'
+    };
+  }
+  if (!Array.isArray(blocks.content)) {
+    return {
+      error: `Error: Blocks content must be an array, but received: ${typeof blocks.content}`
+    };
+  }
+  if (blocks.content.length === 0) {
+    return {
+      error: 'Error: Blocks content is empty. At least one block is required.'
+    };
+  }
+  // Validate each block in the content array
+  for (let i = 0; i < blocks.content.length; i++) {
+    const block = blocks.content[i];
+    if (!block.type) {
+      return {
+        error: `Error: Block at index ${i} is missing required 'type' property`
+      };
+    }
+    if (typeof block.type !== 'string') {
+      return {
+        error: `Error: Block type at index ${i} must be a string, but received: ${typeof block.type}`
+      };
+    }
+    // Validate block attributes if present
+    if (block.attrs && typeof block.attrs !== 'object') {
+      return {
+        error: `Error: Block attributes at index ${i} must be an object, but received: ${typeof block.attrs}`
+      };
+    }
+    // Validate nested content if present
+    if (block.content) {
+      if (!Array.isArray(block.content)) {
+        return {
+          error: `Error: Block content at index ${i} must be an array, but received: ${typeof block.content}`
+        };
+      }
+      // Recursively validate nested blocks
+      const nestedValidation = isValidBlocks({
+        type: 'doc',
+        content: block.content
+      });
+      if (nestedValidation.error) {
+        return {
+          error: `Error in nested block at index ${i}: ${nestedValidation.error}`
+        };
+      }
+    }
+  }
+  return {
+    error: null
+  };
+};
 
 /**
  * Enum representing the different types of blocks available in the Block Editor
@@ -739,6 +1034,89 @@ const EMPTY_CONTAINER_STYLE_ANGULAR = {
  */
 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
+ * @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.
+ *
+ * @example
+ * ```ts
+ * const editorState = getUVEState();
+ * if (editorState?.mode === 'edit') {
+ *   // Enable editing features
+ * }
+ * ```
+ */
+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');
+  if (!possibleModes.includes(mode)) {
+    mode = types.UVE_MODE.EDIT;
+  }
+  return {
+    mode,
+    languageId,
+    persona,
+    variantName,
+    experimentId,
+    publishDate
+  };
+}
+/**
+ * Creates a subscription to a UVE event.
+ *
+ * @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
+ * ```ts
+ * // Subscribe to page changes
+ * const subscription = createUVESubscription(UVEEventType.CONTENT_CHANGES, (changes) => {
+ *   console.log('Content changes:', changes);
+ * });
+ *
+ * // Later, unsubscribe when no longer needed
+ * subscription.unsubscribe();
+ * ```
+ */
+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);
+}
+
 exports.CUSTOM_NO_COMPONENT = CUSTOM_NO_COMPONENT;
 exports.DEVELOPMENT_MODE = DEVELOPMENT_MODE;
 exports.EMPTY_CONTAINER_STYLE_ANGULAR = EMPTY_CONTAINER_STYLE_ANGULAR;
@@ -750,6 +1128,7 @@ exports.__UVE_EVENTS__ = __UVE_EVENTS__;
 exports.__UVE_EVENT_ERROR_FALLBACK__ = __UVE_EVENT_ERROR_FALLBACK__;
 exports.combineClasses = combineClasses;
 exports.computeScrollIsInBottom = computeScrollIsInBottom;
+exports.createUVESubscription = createUVESubscription;
 exports.editContentlet = editContentlet;
 exports.findDotCMSElement = findDotCMSElement;
 exports.findDotCMSVTLData = findDotCMSVTLData;
@@ -762,6 +1141,10 @@ exports.getDotCMSContentletsBound = getDotCMSContentletsBound;
 exports.getDotCMSPageBounds = getDotCMSPageBounds;
 exports.getDotContainerAttributes = getDotContainerAttributes;
 exports.getDotContentletAttributes = getDotContentletAttributes;
+exports.getUVEState = getUVEState;
 exports.initInlineEditing = initInlineEditing;
+exports.initUVE = initUVE;
+exports.isValidBlocks = isValidBlocks;
 exports.reorderMenu = reorderMenu;
 exports.sendMessageToUVE = sendMessageToUVE;
+exports.setBounds = setBounds;

package/index.esm.js

@@ -1,88 +1,2 @@
-import { _ as __UVE_EVENT_ERROR_FALLBACK__, a as __UVE_EVENTS__ } from './constants.esm.js';
-export { e as editContentlet, i as initInlineEditing, r as reorderMenu, s as sendMessageToUVE } from './constants.esm.js';
-import { UVE_MODE } from './types.esm.js';
-
-/**
- * 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
- * @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.
- *
- * @example
- * ```ts
- * const editorState = getUVEState();
- * if (editorState?.mode === 'edit') {
- *   // Enable editing features
- * }
- * ```
- */
-function getUVEState() {
-  if (typeof window === 'undefined' || window.parent === window || !window.location) {
-    return;
-  }
-  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');
-  if (!possibleModes.includes(mode)) {
-    mode = UVE_MODE.EDIT;
-  }
-  return {
-    mode,
-    languageId,
-    persona,
-    variantName,
-    experimentId,
-    publishDate
-  };
-}
-/**
- * Creates a subscription to a UVE event.
- *
- * @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
- * ```ts
- * // Subscribe to page changes
- * const subscription = createUVESubscription(UVEEventType.CONTENT_CHANGES, (changes) => {
- *   console.log('Content changes:', changes);
- * });
- *
- * // Later, unsubscribe when no longer needed
- * subscription.unsubscribe();
- * ```
- */
-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);
-}
-
-export { createUVESubscription, getUVEState };
+export { u as createUVESubscription, w as editContentlet, t as getUVEState, y as initInlineEditing, z as initUVE, x as reorderMenu, v as sendMessageToUVE } from './index.esm2.js';
+import './types.esm.js';

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

@@ -1,4 +1,4 @@
-import { DotCMSUVEAction, UVEEventType } from './types.esm.js';
+import { UVEEventType, DotCMSUVEAction, UVE_MODE } from './types.esm.js';
 
 /**
  * Actions received from the dotcms editor
@@ -370,6 +370,161 @@ 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.
+ */
+function scrollHandler() {
+  const scrollCallback = () => {
+    sendMessageToUVE({
+      action: DotCMSUVEAction.IFRAME_SCROLL
+    });
+  };
+  const scrollEndCallback = () => {
+    sendMessageToUVE({
+      action: DotCMSUVEAction.IFRAME_SCROLL_END
+    });
+  };
+  window.addEventListener('scroll', scrollCallback);
+  window.addEventListener('scrollend', scrollEndCallback);
+  return {
+    destroyScrollHandler: () => {
+      window.removeEventListener('scroll', scrollCallback);
+      window.removeEventListener('scrollend', scrollEndCallback);
+    }
+  };
+}
+/**
+ * Adds 'empty-contentlet' class to contentlet elements that have no height.
+ * This helps identify and style empty contentlets in the editor view.
+ *
+ * @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 addClassToEmptyContentlets() {
+  const contentlets = document.querySelectorAll('[data-dot-object="contentlet"]');
+  contentlets.forEach(contentlet => {
+    if (contentlet.clientHeight) {
+      return;
+    }
+    contentlet.classList.add('empty-contentlet');
+  });
+}
+/**
+ * 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
+ *
+ * @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 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;
+    }
+    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 {
+    subscriptions: [pageReloadSubscription, requestBoundsSubscription, iframeScrollSubscription, contentletHoveredSubscription]
+  };
+}
+/**
+ * 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.
+ *
+ * @remarks
+ * This is typically called after all UVE event handlers and DOM listeners
+ * have been set up successfully.
+ */
+function setClientIsReady() {
+  sendMessageToUVE({
+    action: DotCMSUVEAction.CLIENT_READY
+  });
+}
+/**
+ * Listen for block editor inline event.
+ */
+function listenBlockEditorInlineEvent() {
+  if (document.readyState === 'complete') {
+    // The page is fully loaded or interactive
+    listenBlockEditorClick();
+    return {
+      destroyListenBlockEditorInlineEvent: () => {
+        window.removeEventListener('load', () => listenBlockEditorClick());
+      }
+    };
+  }
+  window.addEventListener('load', () => listenBlockEditorClick());
+  return {
+    destroyListenBlockEditorInlineEvent: () => {
+      window.removeEventListener('load', () => listenBlockEditorClick());
+    }
+  };
+}
+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
  *
@@ -442,6 +597,146 @@ function initInlineEditing(type, data) {
     }
   });
 }
+/**
+ * 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
+ *
+ * @returns {Object} An object containing the cleanup function
+ * @returns {Function} destroyUVESubscriptions - Function to clean up all UVE event subscriptions
+ *
+ * @example
+ * ```typescript
+ * const { destroyUVESubscriptions } = initUVE();
+ *
+ * // When done with UVE
+ * destroyUVESubscriptions();
+ * ```
+ */
+function initUVE() {
+  addClassToEmptyContentlets();
+  setClientIsReady();
+  const {
+    subscriptions
+  } = registerUVEEvents();
+  const {
+    destroyScrollHandler
+  } = scrollHandler();
+  const {
+    destroyListenBlockEditorInlineEvent
+  } = listenBlockEditorInlineEvent();
+  return {
+    destroyUVESubscriptions: () => {
+      subscriptions.forEach(subscription => subscription.unsubscribe());
+      destroyScrollHandler();
+      destroyListenBlockEditorInlineEvent();
+    }
+  };
+}
+
+/**
+ * Sets the bounds of the containers in the editor.
+ * Retrieves the containers from the DOM and sends their position data to the editor.
+ * @private
+ * @memberof DotCMSPageEditor
+ */
+function setBounds(bounds) {
+  sendMessageToUVE({
+    action: DotCMSUVEAction.SET_BOUNDS,
+    payload: bounds
+  });
+}
+/**
+ * Validates the structure of a Block Editor block.
+ *
+ * This function checks that:
+ * 1. The blocks parameter is a valid object
+ * 2. The block has a 'doc' type
+ * 3. The block has a valid content array that is not empty
+ *
+ * @param {Block} blocks - The blocks structure to validate
+ * @returns {BlockEditorState} Object containing validation state and any error message
+ * @property {boolean} BlockEditorState.isValid - Whether the blocks structure is valid
+ * @property {string | null} BlockEditorState.error - Error message if invalid, null if valid
+ */
+const isValidBlocks = blocks => {
+  if (!blocks) {
+    return {
+      error: `Error: Blocks object is not defined`
+    };
+  }
+  if (typeof blocks !== 'object') {
+    return {
+      error: `Error: Blocks must be an object, but received: ${typeof blocks}`
+    };
+  }
+  if (blocks.type !== 'doc') {
+    return {
+      error: `Error: Invalid block type. Expected 'doc' but received: '${blocks.type}'`
+    };
+  }
+  if (!blocks.content) {
+    return {
+      error: 'Error: Blocks content is missing'
+    };
+  }
+  if (!Array.isArray(blocks.content)) {
+    return {
+      error: `Error: Blocks content must be an array, but received: ${typeof blocks.content}`
+    };
+  }
+  if (blocks.content.length === 0) {
+    return {
+      error: 'Error: Blocks content is empty. At least one block is required.'
+    };
+  }
+  // Validate each block in the content array
+  for (let i = 0; i < blocks.content.length; i++) {
+    const block = blocks.content[i];
+    if (!block.type) {
+      return {
+        error: `Error: Block at index ${i} is missing required 'type' property`
+      };
+    }
+    if (typeof block.type !== 'string') {
+      return {
+        error: `Error: Block type at index ${i} must be a string, but received: ${typeof block.type}`
+      };
+    }
+    // Validate block attributes if present
+    if (block.attrs && typeof block.attrs !== 'object') {
+      return {
+        error: `Error: Block attributes at index ${i} must be an object, but received: ${typeof block.attrs}`
+      };
+    }
+    // Validate nested content if present
+    if (block.content) {
+      if (!Array.isArray(block.content)) {
+        return {
+          error: `Error: Block content at index ${i} must be an array, but received: ${typeof block.content}`
+        };
+      }
+      // Recursively validate nested blocks
+      const nestedValidation = isValidBlocks({
+        type: 'doc',
+        content: block.content
+      });
+      if (nestedValidation.error) {
+        return {
+          error: `Error in nested block at index ${i}: ${nestedValidation.error}`
+        };
+      }
+    }
+  }
+  return {
+    error: null
+  };
+};
 
 /**
  * Enum representing the different types of blocks available in the Block Editor
@@ -737,4 +1032,87 @@ const EMPTY_CONTAINER_STYLE_ANGULAR = {
  */
 const CUSTOM_NO_COMPONENT = 'CustomNoComponent';
 
-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_EVENT_ERROR_FALLBACK__ as _, __UVE_EVENTS__ as a, EMPTY_CONTAINER_STYLE_REACT as b, EMPTY_CONTAINER_STYLE_ANGULAR as c, __DOTCMS_UVE_EVENT__ as d, editContentlet as e, getDotCMSContentletsBound as f, getDotCMSPageBounds as g, getDotCMSContainerData as h, initInlineEditing as i, getClosestDotCMSContainerData as j, findDotCMSElement as k, findDotCMSVTLData as l, computeScrollIsInBottom as m, combineClasses as n, getColumnPositionClasses as o, getDotContentletAttributes as p, getContainersData as q, reorderMenu as r, sendMessageToUVE as s, getContentletsInContainer as t, getDotContainerAttributes as u };
+/**
+ * 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
+ * @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.
+ *
+ * @example
+ * ```ts
+ * const editorState = getUVEState();
+ * if (editorState?.mode === 'edit') {
+ *   // Enable editing features
+ * }
+ * ```
+ */
+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');
+  if (!possibleModes.includes(mode)) {
+    mode = UVE_MODE.EDIT;
+  }
+  return {
+    mode,
+    languageId,
+    persona,
+    variantName,
+    experimentId,
+    publishDate
+  };
+}
+/**
+ * Creates a subscription to a UVE event.
+ *
+ * @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
+ * ```ts
+ * // Subscribe to page changes
+ * const subscription = createUVESubscription(UVEEventType.CONTENT_CHANGES, (changes) => {
+ *   console.log('Content changes:', changes);
+ * });
+ *
+ * // Later, unsubscribe when no longer needed
+ * subscription.unsubscribe();
+ * ```
+ */
+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);
+}
+
+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 };

package/internal.cjs.js

@@ -1,136 +1,39 @@
 'use strict';
 
-var constants = require('./constants.cjs.js');
-var types = require('./types.cjs.js');
+var internal = require('./index.cjs2.js');
+require('./types.cjs.js');
+
 
-/**
- * Sets the bounds of the containers in the editor.
- * Retrieves the containers from the DOM and sends their position data to the editor.
- * @private
- * @memberof DotCMSPageEditor
- */
-function setBounds(bounds) {
-  constants.sendMessageToUVE({
-    action: types.DotCMSUVEAction.SET_BOUNDS,
-    payload: bounds
-  });
-}
-/**
- * Validates the structure of a Block Editor block.
- *
- * This function checks that:
- * 1. The blocks parameter is a valid object
- * 2. The block has a 'doc' type
- * 3. The block has a valid content array that is not empty
- *
- * @param {Block} blocks - The blocks structure to validate
- * @returns {BlockEditorState} Object containing validation state and any error message
- * @property {boolean} BlockEditorState.isValid - Whether the blocks structure is valid
- * @property {string | null} BlockEditorState.error - Error message if invalid, null if valid
- */
-const isValidBlocks = blocks => {
-  if (!blocks) {
-    return {
-      error: `Error: Blocks object is not defined`
-    };
-  }
-  if (typeof blocks !== 'object') {
-    return {
-      error: `Error: Blocks must be an object, but received: ${typeof blocks}`
-    };
-  }
-  if (blocks.type !== 'doc') {
-    return {
-      error: `Error: Invalid block type. Expected 'doc' but received: '${blocks.type}'`
-    };
-  }
-  if (!blocks.content) {
-    return {
-      error: 'Error: Blocks content is missing'
-    };
-  }
-  if (!Array.isArray(blocks.content)) {
-    return {
-      error: `Error: Blocks content must be an array, but received: ${typeof blocks.content}`
-    };
-  }
-  if (blocks.content.length === 0) {
-    return {
-      error: 'Error: Blocks content is empty. At least one block is required.'
-    };
-  }
-  // Validate each block in the content array
-  for (let i = 0; i < blocks.content.length; i++) {
-    const block = blocks.content[i];
-    if (!block.type) {
-      return {
-        error: `Error: Block at index ${i} is missing required 'type' property`
-      };
-    }
-    if (typeof block.type !== 'string') {
-      return {
-        error: `Error: Block type at index ${i} must be a string, but received: ${typeof block.type}`
-      };
-    }
-    // Validate block attributes if present
-    if (block.attrs && typeof block.attrs !== 'object') {
-      return {
-        error: `Error: Block attributes at index ${i} must be an object, but received: ${typeof block.attrs}`
-      };
-    }
-    // Validate nested content if present
-    if (block.content) {
-      if (!Array.isArray(block.content)) {
-        return {
-          error: `Error: Block content at index ${i} must be an array, but received: ${typeof block.content}`
-        };
-      }
-      // Recursively validate nested blocks
-      const nestedValidation = isValidBlocks({
-        type: 'doc',
-        content: block.content
-      });
-      if (nestedValidation.error) {
-        return {
-          error: `Error in nested block at index ${i}: ${nestedValidation.error}`
-        };
-      }
-    }
-  }
-  return {
-    error: null
-  };
-};
 
 Object.defineProperty(exports, "Blocks", {
-    enumerable: true,
-    get: function () { return constants.Blocks; }
+	enumerable: true,
+	get: function () { return internal.Blocks; }
 });
-exports.CUSTOM_NO_COMPONENT = constants.CUSTOM_NO_COMPONENT;
-exports.DEVELOPMENT_MODE = constants.DEVELOPMENT_MODE;
-exports.EMPTY_CONTAINER_STYLE_ANGULAR = constants.EMPTY_CONTAINER_STYLE_ANGULAR;
-exports.EMPTY_CONTAINER_STYLE_REACT = constants.EMPTY_CONTAINER_STYLE_REACT;
-exports.END_CLASS = constants.END_CLASS;
-exports.PRODUCTION_MODE = constants.PRODUCTION_MODE;
-exports.START_CLASS = constants.START_CLASS;
+exports.CUSTOM_NO_COMPONENT = internal.CUSTOM_NO_COMPONENT;
+exports.DEVELOPMENT_MODE = internal.DEVELOPMENT_MODE;
+exports.EMPTY_CONTAINER_STYLE_ANGULAR = internal.EMPTY_CONTAINER_STYLE_ANGULAR;
+exports.EMPTY_CONTAINER_STYLE_REACT = internal.EMPTY_CONTAINER_STYLE_REACT;
+exports.END_CLASS = internal.END_CLASS;
+exports.PRODUCTION_MODE = internal.PRODUCTION_MODE;
+exports.START_CLASS = internal.START_CLASS;
 Object.defineProperty(exports, "__DOTCMS_UVE_EVENT__", {
-    enumerable: true,
-    get: function () { return constants.__DOTCMS_UVE_EVENT__; }
+	enumerable: true,
+	get: function () { return internal.__DOTCMS_UVE_EVENT__; }
 });
-exports.__UVE_EVENTS__ = constants.__UVE_EVENTS__;
-exports.__UVE_EVENT_ERROR_FALLBACK__ = constants.__UVE_EVENT_ERROR_FALLBACK__;
-exports.combineClasses = constants.combineClasses;
-exports.computeScrollIsInBottom = constants.computeScrollIsInBottom;
-exports.findDotCMSElement = constants.findDotCMSElement;
-exports.findDotCMSVTLData = constants.findDotCMSVTLData;
-exports.getClosestDotCMSContainerData = constants.getClosestDotCMSContainerData;
-exports.getColumnPositionClasses = constants.getColumnPositionClasses;
-exports.getContainersData = constants.getContainersData;
-exports.getContentletsInContainer = constants.getContentletsInContainer;
-exports.getDotCMSContainerData = constants.getDotCMSContainerData;
-exports.getDotCMSContentletsBound = constants.getDotCMSContentletsBound;
-exports.getDotCMSPageBounds = constants.getDotCMSPageBounds;
-exports.getDotContainerAttributes = constants.getDotContainerAttributes;
-exports.getDotContentletAttributes = constants.getDotContentletAttributes;
-exports.isValidBlocks = isValidBlocks;
-exports.setBounds = setBounds;
+exports.__UVE_EVENTS__ = internal.__UVE_EVENTS__;
+exports.__UVE_EVENT_ERROR_FALLBACK__ = internal.__UVE_EVENT_ERROR_FALLBACK__;
+exports.combineClasses = internal.combineClasses;
+exports.computeScrollIsInBottom = internal.computeScrollIsInBottom;
+exports.findDotCMSElement = internal.findDotCMSElement;
+exports.findDotCMSVTLData = internal.findDotCMSVTLData;
+exports.getClosestDotCMSContainerData = internal.getClosestDotCMSContainerData;
+exports.getColumnPositionClasses = internal.getColumnPositionClasses;
+exports.getContainersData = internal.getContainersData;
+exports.getContentletsInContainer = internal.getContentletsInContainer;
+exports.getDotCMSContainerData = internal.getDotCMSContainerData;
+exports.getDotCMSContentletsBound = internal.getDotCMSContentletsBound;
+exports.getDotCMSPageBounds = internal.getDotCMSPageBounds;
+exports.getDotContainerAttributes = internal.getDotContainerAttributes;
+exports.getDotContentletAttributes = internal.getDotContentletAttributes;
+exports.isValidBlocks = internal.isValidBlocks;
+exports.setBounds = internal.setBounds;

package/internal.esm.js

@@ -1,104 +1,2 @@
-import { s as sendMessageToUVE } from './constants.esm.js';
-export { B as Blocks, C as CUSTOM_NO_COMPONENT, D as DEVELOPMENT_MODE, c as EMPTY_CONTAINER_STYLE_ANGULAR, b as EMPTY_CONTAINER_STYLE_REACT, E as END_CLASS, P as PRODUCTION_MODE, S as START_CLASS, d as __DOTCMS_UVE_EVENT__, a as __UVE_EVENTS__, _ as __UVE_EVENT_ERROR_FALLBACK__, n as combineClasses, m as computeScrollIsInBottom, k as findDotCMSElement, l as findDotCMSVTLData, j as getClosestDotCMSContainerData, o as getColumnPositionClasses, q as getContainersData, t as getContentletsInContainer, h as getDotCMSContainerData, f as getDotCMSContentletsBound, g as getDotCMSPageBounds, u as getDotContainerAttributes, p as getDotContentletAttributes } from './constants.esm.js';
-import { DotCMSUVEAction } from './types.esm.js';
-
-/**
- * Sets the bounds of the containers in the editor.
- * Retrieves the containers from the DOM and sends their position data to the editor.
- * @private
- * @memberof DotCMSPageEditor
- */
-function setBounds(bounds) {
-  sendMessageToUVE({
-    action: DotCMSUVEAction.SET_BOUNDS,
-    payload: bounds
-  });
-}
-/**
- * Validates the structure of a Block Editor block.
- *
- * This function checks that:
- * 1. The blocks parameter is a valid object
- * 2. The block has a 'doc' type
- * 3. The block has a valid content array that is not empty
- *
- * @param {Block} blocks - The blocks structure to validate
- * @returns {BlockEditorState} Object containing validation state and any error message
- * @property {boolean} BlockEditorState.isValid - Whether the blocks structure is valid
- * @property {string | null} BlockEditorState.error - Error message if invalid, null if valid
- */
-const isValidBlocks = blocks => {
-  if (!blocks) {
-    return {
-      error: `Error: Blocks object is not defined`
-    };
-  }
-  if (typeof blocks !== 'object') {
-    return {
-      error: `Error: Blocks must be an object, but received: ${typeof blocks}`
-    };
-  }
-  if (blocks.type !== 'doc') {
-    return {
-      error: `Error: Invalid block type. Expected 'doc' but received: '${blocks.type}'`
-    };
-  }
-  if (!blocks.content) {
-    return {
-      error: 'Error: Blocks content is missing'
-    };
-  }
-  if (!Array.isArray(blocks.content)) {
-    return {
-      error: `Error: Blocks content must be an array, but received: ${typeof blocks.content}`
-    };
-  }
-  if (blocks.content.length === 0) {
-    return {
-      error: 'Error: Blocks content is empty. At least one block is required.'
-    };
-  }
-  // Validate each block in the content array
-  for (let i = 0; i < blocks.content.length; i++) {
-    const block = blocks.content[i];
-    if (!block.type) {
-      return {
-        error: `Error: Block at index ${i} is missing required 'type' property`
-      };
-    }
-    if (typeof block.type !== 'string') {
-      return {
-        error: `Error: Block type at index ${i} must be a string, but received: ${typeof block.type}`
-      };
-    }
-    // Validate block attributes if present
-    if (block.attrs && typeof block.attrs !== 'object') {
-      return {
-        error: `Error: Block attributes at index ${i} must be an object, but received: ${typeof block.attrs}`
-      };
-    }
-    // Validate nested content if present
-    if (block.content) {
-      if (!Array.isArray(block.content)) {
-        return {
-          error: `Error: Block content at index ${i} must be an array, but received: ${typeof block.content}`
-        };
-      }
-      // Recursively validate nested blocks
-      const nestedValidation = isValidBlocks({
-        type: 'doc',
-        content: block.content
-      });
-      if (nestedValidation.error) {
-        return {
-          error: `Error in nested block at index ${i}: ${nestedValidation.error}`
-        };
-      }
-    }
-  }
-  return {
-    error: null
-  };
-};
-
-export { isValidBlocks, setBounds };
+export { B as Blocks, C as CUSTOM_NO_COMPONENT, D as DEVELOPMENT_MODE, c as EMPTY_CONTAINER_STYLE_ANGULAR, b as EMPTY_CONTAINER_STYLE_REACT, E as END_CLASS, P as PRODUCTION_MODE, S as START_CLASS, d as __DOTCMS_UVE_EVENT__, _ as __UVE_EVENTS__, a as __UVE_EVENT_ERROR_FALLBACK__, l as combineClasses, k as computeScrollIsInBottom, i as findDotCMSElement, j as findDotCMSVTLData, h as getClosestDotCMSContainerData, m as getColumnPositionClasses, o as getContainersData, p as getContentletsInContainer, f as getDotCMSContainerData, e as getDotCMSContentletsBound, g as getDotCMSPageBounds, q as getDotContainerAttributes, n as getDotContentletAttributes, r as isValidBlocks, s as setBounds } from './index.esm2.js';
+import './types.esm.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dotcms/uve",
-  "version": "0.0.1-beta.17",
+  "version": "0.0.1-beta.18",
   "description": "Official JavaScript library for interacting with Universal Visual Editor (UVE)",
   "repository": {
     "type": "git",

package/src/lib/editor/public.d.ts

@@ -36,3 +36,27 @@ export declare function reorderMenu(config?: DotCMSReorderMenuConfig): void;
  * ```
  */
 export declare function initInlineEditing(type: DotCMSInlineEditingType, data?: DotCMSInlineEditingPayload): void;
+/**
+ * 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
+ *
+ * @returns {Object} An object containing the cleanup function
+ * @returns {Function} destroyUVESubscriptions - Function to clean up all UVE event subscriptions
+ *
+ * @example
+ * ```typescript
+ * const { destroyUVESubscriptions } = initUVE();
+ *
+ * // When done with UVE
+ * destroyUVESubscriptions();
+ * ```
+ */
+export declare function initUVE(): {
+    destroyUVESubscriptions: () => void;
+};

package/src/script/utils.d.ts

@@ -3,7 +3,9 @@
  * Adds listeners for both 'scroll' and 'scrollend' events, sending appropriate messages
  * to the editor when these events occur.
  */
-export declare function scrollHandler(): void;
+export declare function scrollHandler(): {
+    destroyScrollHandler: () => void;
+};
 /**
  * Adds 'empty-contentlet' class to contentlet elements that have no height.
  * This helps identify and style empty contentlets in the editor view.
@@ -28,7 +30,9 @@ export declare function addClassToEmptyContentlets(): void;
  * the top or bottom boundaries of the iframe, which helps maintain proper
  * scroll event handling.
  */
-export declare function registerUVEEvents(): void;
+export declare function registerUVEEvents(): {
+    subscriptions: import("../lib/types/editor/public").UVEEventSubscription[];
+};
 /**
  * Notifies the editor that the UVE client is ready to receive messages.
  *
@@ -43,4 +47,6 @@ export declare function setClientIsReady(): void;
 /**
  * Listen for block editor inline event.
  */
-export declare const listenBlockEditorInlineEvent: () => void;
+export declare function listenBlockEditorInlineEvent(): {
+    destroyListenBlockEditorInlineEvent: () => void;
+};