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

package/index.cjs.js

@@ -58,209 +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);
 }
 
 /**
- * Calculates the bounding information for each page element within the given containers.
+ * Post message to dotcms page editor
  *
  * @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);
- * ```
+ * @template T
+ * @param {DotCMSUVEMessage<T>} message
  */
-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)
-    };
-  });
+function sendMessageToEditor(message) {
+  window.parent.postMessage(message, '*');
 }
 /**
- * Calculates the bounding information for each contentlet inside a container.
+ * 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
- * @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
- * ```
+ * @template T
+ * @param {Contentlet<T>} contentlet - The contentlet to edit.
  */
-function getDotCMSContentletsBound(containerRect, contentlets) {
-  return contentlets.map(contentlet => {
-    const contentletRect = contentlet.getBoundingClientRect();
-    return {
-      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']
-        }
-      })
-    };
+function editContentlet(contentlet) {
+  sendMessageToEditor({
+    action: types.DotCMSUVEAction.EDIT_CONTENTLET,
+    payload: contentlet
   });
 }
-/**
- * Get container data from VTLS.
+/*
+ * Reorders the menu based on the provided configuration.
  *
- * @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.
+ * @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.
  *
- * @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);
- * ```
+ * 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 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;
-  }
+function reorderMenu(config) {
+  const {
+    startLevel = 1,
+    depth = 2
+  } = config || {};
+  sendMessageToEditor({
+    action: types.DotCMSUVEAction.REORDER_MENU,
+    payload: {
+      startLevel,
+      depth
+    }
+  });
 }
 /**
- * Find the closest contentlet element based on HTMLElement.
+ * Initializes the inline editing in the editor.
  *
  * @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.
+ * @param {INLINE_EDITING_EVENT_KEY} type
+ * @param {InlineEditEventData} eventData
+ * @return {*}
  *
- * @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);
+ *  * @example
+ * ```html
+ * <div onclick="initInlineEditing('BLOCK_EDITOR', { inode, languageId, contentType, fieldName, content })">
+ *      ${My Content}
+ * </div>
  * ```
  */
-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']
-    };
+function initInlineEditing(type, data) {
+  sendMessageToEditor({
+    action: types.DotCMSUVEAction.INIT_INLINE_EDITING,
+    payload: {
+      type,
+      data
+    }
   });
 }
-/**
- * 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;
-}
 
-exports.computeScrollIsInBottom = computeScrollIsInBottom;
 exports.createUVESubscription = createUVESubscription;
-exports.findDotCMSElement = findDotCMSElement;
-exports.findDotCMSVTLData = findDotCMSVTLData;
-exports.getClosestDotCMSContainerData = getClosestDotCMSContainerData;
-exports.getDotCMSContainerData = getDotCMSContainerData;
-exports.getDotCMSContentletsBound = getDotCMSContentletsBound;
-exports.getDotCMSPageBounds = getDotCMSPageBounds;
+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_EVENT_ERROR_FALLBACK__, __UVE_EVENTS__ } from './internal.esm.js';
-import { UVE_MODE } from './types.esm.js';
+import { UVE_MODE, DotCMSUVEAction } from './types.esm.js';
 
 /**
  * Gets the current state of the Universal Visual Editor (UVE).
@@ -56,201 +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);
 }
 
 /**
- * Calculates the bounding information for each page element within the given containers.
+ * Post message to dotcms page editor
  *
  * @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);
- * ```
+ * @template T
+ * @param {DotCMSUVEMessage<T>} message
  */
-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)
-    };
-  });
+function sendMessageToEditor(message) {
+  window.parent.postMessage(message, '*');
 }
 /**
- * Calculates the bounding information for each contentlet inside a container.
+ * 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
- * @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
- * ```
+ * @template T
+ * @param {Contentlet<T>} contentlet - The contentlet to edit.
  */
-function getDotCMSContentletsBound(containerRect, contentlets) {
-  return contentlets.map(contentlet => {
-    const contentletRect = contentlet.getBoundingClientRect();
-    return {
-      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']
-        }
-      })
-    };
+function editContentlet(contentlet) {
+  sendMessageToEditor({
+    action: DotCMSUVEAction.EDIT_CONTENTLET,
+    payload: contentlet
   });
 }
-/**
- * Get container data from VTLS.
+/*
+ * Reorders the menu based on the provided configuration.
  *
- * @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.
+ * @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.
  *
- * @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);
- * ```
+ * 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 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;
-  }
+function reorderMenu(config) {
+  const {
+    startLevel = 1,
+    depth = 2
+  } = config || {};
+  sendMessageToEditor({
+    action: DotCMSUVEAction.REORDER_MENU,
+    payload: {
+      startLevel,
+      depth
+    }
+  });
 }
 /**
- * Find the closest contentlet element based on HTMLElement.
+ * Initializes the inline editing in the editor.
  *
  * @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.
+ * @param {INLINE_EDITING_EVENT_KEY} type
+ * @param {InlineEditEventData} eventData
+ * @return {*}
  *
- * @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);
+ *  * @example
+ * ```html
+ * <div onclick="initInlineEditing('BLOCK_EDITOR', { inode, languageId, contentType, fieldName, content })">
+ *      ${My Content}
+ * </div>
  * ```
  */
-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']
-    };
+function initInlineEditing(type, data) {
+  sendMessageToEditor({
+    action: DotCMSUVEAction.INIT_INLINE_EDITING,
+    payload: {
+      type,
+      data
+    }
   });
 }
-/**
- * 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;
-}
 
-export { computeScrollIsInBottom, createUVESubscription, findDotCMSElement, findDotCMSVTLData, getClosestDotCMSContainerData, getDotCMSContainerData, getDotCMSContentletsBound, getDotCMSPageBounds, getUVEState };
+export { createUVESubscription, editContentlet, getUVEState, initInlineEditing, reorderMenu, sendMessageToEditor };