@dotcms/uve 0.0.1-beta.2 → 0.0.1-beta.21

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

@@ -0,0 +1,119 @@
+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;
+}
+/**
+ * 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

@@ -0,0 +1,271 @@
+import { ContentTypeMainFields, DotCMSContainerBound } from './internal';
+import { DEVELOPMENT_MODE, PRODUCTION_MODE } from '../../../internal';
+import { DotCMSBasicGraphQLPage, DotCMSPageAsset } from '../page/public';
+/**
+ * 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;
+}
+/**
+ * The mode of the page renderer component
+ * @enum {string}
+ */
+export type DotCMSPageRendererMode = typeof PRODUCTION_MODE | typeof DEVELOPMENT_MODE;
+/**
+ * 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 UVEEventHandler
+ * @param {unknown} eventData - The event data
+ */
+export type UVEEventHandler = (eventData?: unknown) => void;
+/**
+ * Unsubscribe function for UVE events
+ * @callback UVEUnsubscribeFunction
+ */
+export type UVEUnsubscribeFunction = () => void;
+/**
+ * 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 UVEEventSubscription = {
+    unsubscribe: UVEUnsubscribeFunction;
+    event: string;
+};
+/**
+ * UVE event type
+ * @typedef {function} UVEEventSubscriber
+ */
+export type UVEEventSubscriber = (callback: UVEEventHandler) => UVEEventSubscription;
+/**
+ * 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"
+}
+/**
+ * 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]: DotCMSEditablePage;
+    [UVEEventType.PAGE_RELOAD]: undefined;
+    [UVEEventType.REQUEST_BOUNDS]: DotCMSContainerBound[];
+    [UVEEventType.IFRAME_SCROLL]: 'up' | 'down';
+    [UVEEventType.CONTENTLET_HOVERED]: unknown;
+};
+/**
+ *
+ * Interface representing the data needed for container editing
+ * @interface EditableContainerData
+ */
+export interface EditableContainerData {
+    uuid: string;
+    identifier: string;
+    acceptTypes: string;
+    maxContentlets: number;
+    variantId?: string;
+}
+/**
+ *
+ * Interface representing the data attributes of a DotCMS container.
+ * @interface DotContainerAttributes
+ */
+export interface DotContainerAttributes {
+    'data-dot-object': string;
+    'data-dot-accept-types': string;
+    'data-dot-identifier': string;
+    'data-max-contentlets': string;
+    'data-dot-uuid': string;
+}
+/**
+ *
+ * Interface representing the data attributes of a DotCMS contentlet.
+ * @interface DotContentletAttributes
+ */
+export interface DotContentletAttributes {
+    'data-dot-identifier': string;
+    'data-dot-basetype': string;
+    'data-dot-title': string;
+    'data-dot-inode': string;
+    'data-dot-type': string;
+    'data-dot-container': string;
+    'data-dot-on-number-of-pages': string;
+}
+/**
+ * Represents a GraphQL error
+ * @interface DotCMSGraphQLError
+ */
+export interface DotCMSGraphQLError {
+    message: string;
+    locations: {
+        line: number;
+        column: number;
+    }[];
+    extensions: {
+        classification: string;
+    };
+}
+/**
+ * Represents the complete response from a GraphQL page query
+ *
+ * @template TContent - The type of the content data
+ * @template TNav - The type of the navigation data
+ */
+export interface DotCMSGraphQLPageResponse<TContent = Record<string, any>> {
+    page: DotCMSBasicGraphQLPage;
+    content?: TContent;
+    errors?: DotCMSGraphQLError;
+    graphql: {
+        query: string;
+        variables: Record<string, unknown>;
+    };
+}
+/**
+ * Payload for initializing the UVE
+ * @interface DotCMSEditablePage
+ */
+export type DotCMSEditablePage = DotCMSGraphQLPageResponse | DotCMSPageAsset;
+/**
+ * Configuration for the UVE
+ * @interface DotCMSUVEConfig
+ */
+export interface DotCMSUVEConfig {
+    graphql?: {
+        query: string;
+        variables: Record<string, unknown>;
+    };
+    params?: Record<string, unknown>;
+}

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

@@ -0,0 +1,34 @@
+/**
+ * Actions received from the dotcms editor
+ *
+ * @export
+ * @enum {number}
+ */
+export declare enum __DOTCMS_UVE_EVENT__ {
+    /**
+     * Request to page to reload
+     */
+    UVE_RELOAD_PAGE = "uve-reload-page",
+    /**
+     * Request the bounds for the elements
+     */
+    UVE_REQUEST_BOUNDS = "uve-request-bounds",
+    /**
+     * Received pong from the editor
+     */
+    UVE_EDITOR_PONG = "uve-editor-pong",
+    /**
+     * Received scroll event trigger from the editor
+     */
+    UVE_SCROLL_INSIDE_IFRAME = "uve-scroll-inside-iframe",
+    /**
+     * 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",
+    /**
+     * Copy contentlet inline editing success
+     */
+    UVE_COPY_CONTENTLET_INLINE_EDITING_SUCCESS = "uve-copy-contentlet-inline-editing-success"
+}

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>;
+}