@dotcms/client 0.0.1-alpha.9 → 0.0.1-beta.2

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

@@ -1,200 +0,0 @@
-import { CUSTOMER_ACTIONS, postMessageToEditor } from '../models/client.model';
-import { DotCMSPageEditorConfig } from '../models/editor.model';
-import { DotCMSPageEditorSubscription, NOTIFY_CUSTOMER } from '../models/listeners.model';
-import {
-    findContentletElement,
-    getClosestContainerData,
-    getPageElementBound
-} from '../utils/editor.utils';
-
-/**
- * Default reload function that reloads the current window.
- */
-const defaultReloadFn = () => window.location.reload();
-
-/**
- * Configuration object for the DotCMSPageEditor.
- */
-let pageEditorConfig: DotCMSPageEditorConfig = {
-    onReload: defaultReloadFn
-};
-
-export function setPageEditorConfig(config: DotCMSPageEditorConfig) {
-    pageEditorConfig = config;
-}
-
-/**
- * Represents an array of DotCMSPageEditorSubscription objects.
- * Used to store the subscriptions for the editor and unsubscribe later.
- */
-export const subscriptions: DotCMSPageEditorSubscription[] = [];
-
-/**
- * Sets the bounds of the containers in the editor.
- * Retrieves the containers from the DOM and sends their position data to the editor.
- * @private
- * @memberof DotCMSPageEditor
- */
-function setBounds() {
-    const containers = Array.from(
-        document.querySelectorAll('[data-dot-object="container"]')
-    ) as HTMLDivElement[];
-    const positionData = getPageElementBound(containers);
-
-    postMessageToEditor({
-        action: CUSTOMER_ACTIONS.SET_BOUNDS,
-        payload: positionData
-    });
-}
-
-/**
- * Reloads the page and triggers the onReload callback if it exists in the config object.
- */
-function reloadPage() {
-    pageEditorConfig?.onReload();
-}
-
-/**
- * Listens for editor messages and performs corresponding actions based on the received message.
- *
- * @private
- * @memberof DotCMSPageEditor
- */
-export function listenEditorMessages() {
-    const messageCallback = (event: MessageEvent) => {
-        switch (event.data) {
-            case NOTIFY_CUSTOMER.EMA_REQUEST_BOUNDS: {
-                setBounds();
-                break;
-            }
-
-            case NOTIFY_CUSTOMER.EMA_RELOAD_PAGE: {
-                reloadPage();
-                break;
-            }
-        }
-    };
-
-    window.addEventListener('message', messageCallback);
-
-    subscriptions.push({
-        type: 'listener',
-        event: 'message',
-        callback: messageCallback
-    });
-}
-
-/**
- * Listens for pointer move events and extracts information about the hovered contentlet.
- *
- * @private
- * @memberof DotCMSPageEditor
- */
-export function listenHoveredContentlet() {
-    const pointerMoveCallback = (event: PointerEvent) => {
-        const target = findContentletElement(event.target as HTMLElement);
-        if (!target) return;
-        const { x, y, width, height } = target.getBoundingClientRect();
-
-        const contentletPayload = {
-            container:
-                // Here extract dot-container from contentlet if is Headless
-                // or search in parent container if is VTL
-                target.dataset?.['dotContainer']
-                    ? JSON.parse(target.dataset?.['dotContainer'])
-                    : getClosestContainerData(target),
-            contentlet: {
-                identifier: target.dataset?.['dotIdentifier'],
-                title: target.dataset?.['dotTitle'],
-                inode: target.dataset?.['dotInode'],
-                contentType: target.dataset?.['dotType']
-            }
-        };
-
-        postMessageToEditor({
-            action: CUSTOMER_ACTIONS.SET_CONTENTLET,
-            payload: {
-                x,
-                y,
-                width,
-                height,
-                payload: contentletPayload
-            }
-        });
-    };
-
-    document.addEventListener('pointermove', pointerMoveCallback);
-
-    subscriptions.push({
-        type: 'listener',
-        event: 'pointermove',
-        callback: pointerMoveCallback
-    });
-}
-
-/**
- * Attaches a scroll event listener to the window
- * and sends a message to the editor when the window is scrolled.
- *
- * @private
- * @memberof DotCMSPageEditor
- */
-export function scrollHandler() {
-    const scrollCallback = () => {
-        postMessageToEditor({
-            action: CUSTOMER_ACTIONS.IFRAME_SCROLL
-        });
-    };
-
-    window.addEventListener('scroll', scrollCallback);
-
-    subscriptions.push({
-        type: 'listener',
-        event: 'scroll',
-        callback: scrollCallback
-    });
-}
-
-/**
- * Listens for changes in the content and triggers a customer action when the content changes.
- *
- * @private
- * @memberof DotCMSPageEditor
- */
-export function listenContentChange() {
-    const observer = new MutationObserver((mutationsList) => {
-        for (const { addedNodes, removedNodes, type } of mutationsList) {
-            if (type === 'childList') {
-                const didNodesChanged = [
-                    ...Array.from(addedNodes),
-                    ...Array.from(removedNodes)
-                ].filter(
-                    (node) => (node as HTMLDivElement).dataset?.['dotObject'] === 'contentlet'
-                ).length;
-
-                if (didNodesChanged) {
-                    postMessageToEditor({
-                        action: CUSTOMER_ACTIONS.CONTENT_CHANGE
-                    });
-                }
-            }
-        }
-    });
-
-    observer.observe(document, { childList: true, subtree: true });
-
-    subscriptions.push({
-        type: 'observer',
-        observer
-    });
-}
-
-/**
- * Sends a ping message to the editor.
- *
- */
-export function pingEditor() {
-    postMessageToEditor({
-        action: CUSTOMER_ACTIONS.PING_EDITOR
-    });
-}

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

@@ -1,55 +0,0 @@
-/**
- * Actions send to the dotcms editor
- *
- * @export
- * @enum {number}
- */
-export enum CUSTOMER_ACTIONS {
-    /**
-     * 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',
-    /**
-     * Ping the editor to see if the page is inside the editor
-     */
-    PING_EDITOR = 'ping-editor',
-
-    CONTENT_CHANGE = 'content-change',
-
-    NOOP = 'noop'
-}
-
-/**
- * Post message props
- *
- * @export
- * @template T
- * @interface PostMessageProps
- */
-type PostMessageProps<T> = {
-    action: CUSTOMER_ACTIONS;
-    payload?: T;
-};
-
-/**
- * Post message to dotcms page editor
- *
- * @export
- * @template T
- * @param {PostMessageProps<T>} message
- */
-export function postMessageToEditor<T = unknown>(message: PostMessageProps<T>) {
-    window.parent.postMessage(message, '*');
-}

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

@@ -1,17 +0,0 @@
-/**
- *
- * Represents the configuration options for the DotCMS page editor.
- * @export
- * @interface DotCMSPageEditorConfig
- */
-export interface DotCMSPageEditorConfig {
-    /**
-     * A callback function that will be called when the page editor needs to be reloaded.
-     */
-    onReload: () => void;
-
-    /**
-     * The pathname of the page being edited. Optional.
-     */
-    pathname?: string;
-}

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

@@ -1,24 +0,0 @@
-import {
-    listenContentChange,
-    listenEditorMessages,
-    listenHoveredContentlet,
-    pingEditor
-} from './listeners/listeners';
-import { isInsideEditor } from './sdk-editor';
-
-/**
- * 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()) {
-    pingEditor();
-    listenEditorMessages();
-    listenHoveredContentlet();
-    listenContentChange();
-}

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

@@ -1,95 +0,0 @@
-import {
-    listenContentChange,
-    listenEditorMessages,
-    listenHoveredContentlet,
-    pingEditor,
-    scrollHandler
-} from './listeners/listeners';
-import { postMessageToEditor, CUSTOMER_ACTIONS } from './models/client.model';
-import { 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()
-}));
-
-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', () => {
-            listenContentChange();
-            updateNavigation('/');
-            expect(postMessageToEditor).toHaveBeenCalledWith({
-                action: CUSTOMER_ACTIONS.NAVIGATION_UPDATE,
-                payload: {
-                    url: 'index'
-                }
-            });
-        });
-
-        it('should init editor calling listeners', () => {
-            initEditor();
-            expect(pingEditor).toHaveBeenCalled();
-            expect(listenEditorMessages).toHaveBeenCalled();
-            expect(listenHoveredContentlet).toHaveBeenCalled();
-            expect(scrollHandler).toHaveBeenCalled();
-            expect(listenContentChange).toHaveBeenCalled();
-        });
-    });
-});

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

@@ -1,70 +0,0 @@
-import {
-    listenContentChange,
-    listenEditorMessages,
-    listenHoveredContentlet,
-    pingEditor,
-    scrollHandler,
-    subscriptions,
-    setPageEditorConfig
-} 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
- */
-export function updateNavigation(pathname: string) {
-    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.
- */
-export function isInsideEditor() {
-    if (window.parent === window) {
-        return false;
-    }
-
-    return true;
-}
-
-/**
- * Initializes the DotCMS page editor.
- *
- * @param conf - Optional configuration for the editor.
- */
-export function initEditor(config?: DotCMSPageEditorConfig) {
-    if (config) {
-        setPageEditorConfig(config);
-    }
-
-    pingEditor();
-    listenEditorMessages();
-    listenHoveredContentlet();
-    scrollHandler();
-    listenContentChange();
-}
-
-/**
- * Destroys the editor by removing event listeners and disconnecting observers.
- */
-export function destroyEditor() {
-    subscriptions.forEach((subscription) => {
-        if (subscription.type === 'listener') {
-            window.removeEventListener(subscription.event, subscription.callback as EventListener);
-        }
-
-        if (subscription.type === 'observer') {
-            subscription.observer.disconnect();
-        }
-    });
-}

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

@@ -1,164 +0,0 @@
-import { getContentletsBound } 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'
-                    }
-                })
-            }
-        ]);
-    });
-});