@dotcms/client 0.0.1-alpha.46 → 0.0.1-alpha.47

package/index.cjs.js

@@ -1064,68 +1064,110 @@ const ErrorMessages = {
     503: 'Service Unavailable. Try again later.'
 };
 
+/**
+ * Actions received from the dotcms editor
+ *
+ * @export
+ * @enum {number}
+ */
+exports.NOTIFY_CLIENT = void 0;
+(function (NOTIFY_CLIENT) {
+    /**
+     * Request to page to reload
+     */
+    NOTIFY_CLIENT["UVE_RELOAD_PAGE"] = "uve-reload-page";
+    /**
+     * Request the bounds for the elements
+     */
+    NOTIFY_CLIENT["UVE_REQUEST_BOUNDS"] = "uve-request-bounds";
+    /**
+     * Received pong from the editor
+     */
+    NOTIFY_CLIENT["UVE_EDITOR_PONG"] = "uve-editor-pong";
+    /**
+     * Received scroll event trigger from the editor
+     */
+    NOTIFY_CLIENT["UVE_SCROLL_INSIDE_IFRAME"] = "uve-scroll-inside-iframe";
+    /**
+     * Set the page data
+     */
+    NOTIFY_CLIENT["UVE_SET_PAGE_DATA"] = "uve-set-page-data";
+    /**
+     * Copy contentlet inline editing success
+     */
+    NOTIFY_CLIENT["UVE_COPY_CONTENTLET_INLINE_EDITING_SUCCESS"] = "uve-copy-contentlet-inline-editing-success";
+})(exports.NOTIFY_CLIENT || (exports.NOTIFY_CLIENT = {}));
+
+const INITIAL_DOT_UVE = {
+    editContentlet,
+    lastScrollYPosition: 0
+};
 /**
  * Actions send to the dotcms editor
  *
  * @export
  * @enum {number}
  */
-exports.CUSTOMER_ACTIONS = void 0;
-(function (CUSTOMER_ACTIONS) {
+exports.CLIENT_ACTIONS = void 0;
+(function (CLIENT_ACTIONS) {
     /**
      * Tell the dotcms editor that page change
      */
-    CUSTOMER_ACTIONS["NAVIGATION_UPDATE"] = "set-url";
+    CLIENT_ACTIONS["NAVIGATION_UPDATE"] = "set-url";
     /**
      * Send the element position of the rows, columnsm containers and contentlets
      */
-    CUSTOMER_ACTIONS["SET_BOUNDS"] = "set-bounds";
+    CLIENT_ACTIONS["SET_BOUNDS"] = "set-bounds";
     /**
      * Send the information of the hovered contentlet
      */
-    CUSTOMER_ACTIONS["SET_CONTENTLET"] = "set-contentlet";
+    CLIENT_ACTIONS["SET_CONTENTLET"] = "set-contentlet";
     /**
      * Tell the editor that the page is being scrolled
      */
-    CUSTOMER_ACTIONS["IFRAME_SCROLL"] = "scroll";
+    CLIENT_ACTIONS["IFRAME_SCROLL"] = "scroll";
     /**
      * Tell the editor that the page has stopped scrolling
      */
-    CUSTOMER_ACTIONS["IFRAME_SCROLL_END"] = "scroll-end";
+    CLIENT_ACTIONS["IFRAME_SCROLL_END"] = "scroll-end";
     /**
      * Ping the editor to see if the page is inside the editor
      */
-    CUSTOMER_ACTIONS["PING_EDITOR"] = "ping-editor";
+    CLIENT_ACTIONS["PING_EDITOR"] = "ping-editor";
     /**
      * Tell the editor to init the inline editing editor.
      */
-    CUSTOMER_ACTIONS["INIT_INLINE_EDITING"] = "init-inline-editing";
+    CLIENT_ACTIONS["INIT_INLINE_EDITING"] = "init-inline-editing";
     /**
      * Tell the editor to open the Copy-contentlet dialog
      * To copy a content and then edit it inline.
      */
-    CUSTOMER_ACTIONS["COPY_CONTENTLET_INLINE_EDITING"] = "copy-contentlet-inline-editing";
+    CLIENT_ACTIONS["COPY_CONTENTLET_INLINE_EDITING"] = "copy-contentlet-inline-editing";
     /**
      * Tell the editor to save inline edited contentlet
      */
-    CUSTOMER_ACTIONS["UPDATE_CONTENTLET_INLINE_EDITING"] = "update-contentlet-inline-editing";
+    CLIENT_ACTIONS["UPDATE_CONTENTLET_INLINE_EDITING"] = "update-contentlet-inline-editing";
     /**
      * Tell the editor to trigger a menu reorder
      */
-    CUSTOMER_ACTIONS["REORDER_MENU"] = "reorder-menu";
+    CLIENT_ACTIONS["REORDER_MENU"] = "reorder-menu";
     /**
      * Tell the editor to send the page info to iframe
      */
-    CUSTOMER_ACTIONS["GET_PAGE_DATA"] = "get-page-data";
+    CLIENT_ACTIONS["GET_PAGE_DATA"] = "get-page-data";
     /**
      * Tell the editor an user send a graphql query
      */
-    CUSTOMER_ACTIONS["CLIENT_READY"] = "client-ready";
+    CLIENT_ACTIONS["CLIENT_READY"] = "client-ready";
+    /**
+     * Tell the editor to edit a contentlet
+     */
+    CLIENT_ACTIONS["EDIT_CONTENTLET"] = "edit-contentlet";
     /**
      * Tell the editor to do nothing
      */
-    CUSTOMER_ACTIONS["NOOP"] = "noop";
-})(exports.CUSTOMER_ACTIONS || (exports.CUSTOMER_ACTIONS = {}));
+    CLIENT_ACTIONS["NOOP"] = "noop";
+})(exports.CLIENT_ACTIONS || (exports.CLIENT_ACTIONS = {}));
 /**
  * Post message to dotcms page editor
  *
@@ -1137,32 +1179,6 @@ function postMessageToEditor(message) {
     window.parent.postMessage(message, '*');
 }
 
-/**
- * Actions received from the dotcms editor
- *
- * @export
- * @enum {number}
- */
-var NOTIFY_CUSTOMER;
-(function (NOTIFY_CUSTOMER) {
-    /**
-     * Request to page to reload
-     */
-    NOTIFY_CUSTOMER["EMA_RELOAD_PAGE"] = "ema-reload-page";
-    /**
-     * Request the bounds for the elements
-     */
-    NOTIFY_CUSTOMER["EMA_REQUEST_BOUNDS"] = "ema-request-bounds";
-    /**
-     * Received pong from the editor
-     */
-    NOTIFY_CUSTOMER["EMA_EDITOR_PONG"] = "ema-editor-pong";
-    /**
-     * Received scroll event trigger from the editor
-     */
-    NOTIFY_CUSTOMER["EMA_SCROLL_INSIDE_IFRAME"] = "scroll-inside-iframe";
-})(NOTIFY_CUSTOMER || (NOTIFY_CUSTOMER = {}));
-
 /**
  * Calculates the bounding information for each page element within the given containers.
  *
@@ -1356,7 +1372,7 @@ function setBounds() {
     const containers = Array.from(document.querySelectorAll('[data-dot-object="container"]'));
     const positionData = getPageElementBound(containers);
     postMessageToEditor({
-        action: exports.CUSTOMER_ACTIONS.SET_BOUNDS,
+        action: exports.CLIENT_ACTIONS.SET_BOUNDS,
         payload: positionData
     });
 }
@@ -1368,23 +1384,26 @@ function setBounds() {
  */
 function listenEditorMessages() {
     const messageCallback = (event) => {
-        switch (event.data) {
-            case NOTIFY_CUSTOMER.EMA_REQUEST_BOUNDS: {
+        const ACTIONS_NOTIFICATION = {
+            [exports.NOTIFY_CLIENT.UVE_RELOAD_PAGE]: () => {
+                window.location.reload();
+            },
+            [exports.NOTIFY_CLIENT.UVE_REQUEST_BOUNDS]: () => {
                 setBounds();
-                break;
-            }
-        }
-        if (event.data.name === NOTIFY_CUSTOMER.EMA_SCROLL_INSIDE_IFRAME) {
-            const direction = event.data.direction;
-            if ((window.scrollY === 0 && direction === 'up') ||
-                (scrollIsInBottom() && direction === 'down')) {
-                // If the iframe scroll is at the top or bottom, do not send anything.
-                // This avoids losing the scrollend event.
-                return;
+            },
+            [exports.NOTIFY_CLIENT.UVE_SCROLL_INSIDE_IFRAME]: () => {
+                const direction = event.data.direction;
+                if ((window.scrollY === 0 && direction === 'up') ||
+                    (scrollIsInBottom() && 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 scrollY = direction === 'up' ? -120 : 120;
-            window.scrollBy({ left: 0, top: scrollY, behavior: 'smooth' });
-        }
+        };
+        ACTIONS_NOTIFICATION[event.data.name]?.();
     };
     window.addEventListener('message', messageCallback);
     subscriptions.push({
@@ -1436,7 +1455,7 @@ function listenHoveredContentlet() {
             vtlFiles
         };
         postMessageToEditor({
-            action: exports.CUSTOMER_ACTIONS.SET_CONTENTLET,
+            action: exports.CLIENT_ACTIONS.SET_CONTENTLET,
             payload: {
                 x,
                 y,
@@ -1463,13 +1482,17 @@ function listenHoveredContentlet() {
 function scrollHandler() {
     const scrollCallback = () => {
         postMessageToEditor({
-            action: exports.CUSTOMER_ACTIONS.IFRAME_SCROLL
+            action: exports.CLIENT_ACTIONS.IFRAME_SCROLL
         });
-        window.lastScrollYPosition = window.scrollY;
+        // In case it doesn't have a dotUVE object, we create it with the initial values.
+        window.dotUVE = {
+            ...(window.dotUVE ?? INITIAL_DOT_UVE),
+            lastScrollYPosition: window.scrollY
+        };
     };
     const scrollEndCallback = () => {
         postMessageToEditor({
-            action: exports.CUSTOMER_ACTIONS.IFRAME_SCROLL_END
+            action: exports.CLIENT_ACTIONS.IFRAME_SCROLL_END
         });
     };
     window.addEventListener('scroll', scrollCallback);
@@ -1493,7 +1516,7 @@ function scrollHandler() {
  */
 function fetchPageDataFromInsideUVE(pathname) {
     postMessageToEditor({
-        action: exports.CUSTOMER_ACTIONS.GET_PAGE_DATA,
+        action: exports.CLIENT_ACTIONS.GET_PAGE_DATA,
         payload: {
             pathname
         }
@@ -1510,12 +1533,27 @@ function fetchPageDataFromInsideUVE(pathname) {
  */
 function updateNavigation(pathname) {
     postMessageToEditor({
-        action: exports.CUSTOMER_ACTIONS.NAVIGATION_UPDATE,
+        action: exports.CLIENT_ACTIONS.NAVIGATION_UPDATE,
         payload: {
             url: pathname === '/' ? 'index' : pathname?.replace('/', '')
         }
     });
 }
+/**
+ * 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) {
+    postMessageToEditor({
+        action: exports.CLIENT_ACTIONS.EDIT_CONTENTLET,
+        payload: contentlet
+    });
+}
 /**
  * Checks if the code is running inside an editor.
  *
@@ -1535,6 +1573,9 @@ function isInsideEditor() {
     }
     return window.parent !== window;
 }
+function initDotUVE() {
+    window.dotUVE = INITIAL_DOT_UVE;
+}
 /**
  * Initializes the DotCMS page editor.
  *
@@ -1546,6 +1587,7 @@ function isInsideEditor() {
  * ```
  */
 function initEditor(config) {
+    initDotUVE();
     fetchPageDataFromInsideUVE(config.pathname);
     listenEditorMessages();
     listenHoveredContentlet();
@@ -1704,7 +1746,7 @@ class DotCmsClient {
                 }
                 if (action === 'changes') {
                     const messageCallback = (event) => {
-                        if (event.data.name === 'SET_PAGE_DATA') {
+                        if (event.data.name === exports.NOTIFY_CLIENT.UVE_SET_PAGE_DATA) {
                             callbackFn(event.data.payload);
                         }
                     };
@@ -1945,6 +1987,7 @@ const getPageRequestParams = ({ path = '', params = {} }) => {
 
 exports.DotCmsClient = DotCmsClient;
 exports.destroyEditor = destroyEditor;
+exports.editContentlet = editContentlet;
 exports.getPageRequestParams = getPageRequestParams;
 exports.graphqlToPageEntity = graphqlToPageEntity;
 exports.initEditor = initEditor;

package/index.esm.js

@@ -1062,68 +1062,110 @@ const ErrorMessages = {
     503: 'Service Unavailable. Try again later.'
 };
 
+/**
+ * Actions received from the dotcms editor
+ *
+ * @export
+ * @enum {number}
+ */
+var NOTIFY_CLIENT;
+(function (NOTIFY_CLIENT) {
+    /**
+     * Request to page to reload
+     */
+    NOTIFY_CLIENT["UVE_RELOAD_PAGE"] = "uve-reload-page";
+    /**
+     * Request the bounds for the elements
+     */
+    NOTIFY_CLIENT["UVE_REQUEST_BOUNDS"] = "uve-request-bounds";
+    /**
+     * Received pong from the editor
+     */
+    NOTIFY_CLIENT["UVE_EDITOR_PONG"] = "uve-editor-pong";
+    /**
+     * Received scroll event trigger from the editor
+     */
+    NOTIFY_CLIENT["UVE_SCROLL_INSIDE_IFRAME"] = "uve-scroll-inside-iframe";
+    /**
+     * Set the page data
+     */
+    NOTIFY_CLIENT["UVE_SET_PAGE_DATA"] = "uve-set-page-data";
+    /**
+     * Copy contentlet inline editing success
+     */
+    NOTIFY_CLIENT["UVE_COPY_CONTENTLET_INLINE_EDITING_SUCCESS"] = "uve-copy-contentlet-inline-editing-success";
+})(NOTIFY_CLIENT || (NOTIFY_CLIENT = {}));
+
+const INITIAL_DOT_UVE = {
+    editContentlet,
+    lastScrollYPosition: 0
+};
 /**
  * Actions send to the dotcms editor
  *
  * @export
  * @enum {number}
  */
-var CUSTOMER_ACTIONS;
-(function (CUSTOMER_ACTIONS) {
+var CLIENT_ACTIONS;
+(function (CLIENT_ACTIONS) {
     /**
      * Tell the dotcms editor that page change
      */
-    CUSTOMER_ACTIONS["NAVIGATION_UPDATE"] = "set-url";
+    CLIENT_ACTIONS["NAVIGATION_UPDATE"] = "set-url";
     /**
      * Send the element position of the rows, columnsm containers and contentlets
      */
-    CUSTOMER_ACTIONS["SET_BOUNDS"] = "set-bounds";
+    CLIENT_ACTIONS["SET_BOUNDS"] = "set-bounds";
     /**
      * Send the information of the hovered contentlet
      */
-    CUSTOMER_ACTIONS["SET_CONTENTLET"] = "set-contentlet";
+    CLIENT_ACTIONS["SET_CONTENTLET"] = "set-contentlet";
     /**
      * Tell the editor that the page is being scrolled
      */
-    CUSTOMER_ACTIONS["IFRAME_SCROLL"] = "scroll";
+    CLIENT_ACTIONS["IFRAME_SCROLL"] = "scroll";
     /**
      * Tell the editor that the page has stopped scrolling
      */
-    CUSTOMER_ACTIONS["IFRAME_SCROLL_END"] = "scroll-end";
+    CLIENT_ACTIONS["IFRAME_SCROLL_END"] = "scroll-end";
     /**
      * Ping the editor to see if the page is inside the editor
      */
-    CUSTOMER_ACTIONS["PING_EDITOR"] = "ping-editor";
+    CLIENT_ACTIONS["PING_EDITOR"] = "ping-editor";
     /**
      * Tell the editor to init the inline editing editor.
      */
-    CUSTOMER_ACTIONS["INIT_INLINE_EDITING"] = "init-inline-editing";
+    CLIENT_ACTIONS["INIT_INLINE_EDITING"] = "init-inline-editing";
     /**
      * Tell the editor to open the Copy-contentlet dialog
      * To copy a content and then edit it inline.
      */
-    CUSTOMER_ACTIONS["COPY_CONTENTLET_INLINE_EDITING"] = "copy-contentlet-inline-editing";
+    CLIENT_ACTIONS["COPY_CONTENTLET_INLINE_EDITING"] = "copy-contentlet-inline-editing";
     /**
      * Tell the editor to save inline edited contentlet
      */
-    CUSTOMER_ACTIONS["UPDATE_CONTENTLET_INLINE_EDITING"] = "update-contentlet-inline-editing";
+    CLIENT_ACTIONS["UPDATE_CONTENTLET_INLINE_EDITING"] = "update-contentlet-inline-editing";
     /**
      * Tell the editor to trigger a menu reorder
      */
-    CUSTOMER_ACTIONS["REORDER_MENU"] = "reorder-menu";
+    CLIENT_ACTIONS["REORDER_MENU"] = "reorder-menu";
     /**
      * Tell the editor to send the page info to iframe
      */
-    CUSTOMER_ACTIONS["GET_PAGE_DATA"] = "get-page-data";
+    CLIENT_ACTIONS["GET_PAGE_DATA"] = "get-page-data";
     /**
      * Tell the editor an user send a graphql query
      */
-    CUSTOMER_ACTIONS["CLIENT_READY"] = "client-ready";
+    CLIENT_ACTIONS["CLIENT_READY"] = "client-ready";
+    /**
+     * Tell the editor to edit a contentlet
+     */
+    CLIENT_ACTIONS["EDIT_CONTENTLET"] = "edit-contentlet";
     /**
      * Tell the editor to do nothing
      */
-    CUSTOMER_ACTIONS["NOOP"] = "noop";
-})(CUSTOMER_ACTIONS || (CUSTOMER_ACTIONS = {}));
+    CLIENT_ACTIONS["NOOP"] = "noop";
+})(CLIENT_ACTIONS || (CLIENT_ACTIONS = {}));
 /**
  * Post message to dotcms page editor
  *
@@ -1135,32 +1177,6 @@ function postMessageToEditor(message) {
     window.parent.postMessage(message, '*');
 }
 
-/**
- * Actions received from the dotcms editor
- *
- * @export
- * @enum {number}
- */
-var NOTIFY_CUSTOMER;
-(function (NOTIFY_CUSTOMER) {
-    /**
-     * Request to page to reload
-     */
-    NOTIFY_CUSTOMER["EMA_RELOAD_PAGE"] = "ema-reload-page";
-    /**
-     * Request the bounds for the elements
-     */
-    NOTIFY_CUSTOMER["EMA_REQUEST_BOUNDS"] = "ema-request-bounds";
-    /**
-     * Received pong from the editor
-     */
-    NOTIFY_CUSTOMER["EMA_EDITOR_PONG"] = "ema-editor-pong";
-    /**
-     * Received scroll event trigger from the editor
-     */
-    NOTIFY_CUSTOMER["EMA_SCROLL_INSIDE_IFRAME"] = "scroll-inside-iframe";
-})(NOTIFY_CUSTOMER || (NOTIFY_CUSTOMER = {}));
-
 /**
  * Calculates the bounding information for each page element within the given containers.
  *
@@ -1354,7 +1370,7 @@ function setBounds() {
     const containers = Array.from(document.querySelectorAll('[data-dot-object="container"]'));
     const positionData = getPageElementBound(containers);
     postMessageToEditor({
-        action: CUSTOMER_ACTIONS.SET_BOUNDS,
+        action: CLIENT_ACTIONS.SET_BOUNDS,
         payload: positionData
     });
 }
@@ -1366,23 +1382,26 @@ function setBounds() {
  */
 function listenEditorMessages() {
     const messageCallback = (event) => {
-        switch (event.data) {
-            case NOTIFY_CUSTOMER.EMA_REQUEST_BOUNDS: {
+        const ACTIONS_NOTIFICATION = {
+            [NOTIFY_CLIENT.UVE_RELOAD_PAGE]: () => {
+                window.location.reload();
+            },
+            [NOTIFY_CLIENT.UVE_REQUEST_BOUNDS]: () => {
                 setBounds();
-                break;
-            }
-        }
-        if (event.data.name === NOTIFY_CUSTOMER.EMA_SCROLL_INSIDE_IFRAME) {
-            const direction = event.data.direction;
-            if ((window.scrollY === 0 && direction === 'up') ||
-                (scrollIsInBottom() && direction === 'down')) {
-                // If the iframe scroll is at the top or bottom, do not send anything.
-                // This avoids losing the scrollend event.
-                return;
+            },
+            [NOTIFY_CLIENT.UVE_SCROLL_INSIDE_IFRAME]: () => {
+                const direction = event.data.direction;
+                if ((window.scrollY === 0 && direction === 'up') ||
+                    (scrollIsInBottom() && 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 scrollY = direction === 'up' ? -120 : 120;
-            window.scrollBy({ left: 0, top: scrollY, behavior: 'smooth' });
-        }
+        };
+        ACTIONS_NOTIFICATION[event.data.name]?.();
     };
     window.addEventListener('message', messageCallback);
     subscriptions.push({
@@ -1434,7 +1453,7 @@ function listenHoveredContentlet() {
             vtlFiles
         };
         postMessageToEditor({
-            action: CUSTOMER_ACTIONS.SET_CONTENTLET,
+            action: CLIENT_ACTIONS.SET_CONTENTLET,
             payload: {
                 x,
                 y,
@@ -1461,13 +1480,17 @@ function listenHoveredContentlet() {
 function scrollHandler() {
     const scrollCallback = () => {
         postMessageToEditor({
-            action: CUSTOMER_ACTIONS.IFRAME_SCROLL
+            action: CLIENT_ACTIONS.IFRAME_SCROLL
         });
-        window.lastScrollYPosition = window.scrollY;
+        // In case it doesn't have a dotUVE object, we create it with the initial values.
+        window.dotUVE = {
+            ...(window.dotUVE ?? INITIAL_DOT_UVE),
+            lastScrollYPosition: window.scrollY
+        };
     };
     const scrollEndCallback = () => {
         postMessageToEditor({
-            action: CUSTOMER_ACTIONS.IFRAME_SCROLL_END
+            action: CLIENT_ACTIONS.IFRAME_SCROLL_END
         });
     };
     window.addEventListener('scroll', scrollCallback);
@@ -1491,7 +1514,7 @@ function scrollHandler() {
  */
 function fetchPageDataFromInsideUVE(pathname) {
     postMessageToEditor({
-        action: CUSTOMER_ACTIONS.GET_PAGE_DATA,
+        action: CLIENT_ACTIONS.GET_PAGE_DATA,
         payload: {
             pathname
         }
@@ -1508,12 +1531,27 @@ function fetchPageDataFromInsideUVE(pathname) {
  */
 function updateNavigation(pathname) {
     postMessageToEditor({
-        action: CUSTOMER_ACTIONS.NAVIGATION_UPDATE,
+        action: CLIENT_ACTIONS.NAVIGATION_UPDATE,
         payload: {
             url: pathname === '/' ? 'index' : pathname?.replace('/', '')
         }
     });
 }
+/**
+ * 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) {
+    postMessageToEditor({
+        action: CLIENT_ACTIONS.EDIT_CONTENTLET,
+        payload: contentlet
+    });
+}
 /**
  * Checks if the code is running inside an editor.
  *
@@ -1533,6 +1571,9 @@ function isInsideEditor() {
     }
     return window.parent !== window;
 }
+function initDotUVE() {
+    window.dotUVE = INITIAL_DOT_UVE;
+}
 /**
  * Initializes the DotCMS page editor.
  *
@@ -1544,6 +1585,7 @@ function isInsideEditor() {
  * ```
  */
 function initEditor(config) {
+    initDotUVE();
     fetchPageDataFromInsideUVE(config.pathname);
     listenEditorMessages();
     listenHoveredContentlet();
@@ -1702,7 +1744,7 @@ class DotCmsClient {
                 }
                 if (action === 'changes') {
                     const messageCallback = (event) => {
-                        if (event.data.name === 'SET_PAGE_DATA') {
+                        if (event.data.name === NOTIFY_CLIENT.UVE_SET_PAGE_DATA) {
                             callbackFn(event.data.payload);
                         }
                     };
@@ -1941,4 +1983,4 @@ const getPageRequestParams = ({ path = '', params = {} }) => {
     };
 };
 
-export { CUSTOMER_ACTIONS, DotCmsClient, destroyEditor, getPageRequestParams, graphqlToPageEntity, initEditor, isInsideEditor, postMessageToEditor, updateNavigation };
+export { CLIENT_ACTIONS, DotCmsClient, NOTIFY_CLIENT, destroyEditor, editContentlet, getPageRequestParams, graphqlToPageEntity, initEditor, isInsideEditor, postMessageToEditor, updateNavigation };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dotcms/client",
-  "version": "0.0.1-alpha.46",
+  "version": "0.0.1-alpha.47",
   "description": "Official JavaScript library for interacting with DotCMS REST APIs.",
   "repository": {
     "type": "git",

package/src/index.d.ts

@@ -1,6 +1,7 @@
 import { ClientConfig, DotCmsClient } from './lib/client/sdk-js-client';
-import { CUSTOMER_ACTIONS, postMessageToEditor } from './lib/editor/models/client.model';
+import { CLIENT_ACTIONS, postMessageToEditor } from './lib/editor/models/client.model';
 import { CustomClientParams, DotCMSPageEditorConfig, EditorConfig } from './lib/editor/models/editor.model';
-import { destroyEditor, initEditor, isInsideEditor, updateNavigation } from './lib/editor/sdk-editor';
+import { NOTIFY_CLIENT } from './lib/editor/models/listeners.model';
+import { destroyEditor, editContentlet, initEditor, isInsideEditor, updateNavigation } from './lib/editor/sdk-editor';
 import { getPageRequestParams, graphqlToPageEntity } from './lib/utils';
-export { graphqlToPageEntity, getPageRequestParams, isInsideEditor, DotCmsClient, DotCMSPageEditorConfig, CUSTOMER_ACTIONS, CustomClientParams, postMessageToEditor, EditorConfig, initEditor, updateNavigation, destroyEditor, ClientConfig };
+export { graphqlToPageEntity, getPageRequestParams, isInsideEditor, editContentlet, DotCmsClient, DotCMSPageEditorConfig, CLIENT_ACTIONS, NOTIFY_CLIENT, CustomClientParams, postMessageToEditor, EditorConfig, initEditor, updateNavigation, destroyEditor, ClientConfig };

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

@@ -1,9 +1,4 @@
 import { DotCMSPageEditorSubscription } from '../models/listeners.model';
-declare global {
-    interface Window {
-        lastScrollYPosition: number;
-    }
-}
 /**
  * Represents an array of DotCMSPageEditorSubscription objects.
  * Used to store the subscriptions for the editor and unsubscribe later.

package/src/lib/editor/models/client.model.d.ts

@@ -1,10 +1,17 @@
+import { editContentlet } from '../sdk-editor';
+declare global {
+    interface Window {
+        dotUVE: DotUVE;
+    }
+}
+export declare const INITIAL_DOT_UVE: DotUVE;
 /**
  * Actions send to the dotcms editor
  *
  * @export
  * @enum {number}
  */
-export declare enum CUSTOMER_ACTIONS {
+export declare enum CLIENT_ACTIONS {
     /**
      * Tell the dotcms editor that page change
      */
@@ -54,6 +61,10 @@ export declare enum CUSTOMER_ACTIONS {
      * Tell the editor an user send a graphql query
      */
     CLIENT_READY = "client-ready",
+    /**
+     * Tell the editor to edit a contentlet
+     */
+    EDIT_CONTENTLET = "edit-contentlet",
     /**
      * Tell the editor to do nothing
      */
@@ -67,7 +78,7 @@ export declare enum CUSTOMER_ACTIONS {
  * @interface PostMessageProps
  */
 type PostMessageProps<T> = {
-    action: CUSTOMER_ACTIONS;
+    action: CLIENT_ACTIONS;
     payload?: T;
 };
 /**
@@ -78,4 +89,8 @@ type PostMessageProps<T> = {
  * @param {PostMessageProps<T>} message
  */
 export declare function postMessageToEditor<T = unknown>(message: PostMessageProps<T>): void;
+export interface DotUVE {
+    editContentlet: typeof editContentlet;
+    lastScrollYPosition: number;
+}
 export {};

package/src/lib/editor/models/listeners.model.d.ts

@@ -4,23 +4,31 @@
  * @export
  * @enum {number}
  */
-export declare enum NOTIFY_CUSTOMER {
+export declare enum NOTIFY_CLIENT {
     /**
      * Request to page to reload
      */
-    EMA_RELOAD_PAGE = "ema-reload-page",
+    UVE_RELOAD_PAGE = "uve-reload-page",
     /**
      * Request the bounds for the elements
      */
-    EMA_REQUEST_BOUNDS = "ema-request-bounds",
+    UVE_REQUEST_BOUNDS = "uve-request-bounds",
     /**
      * Received pong from the editor
      */
-    EMA_EDITOR_PONG = "ema-editor-pong",
+    UVE_EDITOR_PONG = "uve-editor-pong",
     /**
      * Received scroll event trigger from the editor
      */
-    EMA_SCROLL_INSIDE_IFRAME = "scroll-inside-iframe"
+    UVE_SCROLL_INSIDE_IFRAME = "uve-scroll-inside-iframe",
+    /**
+     * Set the page data
+     */
+    UVE_SET_PAGE_DATA = "uve-set-page-data",
+    /**
+     * Copy contentlet inline editing success
+     */
+    UVE_COPY_CONTENTLET_INLINE_EDITING_SUCCESS = "uve-copy-contentlet-inline-editing-success"
 }
 type ListenerCallbackMessage = (event: MessageEvent) => void;
 type ListenerCallbackPointer = (event: PointerEvent) => void;

package/src/lib/editor/sdk-editor-vtl.d.ts

@@ -1,6 +1 @@
-declare global {
-    interface Window {
-        lastScrollYPosition: number;
-    }
-}
 export {};

package/src/lib/editor/sdk-editor.d.ts

@@ -1,4 +1,5 @@
 import { DotCMSPageEditorConfig } from './models/editor.model';
+import { Contentlet } from '../client/content/shared/types';
 /**
  * Updates the navigation in the editor.
  *
@@ -8,6 +9,16 @@ import { DotCMSPageEditorConfig } from './models/editor.model';
  * updateNavigation('/home'); // Sends a message to the editor to update the navigation to '/home'
  */
 export declare function updateNavigation(pathname: string): 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;
 /**
  * Checks if the code is running inside an editor.
  *
@@ -22,6 +33,7 @@ export declare function updateNavigation(pathname: string): void;
  * ```
  */
 export declare function isInsideEditor(): boolean;
+export declare function initDotUVE(): void;
 /**
  * Initializes the DotCMS page editor.
  *