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

package/internal.esm.js

@@ -1,3 +1,5 @@
+import { UVEEventType } from './types.esm.js';
+
 /**
  * Actions received from the dotcms editor
  *
@@ -23,7 +25,9 @@ var __DOTCMS_UVE_EVENT__;
    */
   __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";
   /**
@@ -32,27 +36,360 @@ var __DOTCMS_UVE_EVENT__;
   __DOTCMS_UVE_EVENT__["UVE_COPY_CONTENTLET_INLINE_EDITING_SUCCESS"] = "uve-copy-contentlet-inline-editing-success";
 })(__DOTCMS_UVE_EVENT__ || (__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 === __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 === __DOTCMS_UVE_EVENT__.UVE_SET_PAGE_DATA) {
+      callback(event.data.payload);
+    }
+  };
+  window.addEventListener('message', messageCallback);
+  return {
+    unsubscribe: () => {
+      window.removeEventListener('message', messageCallback);
+    },
+    event: 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 === __DOTCMS_UVE_EVENT__.UVE_RELOAD_PAGE) {
+      callback();
+    }
+  };
+  window.addEventListener('message', messageCallback);
+  return {
+    unsubscribe: () => {
+      window.removeEventListener('message', messageCallback);
+    },
+    event: 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 === __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: 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 === __DOTCMS_UVE_EVENT__.UVE_SCROLL_INSIDE_IFRAME) {
+      const direction = event.data.direction;
+      callback(direction);
+    }
+  };
+  window.addEventListener('message', messageCallback);
+  return {
+    unsubscribe: () => {
+      window.removeEventListener('message', messageCallback);
+    },
+    event: UVEEventType.IFRAME_SCROLL
+  };
+}
+/**
+ * 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: UVEEventType.CONTENTLET_HOVERED
+  };
+}
+
+/**
+ * Events that can be subscribed to in the UVE
+ *
+ * @internal
+ * @type {Record<UVEEventType, UVEEventSubscriber>}
+ */
+const __UVE_EVENTS__ = {
+  [UVEEventType.CONTENT_CHANGES]: callback => {
+    return onContentChanges(callback);
+  },
+  [UVEEventType.PAGE_RELOAD]: callback => {
+    return onPageReload(callback);
+  },
+  [UVEEventType.REQUEST_BOUNDS]: callback => {
+    return onRequestBounds(callback);
+  },
+  [UVEEventType.IFRAME_SCROLL]: callback => {
+    return onIframeScroll(callback);
+  },
+  [UVEEventType.CONTENTLET_HOVERED]: callback => {
+    return onContentletHovered(callback);
   }
 };
 /**
@@ -70,4 +407,4 @@ const __UVE_EVENT_ERROR_FALLBACK__ = event => {
   };
 };
 
-export { __DOTCMS_UVE_EVENT__, __UVE_EVENTS__, __UVE_EVENT_ERROR_FALLBACK__ };
+export { __DOTCMS_UVE_EVENT__, __UVE_EVENTS__, __UVE_EVENT_ERROR_FALLBACK__, computeScrollIsInBottom, findDotCMSElement, findDotCMSVTLData, getClosestDotCMSContainerData, getDotCMSContainerData, getDotCMSContentletsBound, getDotCMSPageBounds };

package/package.json

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

package/src/index.d.ts

@@ -1,2 +1,2 @@
 export * from './lib/core/core.utils';
-export * from './lib/dom/dom.utils';
+export * from './lib/editor/public';

package/src/internal/constants.d.ts

@@ -1,11 +1,11 @@
-import { UVEEvent } from '../lib/types/editor/public';
+import { UVEEventSubscriber, UVEEventType } from '../lib/types/editor/public';
 /**
  * Events that can be subscribed to in the UVE
  *
  * @internal
- * @type {Record<string, UVEEvent>}
+ * @type {Record<UVEEventType, UVEEventSubscriber>}
  */
-export declare const __UVE_EVENTS__: Record<string, UVEEvent>;
+export declare const __UVE_EVENTS__: Record<UVEEventType, UVEEventSubscriber>;
 /**
  * Default UVE event
  *

package/src/internal/events.d.ts

@@ -0,0 +1,66 @@
+import { UVEEventHandler, UVEEventType } from '../types';
+/**
+ * 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
+ */
+export declare function onContentChanges(callback: UVEEventHandler): {
+    unsubscribe: () => void;
+    event: UVEEventType;
+};
+/**
+ * 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
+ */
+export declare function onPageReload(callback: UVEEventHandler): {
+    unsubscribe: () => void;
+    event: UVEEventType;
+};
+/**
+ * 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
+ */
+export declare function onRequestBounds(callback: UVEEventHandler): {
+    unsubscribe: () => void;
+    event: UVEEventType;
+};
+/**
+ * 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
+ */
+export declare function onIframeScroll(callback: UVEEventHandler): {
+    unsubscribe: () => void;
+    event: UVEEventType;
+};
+/**
+ * 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
+ */
+export declare function onContentletHovered(callback: UVEEventHandler): {
+    unsubscribe: () => void;
+    event: UVEEventType;
+};

package/src/internal.d.ts

@@ -1,3 +1,4 @@
 export * from './internal/index';
 export * from './lib/types/editor/internal';
 export * from './lib/types/events/internal';
+export * from './lib/dom/dom.utils';

package/src/lib/core/core.utils.d.ts

@@ -1,4 +1,4 @@
-import { UVECallback, UVEState, UVESubscription } from '../types/editor/public';
+import { UVEState, UVEEventSubscription, UVEEventType, UVEEventPayloadMap } from '../types/editor/public';
 /**
  * Gets the current state of the Universal Visual Editor (UVE).
  *
@@ -31,15 +31,19 @@ export declare function getUVEState(): UVEState | undefined;
 /**
  * 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();
  * ```
  */
-export declare function createUVESubscription(event: string, callback: UVECallback): UVESubscription;
+export declare function createUVESubscription<T extends UVEEventType>(eventType: T, callback: (payload: UVEEventPayloadMap[T] extends undefined ? void : UVEEventPayloadMap[T]) => void): UVEEventSubscription;

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

@@ -0,0 +1,8 @@
+import { DotCMSContainerBound } from '@dotcms/uve/internal';
+/**
+ * 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
+ */
+export declare function setBounds(bounds: DotCMSContainerBound[]): void;

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

@@ -0,0 +1,38 @@
+import { DotCMSReorderMenuConfig, DotCMSUVEMessage } from '../types/editor/internal';
+import { Contentlet } from '../types/editor/public';
+import { DotCMSInlineEditingPayload, DotCMSInlineEditingType } from '../types/events/public';
+/**
+ * Post message to dotcms page editor
+ *
+ * @export
+ * @template T
+ * @param {DotCMSUVEMessage<T>} message
+ */
+export declare function sendMessageToEditor<T = unknown>(message: DotCMSUVEMessage<T>): void;
+/**
+ * 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.
+ */
+export declare function editContentlet<T>(contentlet: Contentlet<T>): void;
+export declare function reorderMenu(config?: DotCMSReorderMenuConfig): void;
+/**
+ * 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>
+ * ```
+ */
+export declare function initInlineEditing(type: DotCMSInlineEditingType, data?: DotCMSInlineEditingPayload): void;

package/src/lib/types/editor/internal.d.ts

@@ -42,6 +42,45 @@ export interface DotCMSUVE {
     lastScrollYPosition: number;
 }
 /**
+ * Main fields of a Contentlet (Inherited from the Content Type).
+ */
+export interface ContentTypeMainFields {
+    hostName: string;
+    modDate: string;
+    publishDate: string;
+    title: string;
+    baseType: string;
+    inode: string;
+    archived: boolean;
+    ownerName: string;
+    host: string;
+    working: boolean;
+    locked: boolean;
+    stInode: string;
+    contentType: string;
+    live: boolean;
+    owner: string;
+    identifier: string;
+    publishUserName: string;
+    publishUser: string;
+    languageId: number;
+    creationDate: string;
+    url: string;
+    titleImage: string;
+    modUserName: string;
+    hasLiveVersion: boolean;
+    folder: string;
+    hasTitleImage: boolean;
+    sortOrder: number;
+    modUser: string;
+    __icon__: string;
+    contentTypeIcon: string;
+    variant: string;
+}
+/**
+ * Bound information for a contentlet.
+ *
+ * @interface ContentletBound
  * Bound information for a contentlet.
  *
  * @interface DotCMSContentletBound