@dotcms/client 0.0.1-alpha.1 → 0.0.1-alpha.11

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

@@ -0,0 +1,92 @@
+import {
+    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', () => {
+            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();
+        });
+    });
+});

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

@@ -0,0 +1,68 @@
+import {
+    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();
+}
+
+/**
+ * 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

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

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

@@ -0,0 +1,178 @@
+/**
+ * Bound information for a contentlet.
+ *
+ * @interface ContentletBound
+ */
+interface ContentletBound {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    payload: string;
+}
+
+/**
+ * Bound information for a container.
+ *
+ * @interface ContenainerBound
+ */
+interface ContenainerBound {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    payload: {
+        container: {
+            acceptTypes: string;
+            identifier: string;
+            maxContentlets: string;
+            uuid: string;
+        };
+    };
+    contentlets: ContentletBound[];
+}
+
+/**
+ * Calculates the bounding information for each page element within the given containers.
+ *
+ * @export
+ * @param {HTMLDivElement[]} containers
+ * @return {*} An array of objects containing the bounding information for each page element.
+ */
+export function getPageElementBound(containers: HTMLDivElement[]): ContenainerBound[] {
+    return containers.map((container) => {
+        const containerRect = container.getBoundingClientRect();
+        const contentlets = Array.from(
+            container.querySelectorAll('[data-dot-object="contentlet"]')
+        ) as HTMLDivElement[];
+
+        return {
+            x: containerRect.x,
+            y: containerRect.y,
+            width: containerRect.width,
+            height: containerRect.height,
+            payload: {
+                container: getContainerData(container)
+            },
+            contentlets: getContentletsBound(containerRect, contentlets)
+        };
+    });
+}
+
+/**
+ * An array of objects containing the bounding information for each contentlet inside a container.
+ *
+ * @export
+ * @param {DOMRect} containerRect
+ * @param {HTMLDivElement[]} contentlets
+ * @return {*}
+ */
+export function getContentletsBound(
+    containerRect: DOMRect,
+    contentlets: HTMLDivElement[]
+): ContentletBound[] {
+    return contentlets.map((contentlet) => {
+        const contentletRect = contentlet.getBoundingClientRect();
+
+        return {
+            x: 0,
+            y: contentletRect.y - containerRect.y,
+            width: contentletRect.width,
+            height: contentletRect.height,
+            payload: JSON.stringify({
+                container: contentlet.dataset?.['dotContainer']
+                    ? JSON.parse(contentlet.dataset?.['dotContainer'])
+                    : getClosestContainerData(contentlet),
+                contentlet: {
+                    identifier: contentlet.dataset?.['dotIdentifier'],
+                    title: contentlet.dataset?.['dotTitle'],
+                    inode: contentlet.dataset?.['dotInode'],
+                    contentType: contentlet.dataset?.['dotType']
+                }
+            })
+        };
+    });
+}
+
+/**
+ * Get container data from VTLS.
+ *
+ * @export
+ * @param {HTMLElement} container
+ * @return {*}
+ */
+export function getContainerData(container: HTMLElement) {
+    return {
+        acceptTypes: container.dataset?.['dotAcceptTypes'] || '',
+        identifier: container.dataset?.['dotIdentifier'] || '',
+        maxContentlets: container.dataset?.['maxContentlets'] || '',
+        uuid: container.dataset?.['dotUuid'] || ''
+    };
+}
+
+/**
+ * Get the closest container data from the contentlet.
+ *
+ * @export
+ * @param {Element} element
+ * @return {*}
+ */
+export function getClosestContainerData(element: Element) {
+    // Find the closest ancestor element with data-dot-object="container" attribute
+    const container = element.closest('[data-dot-object="container"]') as HTMLElement;
+
+    // If a container element is found
+    if (container) {
+        // Return the dataset of the container element
+        return getContainerData(container);
+    } else {
+        // If no container element is found, return null
+        console.warn('No container found for the contentlet');
+
+        return null;
+    }
+}
+
+/**
+ * Find the closest contentlet element based on HTMLElement.
+ *
+ * @export
+ * @param {(HTMLElement | null)} element
+ * @return {*}
+ */
+export function findContentletElement(element: HTMLElement | null): HTMLElement | null {
+    if (!element) return null;
+
+    if (element.dataset && element.dataset?.['dotObject'] === 'contentlet') {
+        return element;
+    } else {
+        return findContentletElement(element?.['parentElement']);
+    }
+}
+
+export function findVTLElement(element: HTMLElement | null): HTMLElement | null {
+    if (!element) return null;
+
+    if (element.dataset && element.dataset?.['dotObject'] === 'vtl-file') {
+        return element;
+    } else {
+        return findContentletElement(element?.['parentElement']);
+    }
+}
+
+export function findVTLData(target: HTMLElement) {
+    const vltElements = target.querySelectorAll(
+        '[data-dot-object="vtl-file"]'
+    ) as NodeListOf<HTMLElement>;
+
+    if (!vltElements.length) {
+        return null;
+    }
+
+    return Array.from(vltElements).map((vltElement) => {
+        return {
+            inode: vltElement.dataset?.['dotInode'],
+            name: vltElement.dataset?.['dotUrl']
+        };
+    });
+}

package/tsconfig.json

@@ -0,0 +1,22 @@
+{
+    "extends": "../../../tsconfig.base.json",
+    "compilerOptions": {
+        "module": "ESNext",
+        "forceConsistentCasingInFileNames": true,
+        "strict": true,
+        "noImplicitOverride": true,
+        "noPropertyAccessFromIndexSignature": true,
+        "noImplicitReturns": true,
+        "noFallthroughCasesInSwitch": true
+    },
+    "files": [],
+    "include": [],
+    "references": [
+        {
+            "path": "./tsconfig.lib.json"
+        },
+        {
+            "path": "./tsconfig.spec.json"
+        }
+    ]
+}

package/tsconfig.lib.json

@@ -0,0 +1,10 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../../../dist/out-tsc",
+        "declaration": true,
+        "types": ["node"]
+    },
+    "include": ["src/**/*.ts"],
+    "exclude": ["jest.config.ts", "src/**/*.spec.ts", "src/**/*.test.ts"]
+}

package/tsconfig.spec.json

@@ -0,0 +1,9 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../../../dist/out-tsc",
+        "module": "commonjs",
+        "types": ["jest", "node"]
+    },
+    "include": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts"]
+}

package/src/index.d.ts

@@ -1,2 +0,0 @@
-export * from './lib/sdk-js-client';
-export * from './lib/postMessageToEditor';

package/src/index.js

@@ -1,3 +0,0 @@
-export * from './lib/sdk-js-client';
-export * from './lib/postMessageToEditor';
-//# sourceMappingURL=index.js.map

package/src/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../libs/sdk/client/src/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC"}

package/src/lib/postMessageToEditor.js

@@ -1,37 +0,0 @@
-/**
- * Actions send to the dotcms editor
- *
- * @export
- * @enum {number}
- */
-export var CUSTOMER_ACTIONS;
-(function (CUSTOMER_ACTIONS) {
-    /**
-     * Tell the dotcms editor that page change
-     */
-    CUSTOMER_ACTIONS["SET_URL"] = "set-url";
-    /**
-     * Send the element position of the rows, columnsm containers and contentlets
-     */
-    CUSTOMER_ACTIONS["SET_BOUNDS"] = "set-bounds";
-    /**
-     * Send the information of the hovered contentlet
-     */
-    CUSTOMER_ACTIONS["SET_CONTENTLET"] = "set-contentlet";
-    /**
-     * Tell the editor that the page is being scrolled
-     */
-    CUSTOMER_ACTIONS["IFRAME_SCROLL"] = "scroll";
-    CUSTOMER_ACTIONS["NOOP"] = "noop";
-})(CUSTOMER_ACTIONS || (CUSTOMER_ACTIONS = {}));
-/**
- * Post message to dotcms page editor
- *
- * @export
- * @template T
- * @param {PostMessageProps<T>} message
- */
-export function postMessageToEditor(message) {
-    window.parent.postMessage(message, '*');
-}
-//# sourceMappingURL=postMessageToEditor.js.map

package/src/lib/postMessageToEditor.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"postMessageToEditor.js","sourceRoot":"","sources":["../../../../../../libs/sdk/client/src/lib/postMessageToEditor.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,CAAN,IAAY,gBAkBX;AAlBD,WAAY,gBAAgB;IACxB;;OAEG;IACH,uCAAmB,CAAA;IACnB;;OAEG;IACH,6CAAyB,CAAA;IACzB;;OAEG;IACH,qDAAiC,CAAA;IACjC;;OAEG;IACH,4CAAwB,CAAA;IACxB,iCAAa,CAAA;AACjB,CAAC,EAlBW,gBAAgB,KAAhB,gBAAgB,QAkB3B;AAcD;;;;;;GAMG;AACH,MAAM,UAAU,mBAAmB,CAAc,OAA4B;IACzE,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC;AAC5C,CAAC"}