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

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

@@ -41,4 +41,79 @@ export interface DotCMSUVE {
     reorderMenu: DotCMSUVEFunction;
     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
+ * @property {number} x - The x-coordinate of the contentlet.
+ * @property {number} y - The y-coordinate of the contentlet.
+ * @property {number} width - The width of the contentlet.
+ * @property {number} height - The height of the contentlet.
+ * @property {string} payload - The payload data of the contentlet in JSON format.
+ */
+export interface DotCMSContentletBound {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    payload: string;
+}
+/**
+ * Bound information for a container.
+ *
+ * @interface DotCMSContainerBound
+ * @property {number} x - The x-coordinate of the container.
+ * @property {number} y - The y-coordinate of the container.
+ * @property {number} width - The width of the container.
+ * @property {number} height - The height of the container.
+ * @property {string} payload - The payload data of the container in JSON format.
+ * @property {DotCMSContentletBound[]} contentlets - An array of contentlets within the container.
+ */
+export interface DotCMSContainerBound {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    payload: string;
+    contentlets: DotCMSContentletBound[];
+}
 export {};

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

@@ -1,3 +1,4 @@
+import { ContentTypeMainFields, DotCMSContainerBound } from './internal';
 /**
  * Represents the state of the Universal Visual Editor (UVE)
  * @interface
@@ -33,30 +34,30 @@ export declare enum UVE_MODE {
 }
 /**
  * Callback function for UVE events
- * @callback UVECallback
- * @param {unknown} payload - The payload of the event
+ * @callback UVEEventHandler
+ * @param {unknown} eventData - The event data
  */
-export type UVECallback = (payload: unknown) => void;
+export type UVEEventHandler = (eventData?: unknown) => void;
 /**
  * Unsubscribe function for UVE events
- * @callback UnsubscribeUVE
+ * @callback UVEUnsubscribeFunction
  */
-export type UnsubscribeUVE = () => void;
+export type UVEUnsubscribeFunction = () => void;
 /**
- * UVESubscription type
- * @typedef {Object} UVESubscription
- * @property {UnsubscribeUVE} unsubscribe - The unsubscribe function for the UVE event
+ * UVE event subscription type
+ * @typedef {Object} UVEEventSubscription
+ * @property {UVEUnsubscribeFunction} unsubscribe - The unsubscribe function for the UVE event
  * @property {string} event - The event name
  */
-export type UVESubscription = {
-    unsubscribe: UnsubscribeUVE;
+export type UVEEventSubscription = {
+    unsubscribe: UVEUnsubscribeFunction;
     event: string;
 };
 /**
  * UVE event type
- * @typedef {function} UVEEvent
+ * @typedef {function} UVEEventSubscriber
  */
-export type UVEEvent = (callback: UVECallback) => UVESubscription;
+export type UVEEventSubscriber = (callback: UVEEventHandler) => UVEEventSubscription;
 /**
  * Configuration type for DotCMS Editor
  * @typedef {Object} DotCMSEditoConfig
@@ -136,3 +137,45 @@ export declare enum DotCMSUVEAction {
      */
     NOOP = "noop"
 }
+/**
+ * The contentlet has the main fields and the custom fields of the content type.
+ *
+ * @template T - The custom fields of the content type.
+ */
+export type Contentlet<T> = T & ContentTypeMainFields;
+/**
+ * Available events in the Universal Visual Editor
+ * @enum {string}
+ */
+export declare enum UVEEventType {
+    /**
+     * Triggered when page data changes from the editor
+     */
+    CONTENT_CHANGES = "changes",
+    /**
+     * Triggered when the page needs to be reloaded
+     */
+    PAGE_RELOAD = "page-reload",
+    /**
+     * Triggered when the editor requests container bounds
+     */
+    REQUEST_BOUNDS = "request-bounds",
+    /**
+     * Triggered when scroll action is needed inside the iframe
+     */
+    IFRAME_SCROLL = "iframe-scroll",
+    /**
+     * Triggered when a contentlet is hovered
+     */
+    CONTENTLET_HOVERED = "contentlet-hovered"
+}
+/**
+ * Type definitions for each event's payload
+ */
+export type UVEEventPayloadMap = {
+    [UVEEventType.CONTENT_CHANGES]: unknown;
+    [UVEEventType.PAGE_RELOAD]: undefined;
+    [UVEEventType.REQUEST_BOUNDS]: DotCMSContainerBound[];
+    [UVEEventType.IFRAME_SCROLL]: 'up' | 'down';
+    [UVEEventType.CONTENTLET_HOVERED]: unknown;
+};

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

@@ -22,7 +22,9 @@ export declare enum __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.
      */
     UVE_SET_PAGE_DATA = "uve-set-page-data",
     /**

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

@@ -0,0 +1,6 @@
+declare global {
+    interface Window {
+        dotUVE: unknown;
+    }
+}
+export {};

package/src/script/utils.d.ts

@@ -0,0 +1,4 @@
+export declare function scrollHandler(): void;
+export declare function addClassToEmptyContentlets(): void;
+export declare function registerUVEEvents(): void;
+export declare function setClientIsReady(): void;

package/types.cjs.js

@@ -82,3 +82,30 @@ exports.DotCMSUVEAction = void 0;
    */
   DotCMSUVEAction["NOOP"] = "noop";
 })(exports.DotCMSUVEAction || (exports.DotCMSUVEAction = {}));
+/**
+ * Available events in the Universal Visual Editor
+ * @enum {string}
+ */
+exports.UVEEventType = void 0;
+(function (UVEEventType) {
+  /**
+   * Triggered when page data changes from the editor
+   */
+  UVEEventType["CONTENT_CHANGES"] = "changes";
+  /**
+   * Triggered when the page needs to be reloaded
+   */
+  UVEEventType["PAGE_RELOAD"] = "page-reload";
+  /**
+   * Triggered when the editor requests container bounds
+   */
+  UVEEventType["REQUEST_BOUNDS"] = "request-bounds";
+  /**
+   * Triggered when scroll action is needed inside the iframe
+   */
+  UVEEventType["IFRAME_SCROLL"] = "iframe-scroll";
+  /**
+   * Triggered when a contentlet is hovered
+   */
+  UVEEventType["CONTENTLET_HOVERED"] = "contentlet-hovered";
+})(exports.UVEEventType || (exports.UVEEventType = {}));

package/types.esm.js

@@ -80,5 +80,32 @@ var DotCMSUVEAction;
    */
   DotCMSUVEAction["NOOP"] = "noop";
 })(DotCMSUVEAction || (DotCMSUVEAction = {}));
+/**
+ * Available events in the Universal Visual Editor
+ * @enum {string}
+ */
+var UVEEventType;
+(function (UVEEventType) {
+  /**
+   * Triggered when page data changes from the editor
+   */
+  UVEEventType["CONTENT_CHANGES"] = "changes";
+  /**
+   * Triggered when the page needs to be reloaded
+   */
+  UVEEventType["PAGE_RELOAD"] = "page-reload";
+  /**
+   * Triggered when the editor requests container bounds
+   */
+  UVEEventType["REQUEST_BOUNDS"] = "request-bounds";
+  /**
+   * Triggered when scroll action is needed inside the iframe
+   */
+  UVEEventType["IFRAME_SCROLL"] = "iframe-scroll";
+  /**
+   * Triggered when a contentlet is hovered
+   */
+  UVEEventType["CONTENTLET_HOVERED"] = "contentlet-hovered";
+})(UVEEventType || (UVEEventType = {}));
 
-export { DotCMSUVEAction, UVE_MODE };
+export { DotCMSUVEAction, UVEEventType, UVE_MODE };