@dotcms/client 0.0.1-alpha.38 → 0.0.1-alpha.39

package/src/lib/editor/models/{client.model.d.ts → client.model.ts}

@@ -4,61 +4,62 @@
  * @export
  * @enum {number}
  */
-export declare enum CUSTOMER_ACTIONS {
+export enum CUSTOMER_ACTIONS {
     /**
      * Tell the dotcms editor that page change
      */
-    NAVIGATION_UPDATE = "set-url",
+    NAVIGATION_UPDATE = 'set-url',
     /**
      * Send the element position of the rows, columnsm containers and contentlets
      */
-    SET_BOUNDS = "set-bounds",
+    SET_BOUNDS = 'set-bounds',
     /**
      * Send the information of the hovered contentlet
      */
-    SET_CONTENTLET = "set-contentlet",
+    SET_CONTENTLET = 'set-contentlet',
     /**
      * Tell the editor that the page is being scrolled
      */
-    IFRAME_SCROLL = "scroll",
+    IFRAME_SCROLL = 'scroll',
     /**
      * Tell the editor that the page has stopped scrolling
      */
-    IFRAME_SCROLL_END = "scroll-end",
+    IFRAME_SCROLL_END = 'scroll-end',
     /**
      * Ping the editor to see if the page is inside the editor
      */
-    PING_EDITOR = "ping-editor",
+    PING_EDITOR = 'ping-editor',
     /**
      * Tell the editor to init the inline editing editor.
      */
-    INIT_INLINE_EDITING = "init-inline-editing",
+    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",
+    COPY_CONTENTLET_INLINE_EDITING = 'copy-contentlet-inline-editing',
     /**
      * Tell the editor to save inline edited contentlet
      */
-    UPDATE_CONTENTLET_INLINE_EDITING = "update-contentlet-inline-editing",
+    UPDATE_CONTENTLET_INLINE_EDITING = 'update-contentlet-inline-editing',
     /**
      * Tell the editor to trigger a menu reorder
      */
-    REORDER_MENU = "reorder-menu",
+    REORDER_MENU = 'reorder-menu',
     /**
      * Tell the editor to send the page info to iframe
      */
-    GET_PAGE_DATA = "get-page-data",
+    GET_PAGE_DATA = 'get-page-data',
     /**
      * Tell the editor an user send a graphql query
      */
-    CLIENT_READY = "client-ready",
+    CLIENT_READY = 'client-ready',
     /**
      * Tell the editor to do nothing
      */
-    NOOP = "noop"
+    NOOP = 'noop'
 }
+
 /**
  * Post message props
  *
@@ -70,6 +71,7 @@ type PostMessageProps<T> = {
     action: CUSTOMER_ACTIONS;
     payload?: T;
 };
+
 /**
  * Post message to dotcms page editor
  *
@@ -77,5 +79,6 @@ type PostMessageProps<T> = {
  * @template T
  * @param {PostMessageProps<T>} message
  */
-export declare function postMessageToEditor<T = unknown>(message: PostMessageProps<T>): void;
-export {};
+export function postMessageToEditor<T = unknown>(message: PostMessageProps<T>) {
+    window.parent.postMessage(message, '*');
+}

package/src/lib/editor/models/{editor.model.d.ts → editor.model.ts}

@@ -4,15 +4,19 @@
 export type CustomClientParams = {
     depth: string;
 };
+
 /**
  * @description Union type for fetch configurations.
  * @typedef {GraphQLFetchConfig | PageAPIFetchConfig} DotCMSFetchConfig
  */
-export type EditorConfig = {
-    params: CustomClientParams;
-} | {
-    query: string;
-};
+export type EditorConfig =
+    | {
+          params: CustomClientParams;
+      }
+    | {
+          query: string;
+      };
+
 /**
  * Represents the configuration options for the DotCMS page editor.
  * @export

package/src/lib/editor/models/{listeners.model.d.ts → listeners.model.ts}

@@ -4,26 +4,28 @@
  * @export
  * @enum {number}
  */
-export declare enum NOTIFY_CUSTOMER {
+export enum NOTIFY_CUSTOMER {
     /**
      * Request to page to reload
      */
-    EMA_RELOAD_PAGE = "ema-reload-page",
+    EMA_RELOAD_PAGE = 'ema-reload-page',
     /**
      * Request the bounds for the elements
      */
-    EMA_REQUEST_BOUNDS = "ema-request-bounds",
+    EMA_REQUEST_BOUNDS = 'ema-request-bounds',
     /**
      * Received pong from the editor
      */
-    EMA_EDITOR_PONG = "ema-editor-pong",
+    EMA_EDITOR_PONG = 'ema-editor-pong',
     /**
      * Received scroll event trigger from the editor
      */
-    EMA_SCROLL_INSIDE_IFRAME = "scroll-inside-iframe"
+    EMA_SCROLL_INSIDE_IFRAME = 'scroll-inside-iframe'
 }
+
 type ListenerCallbackMessage = (event: MessageEvent) => void;
 type ListenerCallbackPointer = (event: PointerEvent) => void;
+
 /**
  * Listener for the dotcms editor
  *
@@ -34,6 +36,7 @@ interface DotCMSPageEditorListener {
     event: string;
     callback: ListenerCallbackMessage | ListenerCallbackPointer;
 }
+
 /**
  * Observer for the dotcms editor
  *
@@ -43,5 +46,5 @@ interface DotCMSPageEditorObserver {
     type: 'observer';
     observer: MutationObserver;
 }
+
 export type DotCMSPageEditorSubscription = DotCMSPageEditorListener | DotCMSPageEditorObserver;
-export {};

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

@@ -0,0 +1,31 @@
+import {
+    listenEditorMessages,
+    listenHoveredContentlet,
+    preserveScrollOnIframe,
+    scrollHandler
+} from './listeners/listeners';
+import { isInsideEditor, addClassToEmptyContentlets } from './sdk-editor';
+
+declare global {
+    interface Window {
+        lastScrollYPosition: number;
+    }
+}
+
+/**
+ * This is the main entry point for the SDK VTL.
+ * This is added to VTL Script in the EditPage
+ *
+ * @remarks
+ * This module sets up the necessary listeners and functionality for the SDK VTL.
+ * It checks if the script is running inside the editor and then initializes the client by pinging the editor,
+ * listening for editor messages, hovered contentlet changes, and content changes.
+ *
+ */
+if (isInsideEditor()) {
+    listenEditorMessages();
+    scrollHandler();
+    preserveScrollOnIframe();
+    listenHoveredContentlet();
+    addClassToEmptyContentlets();
+}

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

@@ -0,0 +1,116 @@
+import {
+    listenEditorMessages,
+    listenHoveredContentlet,
+    fetchPageDataFromInsideUVE,
+    scrollHandler
+} from './listeners/listeners';
+import { postMessageToEditor, CUSTOMER_ACTIONS } from './models/client.model';
+import {
+    addClassToEmptyContentlets,
+    initEditor,
+    isInsideEditor,
+    updateNavigation
+} from './sdk-editor';
+
+jest.mock('./models/client.model', () => ({
+    postMessageToEditor: jest.fn(),
+    CUSTOMER_ACTIONS: {
+        NAVIGATION_UPDATE: 'set-url',
+        SET_BOUNDS: 'set-bounds',
+        SET_CONTENTLET: 'set-contentlet',
+        IFRAME_SCROLL: 'scroll',
+        PING_EDITOR: 'ping-editor',
+        CONTENT_CHANGE: 'content-change',
+        NOOP: 'noop'
+    }
+}));
+
+jest.mock('./listeners/listeners', () => ({
+    pingEditor: jest.fn(),
+    listenEditorMessages: jest.fn(),
+    listenHoveredContentlet: jest.fn(),
+    scrollHandler: jest.fn(),
+    listenContentChange: jest.fn(),
+    fetchPageDataFromInsideUVE: jest.fn()
+}));
+
+describe('DotCMSPageEditor', () => {
+    describe('is NOT inside editor', () => {
+        beforeEach(() => {
+            const mockWindow = {
+                ...window,
+                parent: window
+            };
+
+            const spy = jest.spyOn(global, 'window', 'get');
+            spy.mockReturnValueOnce(mockWindow as unknown as Window & typeof globalThis);
+        });
+
+        afterEach(() => {
+            jest.clearAllMocks();
+        });
+
+        it('should initialize without any listener', () => {
+            const addEventListenerSpy = jest.spyOn(window, 'addEventListener');
+
+            expect(isInsideEditor()).toBe(false);
+            expect(addEventListenerSpy).not.toHaveBeenCalled();
+        });
+    });
+
+    describe('is inside editor', () => {
+        beforeEach(() => {
+            const mockWindow = {
+                ...window,
+                parent: null
+            };
+
+            const spy = jest.spyOn(global, 'window', 'get');
+            spy.mockReturnValue(mockWindow as unknown as Window & typeof globalThis);
+        });
+
+        afterEach(() => {
+            jest.clearAllMocks();
+        });
+
+        it('should initialize properly', () => {
+            expect(isInsideEditor()).toBe(true);
+        });
+
+        it('should update navigation', () => {
+            updateNavigation('/');
+            expect(postMessageToEditor).toHaveBeenCalledWith({
+                action: CUSTOMER_ACTIONS.NAVIGATION_UPDATE,
+                payload: {
+                    url: 'index'
+                }
+            });
+        });
+
+        it('should init editor calling listeners', () => {
+            initEditor({ pathname: 'some-url' });
+            expect(fetchPageDataFromInsideUVE).toHaveBeenCalledWith('some-url');
+            expect(listenEditorMessages).toHaveBeenCalled();
+            expect(listenHoveredContentlet).toHaveBeenCalled();
+            expect(scrollHandler).toHaveBeenCalled();
+        });
+    });
+
+    describe('Add Class to Empty Contentets', () => {
+        it('should add class to empty contentlets', () => {
+            const contentlet = document.createElement('div');
+            contentlet.setAttribute('data-dot-object', 'contentlet');
+            Object.defineProperty(contentlet, 'clientHeight', { value: 100 }); // Emulate a contentlet with height in the DOM
+            document.body.appendChild(contentlet);
+
+            const emptyContentlet = document.createElement('div');
+            emptyContentlet.setAttribute('data-dot-object', 'contentlet');
+            document.body.appendChild(emptyContentlet);
+
+            addClassToEmptyContentlets();
+
+            expect(emptyContentlet.classList.contains('empty-contentlet')).toBe(true);
+            expect(contentlet.classList.contains('empty-contentlet')).toBe(false);
+        });
+    });
+});

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

@@ -0,0 +1,105 @@
+import {
+    fetchPageDataFromInsideUVE,
+    listenEditorMessages,
+    listenHoveredContentlet,
+    scrollHandler,
+    subscriptions
+} from './listeners/listeners';
+import { CUSTOMER_ACTIONS, postMessageToEditor } from './models/client.model';
+import { DotCMSPageEditorConfig } from './models/editor.model';
+
+/**
+ * Updates the navigation in the editor.
+ *
+ * @param {string} pathname - The pathname to update the navigation with.
+ * @memberof DotCMSPageEditor
+ * @example
+ * updateNavigation('/home'); // Sends a message to the editor to update the navigation to '/home'
+ */
+export function updateNavigation(pathname: string): void {
+    postMessageToEditor({
+        action: CUSTOMER_ACTIONS.NAVIGATION_UPDATE,
+        payload: {
+            url: pathname === '/' ? 'index' : pathname?.replace('/', '')
+        }
+    });
+}
+
+/**
+ * Checks if the code is running inside an editor.
+ *
+ * @returns {boolean} Returns true if the code is running inside an editor, otherwise false.
+ * @example
+ * ```ts
+ * if (isInsideEditor()) {
+ *     console.log('Running inside the editor');
+ * } else {
+ *     console.log('Running outside the editor');
+ * }
+ * ```
+ */
+export function isInsideEditor(): boolean {
+    if (typeof window === 'undefined') {
+        return false;
+    }
+
+    return window.parent !== window;
+}
+
+/**
+ * Initializes the DotCMS page editor.
+ *
+ * @param {DotCMSPageEditorConfig} config - Optional configuration for the editor.
+ * @example
+ * ```ts
+ * const config = { pathname: '/home' };
+ * initEditor(config); // Initializes the editor with the provided configuration
+ * ```
+ */
+export function initEditor(config: DotCMSPageEditorConfig): void {
+    fetchPageDataFromInsideUVE(config.pathname);
+    listenEditorMessages();
+    listenHoveredContentlet();
+    scrollHandler();
+}
+
+/**
+ * Destroys the editor by removing event listeners and disconnecting observers.
+ *
+ * @example
+ * ```ts
+ * destroyEditor(); // Cleans up the editor by removing all event listeners and disconnecting observers
+ * ```
+ */
+export function destroyEditor(): void {
+    subscriptions.forEach((subscription) => {
+        if (subscription.type === 'listener') {
+            window.removeEventListener(subscription.event, subscription.callback as EventListener);
+        }
+
+        if (subscription.type === 'observer') {
+            subscription.observer.disconnect();
+        }
+    });
+}
+
+/**
+ * Adds a style class to empty contentlets.
+ *
+ * @export
+ * @example
+ * ```ts
+ * addClassToEmptyContentlets(); // Adds the 'empty-contentlet' class to all contentlets that have no height
+ * ```
+ */
+export function addClassToEmptyContentlets(): void {
+    const contentlets = document.querySelectorAll('[data-dot-object="contentlet"]');
+
+    contentlets.forEach((contentlet) => {
+        if (contentlet.clientHeight) {
+            return;
+        }
+
+        contentlet.classList.add('empty-contentlet');
+    });
+}

package/src/lib/editor/utils/editor.utils.spec.ts

@@ -0,0 +1,206 @@
+import { getContentletsBound, scrollIsInBottom } from './editor.utils';
+
+describe('getContentletsBound', () => {
+    const createContentlet = ({
+        x,
+        y,
+        width,
+        height,
+        dataset
+    }: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+        dataset: { [key: string]: string };
+    }): HTMLDivElement => {
+        const contentlet = document.createElement('div');
+        const mockGetBoundingClientRect = jest.fn(() => ({
+            x,
+            y,
+            width,
+            height
+        })) as unknown as () => DOMRect;
+        contentlet.getBoundingClientRect = mockGetBoundingClientRect;
+        Object.keys(dataset).forEach((key) => {
+            contentlet.setAttribute(`data-${key}`, dataset[key]);
+        });
+
+        return contentlet;
+    };
+
+    const containerRect = {
+        x: 0,
+        y: 0,
+        width: 100,
+        height: 100,
+        top: 0,
+        right: 100,
+        bottom: 100,
+        left: 0
+    } as DOMRect;
+
+    const contentlets: HTMLDivElement[] = [
+        createContentlet({
+            x: 10,
+            y: 20,
+            width: 30,
+            height: 40,
+            dataset: {
+                'dot-container': JSON.stringify({ uuid: 'container1' }),
+                'dot-identifier': 'contentlet1',
+                'dot-title': 'Contentlet 1',
+                'dot-inode': 'inode1',
+                'dot-type': 'type1'
+            }
+        }),
+        createContentlet({
+            x: 50,
+            y: 60,
+            width: 70,
+            height: 80,
+            dataset: {
+                'dot-container': JSON.stringify({ uuid: 'container1' }),
+                'dot-identifier': 'contentlet2',
+                'dot-title': 'Contentlet 2',
+                'dot-inode': 'inode2',
+                'dot-type': 'type2'
+            }
+        })
+    ];
+
+    it('should return an array of contentlets bound from contentlet with data atrribute dotContainer ', () => {
+        const result = getContentletsBound(containerRect, contentlets);
+
+        expect(result).toEqual([
+            {
+                x: 0,
+                y: 20,
+                width: 30,
+                height: 40,
+                payload: JSON.stringify({
+                    container: { uuid: 'container1' },
+                    contentlet: {
+                        identifier: 'contentlet1',
+                        title: 'Contentlet 1',
+                        inode: 'inode1',
+                        contentType: 'type1'
+                    }
+                })
+            },
+            {
+                x: 0,
+                y: 60,
+                width: 70,
+                height: 80,
+                payload: JSON.stringify({
+                    container: { uuid: 'container1' },
+                    contentlet: {
+                        identifier: 'contentlet2',
+                        title: 'Contentlet 2',
+                        inode: 'inode2',
+                        contentType: 'type2'
+                    }
+                })
+            }
+        ]);
+    });
+
+    it('should return an empty array if contentlets is empty', () => {
+        const result = getContentletsBound(containerRect, []);
+
+        expect(result).toEqual([]);
+    });
+
+    it('should return an array of contentlets with correct properties when dotContainer is not present in dataset', () => {
+        const contentletsWithMissingContainer: HTMLDivElement[] = [
+            createContentlet({
+                x: 10,
+                y: 20,
+                width: 30,
+                height: 40,
+                dataset: {
+                    'dot-identifier': 'contentlet1',
+                    'dot-title': 'Contentlet 1',
+                    'dot-inode': 'inode1',
+                    'dot-type': 'type1'
+                }
+            })
+        ];
+
+        const container = document.createElement('div');
+
+        container.appendChild(contentletsWithMissingContainer[0]);
+        container.setAttribute('data-dot-object', 'container');
+        container.setAttribute('data-dot-accept-types', '[Blogs]');
+        container.setAttribute('data-dot-identifier', '1');
+        container.setAttribute('data-max-contentlets', '1');
+        container.setAttribute('data-dot-uuid', '1');
+        const result = getContentletsBound(containerRect, contentletsWithMissingContainer);
+
+        expect(result).toEqual([
+            {
+                x: 0,
+                y: 20,
+                width: 30,
+                height: 40,
+                payload: JSON.stringify({
+                    container: {
+                        acceptTypes: '[Blogs]',
+                        identifier: '1',
+                        maxContentlets: '1',
+                        uuid: '1'
+                    },
+                    contentlet: {
+                        identifier: 'contentlet1',
+                        title: 'Contentlet 1',
+                        inode: 'inode1',
+                        contentType: 'type1'
+                    }
+                })
+            }
+        ]);
+    });
+});
+
+describe('scrollIsInBottom', () => {
+    it('should return true when scroll position + viewport height equals document height', () => {
+        Object.defineProperty(window, 'innerHeight', {
+            writable: true,
+            configurable: true,
+            value: 500
+        });
+        Object.defineProperty(window, 'scrollY', {
+            writable: true,
+            configurable: true,
+            value: 500
+        });
+        Object.defineProperty(document.documentElement, 'scrollHeight', {
+            writable: true,
+            configurable: true,
+            value: 1000
+        });
+
+        expect(scrollIsInBottom()).toBe(true);
+    });
+
+    it('should return false when scroll position + viewport height is less than document height', () => {
+        Object.defineProperty(window, 'innerHeight', {
+            writable: true,
+            configurable: true,
+            value: 500
+        });
+        Object.defineProperty(window, 'scrollY', {
+            writable: true,
+            configurable: true,
+            value: 400
+        });
+        Object.defineProperty(document.documentElement, 'scrollHeight', {
+            writable: true,
+            configurable: true,
+            value: 1000
+        });
+
+        expect(scrollIsInBottom()).toBe(false);
+    });
+});