@dotcms/uve 0.0.1-beta.8 → 0.0.1-beta.9

package/internal.cjs.js

@@ -1,38 +1,38 @@
 'use strict';
 
 /**
- * Actions received from the dotCMS UVE
+ * Actions received from the dotcms editor
  *
- * @internal
- * @enum {string}
+ * @export
+ * @enum {number}
  */
-exports.__NOTIFY_CLIENT__ = void 0;
-(function (__NOTIFY_CLIENT__) {
+exports.__DOTCMS_UVE_EVENT__ = void 0;
+(function (__DOTCMS_UVE_EVENT__) {
   /**
    * Request to page to reload
    */
-  __NOTIFY_CLIENT__["UVE_RELOAD_PAGE"] = "uve-reload-page";
+  __DOTCMS_UVE_EVENT__["UVE_RELOAD_PAGE"] = "uve-reload-page";
   /**
    * Request the bounds for the elements
    */
-  __NOTIFY_CLIENT__["UVE_REQUEST_BOUNDS"] = "uve-request-bounds";
+  __DOTCMS_UVE_EVENT__["UVE_REQUEST_BOUNDS"] = "uve-request-bounds";
   /**
    * Received pong from the editor
    */
-  __NOTIFY_CLIENT__["UVE_EDITOR_PONG"] = "uve-editor-pong";
+  __DOTCMS_UVE_EVENT__["UVE_EDITOR_PONG"] = "uve-editor-pong";
   /**
    * Received scroll event trigger from the editor
    */
-  __NOTIFY_CLIENT__["UVE_SCROLL_INSIDE_IFRAME"] = "uve-scroll-inside-iframe";
+  __DOTCMS_UVE_EVENT__["UVE_SCROLL_INSIDE_IFRAME"] = "uve-scroll-inside-iframe";
   /**
    * Set the page data
    */
-  __NOTIFY_CLIENT__["UVE_SET_PAGE_DATA"] = "uve-set-page-data";
+  __DOTCMS_UVE_EVENT__["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__ = {}));
+  __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
 /**
@@ -44,7 +44,7 @@ exports.__NOTIFY_CLIENT__ = void 0;
 const __UVE_EVENTS__ = {
   changes: callback => {
     const messageCallback = event => {
-      if (event.data.name === exports.__NOTIFY_CLIENT__.UVE_SET_PAGE_DATA) {
+      if (event.data.name === exports.__DOTCMS_UVE_EVENT__.UVE_SET_PAGE_DATA) {
         callback(event.data.payload);
       }
     };

package/internal.esm.js

@@ -1,36 +1,36 @@
 /**
- * Actions received from the dotCMS UVE
+ * Actions received from the dotcms editor
  *
- * @internal
- * @enum {string}
+ * @export
+ * @enum {number}
  */
-var __NOTIFY_CLIENT__;
-(function (__NOTIFY_CLIENT__) {
+var __DOTCMS_UVE_EVENT__;
+(function (__DOTCMS_UVE_EVENT__) {
   /**
    * Request to page to reload
    */
-  __NOTIFY_CLIENT__["UVE_RELOAD_PAGE"] = "uve-reload-page";
+  __DOTCMS_UVE_EVENT__["UVE_RELOAD_PAGE"] = "uve-reload-page";
   /**
    * Request the bounds for the elements
    */
-  __NOTIFY_CLIENT__["UVE_REQUEST_BOUNDS"] = "uve-request-bounds";
+  __DOTCMS_UVE_EVENT__["UVE_REQUEST_BOUNDS"] = "uve-request-bounds";
   /**
    * Received pong from the editor
    */
-  __NOTIFY_CLIENT__["UVE_EDITOR_PONG"] = "uve-editor-pong";
+  __DOTCMS_UVE_EVENT__["UVE_EDITOR_PONG"] = "uve-editor-pong";
   /**
    * Received scroll event trigger from the editor
    */
-  __NOTIFY_CLIENT__["UVE_SCROLL_INSIDE_IFRAME"] = "uve-scroll-inside-iframe";
+  __DOTCMS_UVE_EVENT__["UVE_SCROLL_INSIDE_IFRAME"] = "uve-scroll-inside-iframe";
   /**
    * Set the page data
    */
-  __NOTIFY_CLIENT__["UVE_SET_PAGE_DATA"] = "uve-set-page-data";
+  __DOTCMS_UVE_EVENT__["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__ = {}));
+  __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
 /**
@@ -42,7 +42,7 @@ var __NOTIFY_CLIENT__;
 const __UVE_EVENTS__ = {
   changes: callback => {
     const messageCallback = event => {
-      if (event.data.name === __NOTIFY_CLIENT__.UVE_SET_PAGE_DATA) {
+      if (event.data.name === __DOTCMS_UVE_EVENT__.UVE_SET_PAGE_DATA) {
         callback(event.data.payload);
       }
     };
@@ -70,4 +70,4 @@ const __UVE_EVENT_ERROR_FALLBACK__ = event => {
   };
 };
 
-export { __NOTIFY_CLIENT__, __UVE_EVENTS__, __UVE_EVENT_ERROR_FALLBACK__ };
+export { __DOTCMS_UVE_EVENT__, __UVE_EVENTS__, __UVE_EVENT_ERROR_FALLBACK__ };

package/package.json

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

package/src/internal/constants.d.ts

@@ -1,4 +1,4 @@
-import { UVEEvent } from '../lib/types';
+import { UVEEvent } from '../lib/types/editor/public';
 /**
  * Events that can be subscribed to in the UVE
  *

package/src/internal/index.d.ts

@@ -1,2 +1 @@
 export * from './constants';
-export * from './enums';

package/src/internal.d.ts

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

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

@@ -0,0 +1,44 @@
+import { DotCMSUVEAction } from './public';
+/**
+ * @description Custom client parameters for fetching data.
+ */
+export type DotCMSCustomerParams = {
+    depth: string;
+};
+/**
+ * Configuration for reordering a menu.
+ */
+export interface DotCMSReorderMenuConfig {
+    /**
+     * The starting level of the menu to be reordered.
+     */
+    startLevel: number;
+    /**
+     * The depth of the menu levels to be reordered.
+     */
+    depth: number;
+}
+declare global {
+    interface Window {
+        dotCMSUVE: DotCMSUVE;
+    }
+}
+/**
+ * Post message props
+ *
+ * @export
+ * @template T
+ * @interface DotCMSUVEMessage
+ */
+export type DotCMSUVEMessage<T> = {
+    action: DotCMSUVEAction;
+    payload?: T;
+};
+type DotCMSUVEFunction = (...args: any[]) => void;
+export interface DotCMSUVE {
+    editContentlet: DotCMSUVEFunction;
+    initInlineEditing: DotCMSUVEFunction;
+    reorderMenu: DotCMSUVEFunction;
+    lastScrollYPosition: number;
+}
+export {};

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

@@ -0,0 +1,138 @@
+/**
+ * Represents the state of the Universal Visual Editor (UVE)
+ * @interface
+ * @property {UVE_MODE} mode - The current mode of operation for UVE (EDIT, PREVIEW, LIVE, or UNKNOWN)
+ * @property {string | null} persona - The selected persona for content personalization
+ * @property {string | null} variantName - The name of the current content variant
+ * @property {string | null} experimentId - The identifier for the current A/B testing experiment
+ * @property {string | null} publishDate - The scheduled publish date for content
+ * @property {string | null} languageId - The identifier for the current language selection
+ */
+export interface UVEState {
+    mode: UVE_MODE;
+    persona: string | null;
+    variantName: string | null;
+    experimentId: string | null;
+    publishDate: string | null;
+    languageId: string | null;
+}
+/**
+ * Possible modes of UVE (Universal Visual Editor)
+ * @enum {string}
+ *
+ * @property {string} LIVE - Shows published and future content
+ * @property {string} PREVIEW - Shows published and working content
+ * @property {string} EDIT - Enables content editing functionality in UVE
+ * @property {string} UNKNOWN - Error state, UVE should not remain in this mode
+ */
+export declare enum UVE_MODE {
+    EDIT = "EDIT_MODE",
+    PREVIEW = "PREVIEW_MODE",
+    LIVE = "LIVE",
+    UNKNOWN = "UNKNOWN"
+}
+/**
+ * Callback function for UVE events
+ * @callback UVECallback
+ * @param {unknown} payload - The payload of the event
+ */
+export type UVECallback = (payload: unknown) => void;
+/**
+ * Unsubscribe function for UVE events
+ * @callback UnsubscribeUVE
+ */
+export type UnsubscribeUVE = () => void;
+/**
+ * UVESubscription type
+ * @typedef {Object} UVESubscription
+ * @property {UnsubscribeUVE} unsubscribe - The unsubscribe function for the UVE event
+ * @property {string} event - The event name
+ */
+export type UVESubscription = {
+    unsubscribe: UnsubscribeUVE;
+    event: string;
+};
+/**
+ * UVE event type
+ * @typedef {function} UVEEvent
+ */
+export type UVEEvent = (callback: UVECallback) => UVESubscription;
+/**
+ * Configuration type for DotCMS Editor
+ * @typedef {Object} DotCMSEditoConfig
+ * @property {Object} [params] - Parameters for Page API configuration
+ * @property {number} [params.depth] - The depth level for fetching page data
+ * @property {string} [query] - GraphQL query string for data fetching
+ */
+export type DotCMSEditorConfig = {
+    params: {
+        depth: number;
+    };
+} | {
+    query: string;
+};
+/**
+ * Actions send to the dotcms editor
+ *
+ * @export
+ * @enum {number}
+ */
+export declare enum DotCMSUVEAction {
+    /**
+     * Tell the dotcms editor that page change
+     */
+    NAVIGATION_UPDATE = "set-url",
+    /**
+     * Send the element position of the rows, columnsm containers and contentlets
+     */
+    SET_BOUNDS = "set-bounds",
+    /**
+     * Send the information of the hovered contentlet
+     */
+    SET_CONTENTLET = "set-contentlet",
+    /**
+     * Tell the editor that the page is being scrolled
+     */
+    IFRAME_SCROLL = "scroll",
+    /**
+     * Tell the editor that the page has stopped scrolling
+     */
+    IFRAME_SCROLL_END = "scroll-end",
+    /**
+     * Ping the editor to see if the page is inside the editor
+     */
+    PING_EDITOR = "ping-editor",
+    /**
+     * Tell the editor to init the inline editing editor.
+     */
+    INIT_INLINE_EDITING = "init-inline-editing",
+    /**
+     * Tell the editor to open the Copy-contentlet dialog
+     * To copy a content and then edit it inline.
+     */
+    COPY_CONTENTLET_INLINE_EDITING = "copy-contentlet-inline-editing",
+    /**
+     * Tell the editor to save inline edited contentlet
+     */
+    UPDATE_CONTENTLET_INLINE_EDITING = "update-contentlet-inline-editing",
+    /**
+     * Tell the editor to trigger a menu reorder
+     */
+    REORDER_MENU = "reorder-menu",
+    /**
+     * Tell the editor to send the page info to iframe
+     */
+    GET_PAGE_DATA = "get-page-data",
+    /**
+     * 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
+     */
+    NOOP = "noop"
+}

package/src/{internal/enums.d.ts → lib/types/events/internal.d.ts}

@@ -1,10 +1,10 @@
 /**
- * Actions received from the dotCMS UVE
+ * Actions received from the dotcms editor
  *
- * @internal
- * @enum {string}
+ * @export
+ * @enum {number}
  */
-export declare enum __NOTIFY_CLIENT__ {
+export declare enum __DOTCMS_UVE_EVENT__ {
     /**
      * Request to page to reload
      */

package/src/lib/types/events/public.d.ts

@@ -0,0 +1,18 @@
+export type DotCMSInlineEditingType = 'BLOCK_EDITOR' | 'WYSIWYG';
+/**
+ * Interface representing the data needed for inline editing in DotCMS
+ *
+ * @interface DotCMSInlineEditorData
+ * @property {string} inode - The inode identifier of the content being edited
+ * @property {number} language - The language ID of the content
+ * @property {string} contentType - The content type identifier
+ * @property {string} fieldName - The name of the field being edited
+ * @property {Record<string, unknown>} content - The content data as key-value pairs
+ */
+export interface DotCMSInlineEditingPayload {
+    inode: string;
+    language: number;
+    contentType: string;
+    fieldName: string;
+    content: Record<string, unknown>;
+}

package/src/lib/utils.d.ts

@@ -1,4 +1,4 @@
-import { UVECallback, UVEState, UVESubscription } from './types';
+import { UVECallback, UVEState, UVESubscription } from './types/editor/public';
 /**
  * Gets the current state of the Universal Visual Editor (UVE).
  *

package/src/types.d.ts

@@ -1 +1,2 @@
-export * from './lib/types';
+export * from './lib/types/editor/public';
+export * from './lib/types/events/public';

package/types.cjs.js

@@ -16,3 +16,69 @@ exports.UVE_MODE = void 0;
   UVE_MODE["LIVE"] = "LIVE";
   UVE_MODE["UNKNOWN"] = "UNKNOWN";
 })(exports.UVE_MODE || (exports.UVE_MODE = {}));
+/**
+ * Actions send to the dotcms editor
+ *
+ * @export
+ * @enum {number}
+ */
+exports.DotCMSUVEAction = void 0;
+(function (DotCMSUVEAction) {
+  /**
+   * Tell the dotcms editor that page change
+   */
+  DotCMSUVEAction["NAVIGATION_UPDATE"] = "set-url";
+  /**
+   * Send the element position of the rows, columnsm containers and contentlets
+   */
+  DotCMSUVEAction["SET_BOUNDS"] = "set-bounds";
+  /**
+   * Send the information of the hovered contentlet
+   */
+  DotCMSUVEAction["SET_CONTENTLET"] = "set-contentlet";
+  /**
+   * Tell the editor that the page is being scrolled
+   */
+  DotCMSUVEAction["IFRAME_SCROLL"] = "scroll";
+  /**
+   * Tell the editor that the page has stopped scrolling
+   */
+  DotCMSUVEAction["IFRAME_SCROLL_END"] = "scroll-end";
+  /**
+   * Ping the editor to see if the page is inside the editor
+   */
+  DotCMSUVEAction["PING_EDITOR"] = "ping-editor";
+  /**
+   * Tell the editor to init the inline editing editor.
+   */
+  DotCMSUVEAction["INIT_INLINE_EDITING"] = "init-inline-editing";
+  /**
+   * Tell the editor to open the Copy-contentlet dialog
+   * To copy a content and then edit it inline.
+   */
+  DotCMSUVEAction["COPY_CONTENTLET_INLINE_EDITING"] = "copy-contentlet-inline-editing";
+  /**
+   * Tell the editor to save inline edited contentlet
+   */
+  DotCMSUVEAction["UPDATE_CONTENTLET_INLINE_EDITING"] = "update-contentlet-inline-editing";
+  /**
+   * Tell the editor to trigger a menu reorder
+   */
+  DotCMSUVEAction["REORDER_MENU"] = "reorder-menu";
+  /**
+   * Tell the editor to send the page info to iframe
+   */
+  DotCMSUVEAction["GET_PAGE_DATA"] = "get-page-data";
+  /**
+   * Tell the editor an user send a graphql query
+   */
+  DotCMSUVEAction["CLIENT_READY"] = "client-ready";
+  /**
+   * Tell the editor to edit a contentlet
+   */
+  DotCMSUVEAction["EDIT_CONTENTLET"] = "edit-contentlet";
+  /**
+   * Tell the editor to do nothing
+   */
+  DotCMSUVEAction["NOOP"] = "noop";
+})(exports.DotCMSUVEAction || (exports.DotCMSUVEAction = {}));

package/types.esm.js

@@ -14,5 +14,71 @@ var UVE_MODE;
   UVE_MODE["LIVE"] = "LIVE";
   UVE_MODE["UNKNOWN"] = "UNKNOWN";
 })(UVE_MODE || (UVE_MODE = {}));
+/**
+ * Actions send to the dotcms editor
+ *
+ * @export
+ * @enum {number}
+ */
+var DotCMSUVEAction;
+(function (DotCMSUVEAction) {
+  /**
+   * Tell the dotcms editor that page change
+   */
+  DotCMSUVEAction["NAVIGATION_UPDATE"] = "set-url";
+  /**
+   * Send the element position of the rows, columnsm containers and contentlets
+   */
+  DotCMSUVEAction["SET_BOUNDS"] = "set-bounds";
+  /**
+   * Send the information of the hovered contentlet
+   */
+  DotCMSUVEAction["SET_CONTENTLET"] = "set-contentlet";
+  /**
+   * Tell the editor that the page is being scrolled
+   */
+  DotCMSUVEAction["IFRAME_SCROLL"] = "scroll";
+  /**
+   * Tell the editor that the page has stopped scrolling
+   */
+  DotCMSUVEAction["IFRAME_SCROLL_END"] = "scroll-end";
+  /**
+   * Ping the editor to see if the page is inside the editor
+   */
+  DotCMSUVEAction["PING_EDITOR"] = "ping-editor";
+  /**
+   * Tell the editor to init the inline editing editor.
+   */
+  DotCMSUVEAction["INIT_INLINE_EDITING"] = "init-inline-editing";
+  /**
+   * Tell the editor to open the Copy-contentlet dialog
+   * To copy a content and then edit it inline.
+   */
+  DotCMSUVEAction["COPY_CONTENTLET_INLINE_EDITING"] = "copy-contentlet-inline-editing";
+  /**
+   * Tell the editor to save inline edited contentlet
+   */
+  DotCMSUVEAction["UPDATE_CONTENTLET_INLINE_EDITING"] = "update-contentlet-inline-editing";
+  /**
+   * Tell the editor to trigger a menu reorder
+   */
+  DotCMSUVEAction["REORDER_MENU"] = "reorder-menu";
+  /**
+   * Tell the editor to send the page info to iframe
+   */
+  DotCMSUVEAction["GET_PAGE_DATA"] = "get-page-data";
+  /**
+   * Tell the editor an user send a graphql query
+   */
+  DotCMSUVEAction["CLIENT_READY"] = "client-ready";
+  /**
+   * Tell the editor to edit a contentlet
+   */
+  DotCMSUVEAction["EDIT_CONTENTLET"] = "edit-contentlet";
+  /**
+   * Tell the editor to do nothing
+   */
+  DotCMSUVEAction["NOOP"] = "noop";
+})(DotCMSUVEAction || (DotCMSUVEAction = {}));
 
-export { UVE_MODE };
+export { DotCMSUVEAction, UVE_MODE };

package/src/lib/types.d.ts

@@ -1,59 +0,0 @@
-/**
- * Represents the state of the Universal Visual Editor (UVE)
- * @interface
- * @property {UVE_MODE} mode - The current mode of operation for UVE (EDIT, PREVIEW, LIVE, or UNKNOWN)
- * @property {string | null} persona - The selected persona for content personalization
- * @property {string | null} variantName - The name of the current content variant
- * @property {string | null} experimentId - The identifier for the current A/B testing experiment
- * @property {string | null} publishDate - The scheduled publish date for content
- * @property {string | null} languageId - The identifier for the current language selection
- */
-export interface UVEState {
-    mode: UVE_MODE;
-    persona: string | null;
-    variantName: string | null;
-    experimentId: string | null;
-    publishDate: string | null;
-    languageId: string | null;
-}
-/**
- * Possible modes of UVE (Universal Visual Editor)
- * @enum {string}
- *
- * @property {string} LIVE - Shows published and future content
- * @property {string} PREVIEW - Shows published and working content
- * @property {string} EDIT - Enables content editing functionality in UVE
- * @property {string} UNKNOWN - Error state, UVE should not remain in this mode
- */
-export declare enum UVE_MODE {
-    EDIT = "EDIT_MODE",
-    PREVIEW = "PREVIEW_MODE",
-    LIVE = "LIVE",
-    UNKNOWN = "UNKNOWN"
-}
-/**
- * Callback function for UVE events
- * @callback UVECallback
- * @param {unknown} payload - The payload of the event
- */
-export type UVECallback = (payload: unknown) => void;
-/**
- * Unsubscribe function for UVE events
- * @callback UnsubscribeUVE
- */
-export type UnsubscribeUVE = () => void;
-/**
- * UVESubscription type
- * @typedef {Object} UVESubscription
- * @property {UnsubscribeUVE} unsubscribe - The unsubscribe function for the UVE event
- * @property {string} event - The event name
- */
-export type UVESubscription = {
-    unsubscribe: UnsubscribeUVE;
-    event: string;
-};
-/**
- * UVE event type
- * @typedef {function} UVEEvent
- */
-export type UVEEvent = (callback: UVECallback) => UVESubscription;