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

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

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

@@ -0,0 +1,258 @@
+/**
+ * Bound information for a contentlet.
+ *
+ * @interface ContentletBound
+ * @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.
+ */
+interface ContentletBound {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    payload: string;
+}
+
+/**
+ * Bound information for a container.
+ *
+ * @interface ContainerBound
+ * @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 {ContentletBound[]} contentlets - An array of contentlets within the container.
+ */
+interface ContainerBound {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    payload: string;
+    contentlets: ContentletBound[];
+}
+
+/**
+ * Calculates the bounding information for each page element within the given containers.
+ *
+ * @export
+ * @param {HTMLDivElement[]} containers - An array of HTMLDivElement representing the containers.
+ * @return {ContainerBound[]} An array of objects containing the bounding information for each page element.
+ * @example
+ * ```ts
+ * const containers = document.querySelectorAll('.container');
+ * const bounds = getPageElementBound(containers);
+ * console.log(bounds);
+ * ```
+ */
+export function getPageElementBound(containers: HTMLDivElement[]): ContainerBound[] {
+    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: JSON.stringify({
+                container: getContainerData(container)
+            }),
+            contentlets: getContentletsBound(containerRect, contentlets)
+        };
+    });
+}
+
+/**
+ * Calculates the bounding information for each contentlet inside a container.
+ *
+ * @export
+ * @param {DOMRect} containerRect - The bounding rectangle of the container.
+ * @param {HTMLDivElement[]} contentlets - An array of HTMLDivElement representing the contentlets.
+ * @return {ContentletBound[]} An array of objects containing the bounding information for each contentlet.
+ * @example
+ * ```ts
+ * const containerRect = container.getBoundingClientRect();
+ * const contentlets = container.querySelectorAll('.contentlet');
+ * const bounds = getContentletsBound(containerRect, contentlets);
+ * console.log(bounds); // Element bounds within the container
+ * ```
+ */
+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 - The container element.
+ * @return {object} An object containing the container data.
+ * @example
+ * ```ts
+ * const container = document.querySelector('.container');
+ * const data = getContainerData(container);
+ * console.log(data);
+ * ```
+ */
+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 - The contentlet element.
+ * @return {object | null} An object containing the closest container data or null if no container is found.
+ * @example
+ * ```ts
+ * const contentlet = document.querySelector('.contentlet');
+ * const data = getClosestContainerData(contentlet);
+ * console.log(data);
+ * ```
+ */
+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 - The starting element.
+ * @return {HTMLElement | null} The closest contentlet element or null if not found.
+ * @example
+ * const element = document.querySelector('.some-element');
+ * const contentlet = findDotElement(element);
+ * console.log(contentlet);
+ */
+export function findDotElement(element: HTMLElement | null): HTMLElement | null {
+    if (!element) return null;
+
+    if (
+        element?.dataset?.['dotObject'] === 'contentlet' ||
+        (element?.dataset?.['dotObject'] === 'container' && element.children.length === 0)
+    ) {
+        return element;
+    }
+
+    return findDotElement(element?.['parentElement']);
+}
+
+/**
+ * Find the closest VTL file element based on HTMLElement.
+ *
+ * @export
+ * @param {HTMLElement | null} element - The starting element.
+ * @return {HTMLElement | null} The closest VTL file element or null if not found.
+ * @example
+ * const element = document.querySelector('.some-element');
+ * const vtlFile = findDotVTLElement(element);
+ * console.log(vtlFile);
+ */
+export function findDotVTLElement(element: HTMLElement | null): HTMLElement | null {
+    if (!element) return null;
+
+    if (element.dataset && element.dataset?.['dotObject'] === 'vtl-file') {
+        return element;
+    } else {
+        return findDotElement(element?.['parentElement']);
+    }
+}
+
+/**
+ * Find VTL data within a target element.
+ *
+ * @export
+ * @param {HTMLElement} target - The target element to search within.
+ * @return {Array<{ inode: string, name: string }> | null} An array of objects containing VTL data or null if none found.
+ * @example
+ * ```ts
+ * const target = document.querySelector('.target-element');
+ * const vtlData = findVTLData(target);
+ * console.log(vtlData);
+ * ```
+ */
+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']
+        };
+    });
+}
+
+/**
+ * Check if the scroll position is at the bottom of the page.
+ *
+ * @export
+ * @return {boolean} True if the scroll position is at the bottom, otherwise false.
+ * @example
+ * ```ts
+ * if (scrollIsInBottom()) {
+ *     console.log('Scrolled to the bottom');
+ * }
+ * ```
+ */
+export function scrollIsInBottom() {
+    const documentHeight = document.documentElement.scrollHeight;
+    const viewportHeight = window.innerHeight;
+    const scrollY = window.scrollY;
+
+    return scrollY + viewportHeight >= documentHeight;
+}

package/src/lib/query-builder/lucene-syntax/{Equals.d.ts → Equals.ts}

@@ -1,6 +1,17 @@
 import { Field } from './Field';
 import { NotOperand } from './NotOperand';
 import { Operand } from './Operand';
+
+import {
+    OPERAND,
+    buildExcludeField,
+    buildField,
+    buildNotOperand,
+    buildOperand,
+    buildRawEquals,
+    sanitizeQuery
+} from '../utils';
+
 /**
  * 'Equal' Is a Typescript class that provides the ability to use terms in the lucene query string.
  * A term is a value used to search for a specific value in a document. It can be a word or a phrase.
@@ -10,74 +21,128 @@ import { Operand } from './Operand';
  * @export
  * @class Equal
  */
-export declare class Equals {
-    #private;
-    private query;
-    constructor(query: string);
+export class Equals {
+    #query = '';
+
+    constructor(private query: string) {
+        this.#query = this.query;
+    }
+
     /**
      * This method appends to the query a term that should be excluded in the search.
      *
-     * Ex: "-myValue"
+     * @example
+     * ```ts
+     * const equals = new Equals("+myField: myValue");
+     * equals.excludeField("myField2").equals("myValue2"); // Current query: "+myField: myValue -myField2: myValue2"
+     * ```
      *
      * @param {string} field - The field that should be excluded in the search.
      * @return {*}  {Field} - An instance of a Lucene Field. A field is a key used to search for a specific value in a document.
      * @memberof Equal
      */
-    excludeField(field: string): Field;
+    excludeField(field: string): Field {
+        return buildExcludeField(this.#query, field);
+    }
+
     /**
      * This method appends to the query a field that should be included in the search.
      *
-     * Ex: "+myField:"
-     *
+     * @example
+     * ```ts
+     * const equals = new Equals("+myField: myValue");
+     * equals.field("myField2").equals("myValue2");  // Current query: "+myField: myValue +myField2: myValue2"
+     *```
      * @param {string} field - The field that should be included in the search.
      * @return {*}  {Field} - An instance of a Lucene Field. A field is a key used to search for a specific value in a document.
      * @memberof Equal
      */
-    field(field: string): Field;
+    field(field: string): Field {
+        return buildField(this.#query, field);
+    }
+
     /**
      * This method appends to the query an operand to use logic operators in the query.
      *
-     * Ex: "OR"
+     * @example
+     * @example
+     * ```ts
+     * const equals = new Equals("+myField: myValue");
+     * equals.or().field("myField2").equals("myValue2"); // Current query: "+myField: myValue OR +myField2: myValue2"
+     * ```
      *
      * @return {*}  {Operand} - An instance of a Lucene Operand. An operand is a logical operator used to combine terms or phrases in a query.
      * @memberof Equal
      */
-    or(): Operand;
+    or(): Operand {
+        return buildOperand(this.#query, OPERAND.OR);
+    }
+
     /**
      * This method appends to the query an operand to use logic operators in the query.
      *
-     * Ex: "AND"
+     * @example
+     * ```ts
+     * const equals = new Equals("+myField: myValue");
+     * equals.and().field("myField2").equals("myValue2"); // Current query: "+myField: myValue AND +myField2: myValue2"
+     * ```
      *
      * @return {*}  {Operand} - An instance of a Lucene Operand. An operand is a logical operator used to combine terms or phrases in a query.
      * @memberof Equal
      */
-    and(): Operand;
+    and(): Operand {
+        return buildOperand(this.#query, OPERAND.AND);
+    }
+
     /**
      * This method appends to the query an operand to use logic operators in the query.
      *
-     * Ex: "NOT"
+     * @example
+     * ```ts
+     * const equals = new Equals("+myField: myValue");
+     * equals.not().field("myField").equals("myValue2"); // Current query: "+myField: myValue NOT +myField: myValue2"
+     * ```
      *
      * @return {*}  {NotOperand} - An instance of a Lucene Not Operand. A not operand is a logical operator used to exclude terms or phrases in a query.
      * @memberof Equal
      */
-    not(): NotOperand;
+    not(): NotOperand {
+        return buildNotOperand(this.#query);
+    }
+
     /**
      * This method allows to pass a raw query string to the query builder.
      * This raw query should end in a Lucene Equal.
      * This method is useful when you want to append a complex query or an already written query to the query builder.
      *
-     * Ex: "+myField: value AND (someOtherValue OR anotherValue)"
+     * @example
+     * ```ts
+     * // This builds the follow raw query "+myField: value AND (someOtherValue OR anotherValue)"
+     * const equals = new Equals("+myField: value");
+     * equals.raw("+myField2: value2"); // Current query: "+myField: value +myField2: anotherValue"
+     * ```
      *
      * @param {string} query - A raw query string.
      * @return {*}  {Equal} - An instance of a Lucene Equal. A term is a value used to search for a specific value in a document.
      * @memberof QueryBuilder
      */
-    raw(query: string): Equals;
+    raw(query: string): Equals {
+        return buildRawEquals(this.#query, query);
+    }
+
     /**
      * This method returns the final query string.
      *
+     * @example
+     * ```ts
+     * const equals = new Equals("+myField: myValue");
+     * equals.field("myField2").equals("myValue2").build(); // Returns "+myField: myValue +myField2: myValue2"
+     * ```
+     *
      * @return {*}  {string} - The final query string.
      * @memberof Equal
      */
-    build(): string;
+    build(): string {
+        return sanitizeQuery(this.#query);
+    }
 }

package/src/lib/query-builder/lucene-syntax/Field.ts

@@ -0,0 +1,40 @@
+import { Equals } from './Equals';
+
+import { buildEquals } from '../utils';
+
+/**
+ * The `Field` class is used to build a query with a specific field.
+ * A Lucene Field is a key used to search for a specific value in a document.
+ *
+ * @export
+ * @class Field
+ */
+export class Field {
+    #query = '';
+
+    /**
+     * Creates an instance of the `Field` class.
+     *
+     * @param {string} query - The initial query string.
+     */
+    constructor(private query: string) {
+        this.#query = this.query;
+    }
+
+    /**
+     * Appends a term to the query that should be included in the search.
+     *
+     * @example
+     * ```typescript
+     * const field = new Field("+myField");
+     * field.equals("myValue");
+     * ```
+     *
+     * @param {string} term - The term that should be included in the search.
+     * @return {Equals} - An instance of `Equals`.
+     * @memberof Field
+     */
+    equals(term: string): Equals {
+        return buildEquals(this.#query, term);
+    }
+}