@dotcms/uve 0.0.1-beta.10 → 0.0.1-beta.12

package/index.cjs.js

@@ -1,7 +1,7 @@
 'use strict';
 
-var types = require('./types.cjs.js');
 var internal = require('./internal.cjs.js');
+var types = require('./types.cjs.js');
 
 /**
  * Gets the current state of the Universal Visual Editor (UVE).
@@ -58,29 +58,110 @@ function getUVEState() {
 /**
  * Creates a subscription to a UVE event.
  *
- * @param {string} event - The event to subscribe to.
- * @param {UVECallback} callback - The callback to call when the event is triggered.
- * @return {UnsubscribeUVE | undefined} The unsubscribe function if the event is valid, undefined otherwise.
+ * @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
- * const unsubscribeChanges = createUVESubscription('changes', (payload) => {
- *   console.log(payload);
+ * // 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(event, callback) {
+function createUVESubscription(eventType, callback) {
   if (!getUVEState()) {
     console.warn('UVE Subscription: Not running inside UVE');
-    return internal.__UVE_EVENT_ERROR_FALLBACK__(event);
+    return internal.__UVE_EVENT_ERROR_FALLBACK__(eventType);
   }
-  const eventCallback = internal.__UVE_EVENTS__[event];
+  const eventCallback = internal.__UVE_EVENTS__[eventType];
   if (!eventCallback) {
-    console.error(`UVE Subscription: Event ${event} not found`);
-    return internal.__UVE_EVENT_ERROR_FALLBACK__(event);
+    console.error(`UVE Subscription: Event ${eventType} not found`);
+    return internal.__UVE_EVENT_ERROR_FALLBACK__(eventType);
   }
   return eventCallback(callback);
 }
 
+/**
+ * Post message to dotcms page editor
+ *
+ * @export
+ * @template T
+ * @param {DotCMSUVEMessage<T>} message
+ */
+function sendMessageToEditor(message) {
+  window.parent.postMessage(message, '*');
+}
+/**
+ * You can use this function to edit a contentlet in the editor.
+ *
+ * Calling this function inside the editor, will prompt the UVE to open a dialog to edit the contentlet.
+ *
+ * @export
+ * @template T
+ * @param {Contentlet<T>} contentlet - The contentlet to edit.
+ */
+function editContentlet(contentlet) {
+  sendMessageToEditor({
+    action: types.DotCMSUVEAction.EDIT_CONTENTLET,
+    payload: contentlet
+  });
+}
+/*
+ * Reorders the menu based on the provided configuration.
+ *
+ * @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.
+ *
+ * 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.
+ */
+function reorderMenu(config) {
+  const {
+    startLevel = 1,
+    depth = 2
+  } = config || {};
+  sendMessageToEditor({
+    action: types.DotCMSUVEAction.REORDER_MENU,
+    payload: {
+      startLevel,
+      depth
+    }
+  });
+}
+/**
+ * Initializes the inline editing in the editor.
+ *
+ * @export
+ * @param {INLINE_EDITING_EVENT_KEY} type
+ * @param {InlineEditEventData} eventData
+ * @return {*}
+ *
+ *  * @example
+ * ```html
+ * <div onclick="initInlineEditing('BLOCK_EDITOR', { inode, languageId, contentType, fieldName, content })">
+ *      ${My Content}
+ * </div>
+ * ```
+ */
+function initInlineEditing(type, data) {
+  sendMessageToEditor({
+    action: types.DotCMSUVEAction.INIT_INLINE_EDITING,
+    payload: {
+      type,
+      data
+    }
+  });
+}
+
 exports.createUVESubscription = createUVESubscription;
+exports.editContentlet = editContentlet;
 exports.getUVEState = getUVEState;
+exports.initInlineEditing = initInlineEditing;
+exports.reorderMenu = reorderMenu;
+exports.sendMessageToEditor = sendMessageToEditor;

package/index.esm.js

@@ -1,5 +1,5 @@
-import { UVE_MODE } from './types.esm.js';
 import { __UVE_EVENT_ERROR_FALLBACK__, __UVE_EVENTS__ } from './internal.esm.js';
+import { UVE_MODE, DotCMSUVEAction } from './types.esm.js';
 
 /**
  * Gets the current state of the Universal Visual Editor (UVE).
@@ -56,28 +56,105 @@ function getUVEState() {
 /**
  * Creates a subscription to a UVE event.
  *
- * @param {string} event - The event to subscribe to.
- * @param {UVECallback} callback - The callback to call when the event is triggered.
- * @return {UnsubscribeUVE | undefined} The unsubscribe function if the event is valid, undefined otherwise.
+ * @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
- * const unsubscribeChanges = createUVESubscription('changes', (payload) => {
- *   console.log(payload);
+ * // 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(event, callback) {
+function createUVESubscription(eventType, callback) {
   if (!getUVEState()) {
     console.warn('UVE Subscription: Not running inside UVE');
-    return __UVE_EVENT_ERROR_FALLBACK__(event);
+    return __UVE_EVENT_ERROR_FALLBACK__(eventType);
   }
-  const eventCallback = __UVE_EVENTS__[event];
+  const eventCallback = __UVE_EVENTS__[eventType];
   if (!eventCallback) {
-    console.error(`UVE Subscription: Event ${event} not found`);
-    return __UVE_EVENT_ERROR_FALLBACK__(event);
+    console.error(`UVE Subscription: Event ${eventType} not found`);
+    return __UVE_EVENT_ERROR_FALLBACK__(eventType);
   }
   return eventCallback(callback);
 }
 
-export { createUVESubscription, getUVEState };
+/**
+ * Post message to dotcms page editor
+ *
+ * @export
+ * @template T
+ * @param {DotCMSUVEMessage<T>} message
+ */
+function sendMessageToEditor(message) {
+  window.parent.postMessage(message, '*');
+}
+/**
+ * You can use this function to edit a contentlet in the editor.
+ *
+ * Calling this function inside the editor, will prompt the UVE to open a dialog to edit the contentlet.
+ *
+ * @export
+ * @template T
+ * @param {Contentlet<T>} contentlet - The contentlet to edit.
+ */
+function editContentlet(contentlet) {
+  sendMessageToEditor({
+    action: DotCMSUVEAction.EDIT_CONTENTLET,
+    payload: contentlet
+  });
+}
+/*
+ * Reorders the menu based on the provided configuration.
+ *
+ * @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.
+ *
+ * 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.
+ */
+function reorderMenu(config) {
+  const {
+    startLevel = 1,
+    depth = 2
+  } = config || {};
+  sendMessageToEditor({
+    action: DotCMSUVEAction.REORDER_MENU,
+    payload: {
+      startLevel,
+      depth
+    }
+  });
+}
+/**
+ * Initializes the inline editing in the editor.
+ *
+ * @export
+ * @param {INLINE_EDITING_EVENT_KEY} type
+ * @param {InlineEditEventData} eventData
+ * @return {*}
+ *
+ *  * @example
+ * ```html
+ * <div onclick="initInlineEditing('BLOCK_EDITOR', { inode, languageId, contentType, fieldName, content })">
+ *      ${My Content}
+ * </div>
+ * ```
+ */
+function initInlineEditing(type, data) {
+  sendMessageToEditor({
+    action: DotCMSUVEAction.INIT_INLINE_EDITING,
+    payload: {
+      type,
+      data
+    }
+  });
+}
+
+export { createUVESubscription, editContentlet, getUVEState, initInlineEditing, reorderMenu, sendMessageToEditor };

package/internal.cjs.js

@@ -1,5 +1,7 @@
 'use strict';
 
+var types = require('./types.cjs.js');
+
 /**
  * Actions received from the dotcms editor
  *
@@ -25,7 +27,9 @@ exports.__DOTCMS_UVE_EVENT__ = void 0;
    */
   __DOTCMS_UVE_EVENT__["UVE_SCROLL_INSIDE_IFRAME"] = "uve-scroll-inside-iframe";
   /**
-   * Set the page data
+   * 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";
   /**
@@ -34,27 +38,360 @@ exports.__DOTCMS_UVE_EVENT__ = void 0;
   __DOTCMS_UVE_EVENT__["UVE_COPY_CONTENTLET_INLINE_EDITING_SUCCESS"] = "uve-copy-contentlet-inline-editing-success";
 })(exports.__DOTCMS_UVE_EVENT__ || (exports.__DOTCMS_UVE_EVENT__ = {}));
 
-// TODO: WE NEED TO LOOK FOR ALL THE NOTIFY_CLIENT EVENTS AND ADD THEM TO THE UVE_EVENTS CONSTANT WHEN WE MIGRATE THE EDITOR TO THE NEW UVE LIBRARY
 /**
- * Events that can be subscribed to in the UVE
+ * Calculates the bounding information for each page element within the given containers.
  *
- * @internal
- * @type {Record<string, UVEEvent>}
+ * @export
+ * @param {HTMLDivElement[]} containers - An array of HTMLDivElement representing the containers.
+ * @return {DotCMSContainerBound[]} An array of objects containing the bounding information for each page element.
+ * @example
+ * ```ts
+ * const containers = document.querySelectorAll('.container');
+ * const bounds = getDotCMSPageBounds(containers);
+ * console.log(bounds);
+ * ```
  */
-const __UVE_EVENTS__ = {
-  changes: callback => {
-    const messageCallback = event => {
-      if (event.data.name === exports.__DOTCMS_UVE_EVENT__.UVE_SET_PAGE_DATA) {
-        callback(event.data.payload);
-      }
+function getDotCMSPageBounds(containers) {
+  return containers.map(container => {
+    const containerRect = container.getBoundingClientRect();
+    const contentlets = Array.from(container.querySelectorAll('[data-dot-object="contentlet"]'));
+    return {
+      x: containerRect.x,
+      y: containerRect.y,
+      width: containerRect.width,
+      height: containerRect.height,
+      payload: JSON.stringify({
+        container: getDotCMSContainerData(container)
+      }),
+      contentlets: getDotCMSContentletsBound(containerRect, contentlets)
     };
-    window.addEventListener('message', messageCallback);
+  });
+}
+/**
+ * Calculates the bounding information for each contentlet inside a container.
+ *
+ * @export
+ * @param {DOMRect} containerRect - The bounding rectangle of the container.
+ * @param {HTMLDivElement[]} contentlets - An array of HTMLDivElement representing the contentlets.
+ * @return {DotCMSContentletBound[]} An array of objects containing the bounding information for each contentlet.
+ * @example
+ * ```ts
+ * const containerRect = container.getBoundingClientRect();
+ * const contentlets = container.querySelectorAll('.contentlet');
+ * const bounds = getDotCMSContentletsBound(containerRect, contentlets);
+ * console.log(bounds); // Element bounds within the container
+ * ```
+ */
+function getDotCMSContentletsBound(containerRect, contentlets) {
+  return contentlets.map(contentlet => {
+    const contentletRect = contentlet.getBoundingClientRect();
     return {
-      unsubscribe: () => {
-        window.removeEventListener('message', messageCallback);
-      },
-      event: 'changes'
+      x: 0,
+      y: contentletRect.y - containerRect.y,
+      width: contentletRect.width,
+      height: contentletRect.height,
+      payload: JSON.stringify({
+        container: contentlet.dataset?.['dotContainer'] ? JSON.parse(contentlet.dataset?.['dotContainer']) : getClosestDotCMSContainerData(contentlet),
+        contentlet: {
+          identifier: contentlet.dataset?.['dotIdentifier'],
+          title: contentlet.dataset?.['dotTitle'],
+          inode: contentlet.dataset?.['dotInode'],
+          contentType: contentlet.dataset?.['dotType']
+        }
+      })
+    };
+  });
+}
+/**
+ * Get container data from VTLS.
+ *
+ * @export
+ * @param {HTMLElement} container - The container element.
+ * @return {object} An object containing the container data.
+ * @example
+ * ```ts
+ * const container = document.querySelector('.container');
+ * const data = getContainerData(container);
+ * console.log(data);
+ * ```
+ */
+function getDotCMSContainerData(container) {
+  return {
+    acceptTypes: container.dataset?.['dotAcceptTypes'] || '',
+    identifier: container.dataset?.['dotIdentifier'] || '',
+    maxContentlets: container.dataset?.['maxContentlets'] || '',
+    uuid: container.dataset?.['dotUuid'] || ''
+  };
+}
+/**
+ * Get the closest container data from the contentlet.
+ *
+ * @export
+ * @param {Element} element - The contentlet element.
+ * @return {object | null} An object containing the closest container data or null if no container is found.
+ * @example
+ * ```ts
+ * const contentlet = document.querySelector('.contentlet');
+ * const data = getClosestDotCMSContainerData(contentlet);
+ * console.log(data);
+ * ```
+ */
+function getClosestDotCMSContainerData(element) {
+  // Find the closest ancestor element with data-dot-object="container" attribute
+  const container = element.closest('[data-dot-object="container"]');
+  // If a container element is found
+  if (container) {
+    // Return the dataset of the container element
+    return getDotCMSContainerData(container);
+  } else {
+    // If no container element is found, return null
+    console.warn('No container found for the contentlet');
+    return null;
+  }
+}
+/**
+ * Find the closest contentlet element based on HTMLElement.
+ *
+ * @export
+ * @param {HTMLElement | null} element - The starting element.
+ * @return {HTMLElement | null} The closest contentlet element or null if not found.
+ * @example
+ * const element = document.querySelector('.some-element');
+ * const contentlet = findDotCMSElement(element);
+ * console.log(contentlet);
+ */
+function findDotCMSElement(element) {
+  if (!element) return null;
+  if (element?.dataset?.['dotObject'] === 'contentlet' || element?.dataset?.['dotObject'] === 'container' && element.children.length === 0) {
+    return element;
+  }
+  return findDotCMSElement(element?.['parentElement']);
+}
+/**
+ * Find VTL data within a target element.
+ *
+ * @export
+ * @param {HTMLElement} target - The target element to search within.
+ * @return {Array<{ inode: string, name: string }> | null} An array of objects containing VTL data or null if none found.
+ * @example
+ * ```ts
+ * const target = document.querySelector('.target-element');
+ * const vtlData = findDotCMSVTLData(target);
+ * console.log(vtlData);
+ * ```
+ */
+function findDotCMSVTLData(target) {
+  const vltElements = target.querySelectorAll('[data-dot-object="vtl-file"]');
+  if (!vltElements.length) {
+    return null;
+  }
+  return Array.from(vltElements).map(vltElement => {
+    return {
+      inode: vltElement.dataset?.['dotInode'],
+      name: vltElement.dataset?.['dotUrl']
+    };
+  });
+}
+/**
+ * Check if the scroll position is at the bottom of the page.
+ *
+ * @export
+ * @return {boolean} True if the scroll position is at the bottom, otherwise false.
+ * @example
+ * ```ts
+ * if (dotCMSScrollIsInBottom()) {
+ *     console.log('Scrolled to the bottom');
+ * }
+ * ```
+ */
+function computeScrollIsInBottom() {
+  const documentHeight = document.documentElement.scrollHeight;
+  const viewportHeight = window.innerHeight;
+  const scrollY = window.scrollY;
+  return scrollY + viewportHeight >= documentHeight;
+}
+
+/**
+ * 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);
+    }
+  };
+  window.addEventListener('message', messageCallback);
+  return {
+    unsubscribe: () => {
+      window.removeEventListener('message', messageCallback);
+    },
+    event: types.UVEEventType.CONTENT_CHANGES
+  };
+}
+/**
+ * Subscribes to page reload events in the UVE editor
+ *
+ * @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 onPageReload(callback) {
+  const messageCallback = event => {
+    if (event.data.name === exports.__DOTCMS_UVE_EVENT__.UVE_RELOAD_PAGE) {
+      callback();
+    }
+  };
+  window.addEventListener('message', messageCallback);
+  return {
+    unsubscribe: () => {
+      window.removeEventListener('message', messageCallback);
+    },
+    event: types.UVEEventType.PAGE_RELOAD
+  };
+}
+/**
+ * Subscribes to request bounds events in the UVE editor
+ *
+ * @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 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);
+    }
+  };
+  window.addEventListener('message', messageCallback);
+  return {
+    unsubscribe: () => {
+      window.removeEventListener('message', messageCallback);
+    },
+    event: types.UVEEventType.REQUEST_BOUNDS
+  };
+}
+/**
+ * Subscribes to iframe scroll events in the UVE editor
+ *
+ * @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 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
+  };
+}
+/**
+ * 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 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
+    };
+    callback(contentletHoveredPayload);
+  };
+  document.addEventListener('pointermove', pointerMoveCallback);
+  return {
+    unsubscribe: () => {
+      document.removeEventListener('pointermove', pointerMoveCallback);
+    },
+    event: types.UVEEventType.CONTENTLET_HOVERED
+  };
+}
+
+/**
+ * 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);
   }
 };
 /**
@@ -74,3 +411,10 @@ const __UVE_EVENT_ERROR_FALLBACK__ = event => {
 
 exports.__UVE_EVENTS__ = __UVE_EVENTS__;
 exports.__UVE_EVENT_ERROR_FALLBACK__ = __UVE_EVENT_ERROR_FALLBACK__;
+exports.computeScrollIsInBottom = computeScrollIsInBottom;
+exports.findDotCMSElement = findDotCMSElement;
+exports.findDotCMSVTLData = findDotCMSVTLData;
+exports.getClosestDotCMSContainerData = getClosestDotCMSContainerData;
+exports.getDotCMSContainerData = getDotCMSContainerData;
+exports.getDotCMSContentletsBound = getDotCMSContentletsBound;
+exports.getDotCMSPageBounds = getDotCMSPageBounds;