@dotcms/react 0.0.1-alpha.4 → 0.0.1-alpha.40

package/src/lib/components/DotEditableText/DotEditableText.spec.tsx

@@ -0,0 +1,232 @@
+import { expect } from '@jest/globals';
+import { fireEvent, render, screen } from '@testing-library/react';
+import * as tinymceReact from '@tinymce/tinymce-react';
+
+import * as dotcmsClient from '@dotcms/client';
+
+import { DotEditableText } from './DotEditableText';
+
+import { dotcmsContentletMock } from '../../mocks/mockPageContext';
+
+const { CUSTOMER_ACTIONS, postMessageToEditor } = dotcmsClient;
+
+// Define mockEditor before using it in jest.mock
+const TINYMCE_EDITOR_MOCK = {
+    focus: () => {
+        /* */
+    },
+    getContent: (_data: string) => '',
+    isDirty: () => false,
+    hasFocus: () => false,
+    setContent: () => {
+        /* */
+    }
+};
+
+jest.mock('@tinymce/tinymce-react', () => ({
+    Editor: jest.fn(({ onInit, onMouseDown, onFocusOut }) => {
+        onInit({}, TINYMCE_EDITOR_MOCK);
+
+        return <div data-testid="tinymce-editor" onMouseDown={onMouseDown} onBlur={onFocusOut} />;
+    })
+}));
+
+// Mock @dotcms/client module
+jest.mock('@dotcms/client', () => ({
+    ...jest.requireActual('@dotcms/client'),
+    isInsideEditor: jest.fn().mockImplementation(() => true),
+    postMessageToEditor: jest.fn(),
+    DotCmsClient: {
+        dotcmsUrl: 'http://localhost:8080'
+    }
+}));
+
+const mockedDotcmsClient = dotcmsClient as jest.Mocked<typeof dotcmsClient>;
+const { Editor } = tinymceReact as jest.Mocked<typeof tinymceReact>;
+
+describe('DotEditableText', () => {
+    describe('Outside editor', () => {
+        beforeEach(() => {
+            mockedDotcmsClient.isInsideEditor.mockReturnValue(false);
+            render(<DotEditableText contentlet={dotcmsContentletMock} fieldName="title" />);
+        });
+
+        it('should render the content', () => {
+            const editor = screen.queryByTestId('tinymce-editor');
+            expect(editor).toBeNull();
+            expect(screen.getByText(dotcmsContentletMock['title'])).not.toBeNull();
+        });
+    });
+
+    describe('Inside editor', () => {
+        let rerenderFn: (ui: React.ReactNode) => void;
+
+        beforeEach(() => {
+            mockedDotcmsClient.isInsideEditor.mockReturnValue(true);
+            const { rerender } = render(
+                <DotEditableText contentlet={dotcmsContentletMock} fieldName="title" />
+            );
+            rerenderFn = rerender;
+        });
+
+        it('should pass the correct props to the Editor component', () => {
+            const editor = screen.getByTestId('tinymce-editor');
+            expect(editor).not.toBeNull();
+
+            expect(Editor).toHaveBeenCalledWith(
+                {
+                    tinymceScriptSrc: 'http://localhost:8080/ext/tinymcev7/tinymce.min.js',
+                    inline: true,
+                    init: {
+                        inline: true,
+                        menubar: false,
+                        plugins: '',
+                        powerpaste_html_import: 'clean',
+                        powerpaste_word_import: 'clean',
+                        suffix: '.min',
+                        toolbar: '',
+                        valid_styles: {
+                            '*': 'font-size,font-family,color,text-decoration,text-align'
+                        }
+                    },
+                    initialValue: dotcmsContentletMock.title,
+                    onMouseDown: expect.any(Function),
+                    onFocusOut: expect.any(Function),
+                    onInit: expect.any(Function)
+                },
+                {}
+            );
+        });
+
+        describe('DotEditableText events', () => {
+            let focusSpy: jest.SpyInstance;
+
+            describe('Window Message', () => {
+                beforeEach(() => {
+                    focusSpy = jest.spyOn(TINYMCE_EDITOR_MOCK, 'focus');
+                });
+
+                it("should focus on the editor when the message is 'COPY_CONTENTLET_INLINE_EDITING_SUCCESS'", () => {
+                    window.dispatchEvent(
+                        new MessageEvent('message', {
+                            data: {
+                                name: 'COPY_CONTENTLET_INLINE_EDITING_SUCCESS',
+                                payload: {
+                                    oldInode: dotcmsContentletMock['inode'],
+                                    inode: '456'
+                                }
+                            }
+                        })
+                    );
+                    expect(focusSpy).toHaveBeenCalled();
+                });
+
+                it("should not focus on the editor when the message is not 'COPY_CONTENTLET_INLINE_EDITING_SUCCESS'", () => {
+                    window.dispatchEvent(
+                        new MessageEvent('message', {
+                            data: { name: 'ANOTHER_EVENT' }
+                        })
+                    );
+                    expect(focusSpy).not.toHaveBeenCalled();
+                });
+            });
+
+            describe('mousedown', () => {
+                const event = new MouseEvent('mousedown', {
+                    bubbles: true
+                });
+                const mutiplePagesContentlet = {
+                    ...dotcmsContentletMock,
+                    onNumberOfPages: 2
+                };
+
+                it('should postMessage the UVE if the content is in multiple pages', () => {
+                    rerenderFn(
+                        <DotEditableText contentlet={mutiplePagesContentlet} fieldName="title" />
+                    );
+                    const editorElem = screen.getByTestId('tinymce-editor');
+                    fireEvent(editorElem, event);
+
+                    const payload = {
+                        dataset: {
+                            fieldName: 'title',
+                            inode: mutiplePagesContentlet.inode,
+                            language: mutiplePagesContentlet.languageId
+                        }
+                    };
+                    expect(postMessageToEditor).toHaveBeenCalledWith({
+                        action: CUSTOMER_ACTIONS.COPY_CONTENTLET_INLINE_EDITING,
+                        payload
+                    });
+                });
+
+                it('should not postMessage the UVE if the content is in a single page', () => {
+                    const editorElem = screen.getByTestId('tinymce-editor');
+                    fireEvent(editorElem, event);
+                    expect(postMessageToEditor).not.toHaveBeenCalled();
+                });
+            });
+
+            describe('onFocusOut', () => {
+                let isDirtySpy: jest.SpyInstance;
+                let getContentSpy: jest.SpyInstance;
+
+                const event = new FocusEvent('focusout', {
+                    bubbles: true
+                });
+
+                beforeEach(() => {
+                    isDirtySpy = jest.spyOn(TINYMCE_EDITOR_MOCK, 'isDirty');
+                    getContentSpy = jest.spyOn(TINYMCE_EDITOR_MOCK, 'getContent');
+                });
+
+                it('should not postMessage the UVE if the editor is not dirty', () => {
+                    mockedDotcmsClient.isInsideEditor.mockReturnValue(false);
+                    const editorElem = screen.getByTestId('tinymce-editor');
+                    fireEvent(editorElem, event);
+                    expect(isDirtySpy).toHaveBeenCalled();
+                    expect(getContentSpy).toHaveBeenCalledWith({ format: 'text' });
+                    expect(postMessageToEditor).not.toHaveBeenCalled();
+                });
+
+                it('should not postMessage the UVE if the content did not change', () => {
+                    isDirtySpy.mockReturnValue(true);
+                    getContentSpy.mockReturnValue(dotcmsContentletMock.title);
+
+                    const editorElem = screen.getByTestId('tinymce-editor');
+                    fireEvent(editorElem, event);
+
+                    expect(isDirtySpy).toHaveBeenCalled();
+                    expect(getContentSpy).toHaveBeenCalledWith({ format: 'text' });
+                    expect(postMessageToEditor).not.toHaveBeenCalled();
+                });
+
+                it('should postMessage the UVE if the content changed', () => {
+                    isDirtySpy.mockReturnValue(true);
+                    getContentSpy.mockReturnValue('New content');
+
+                    const editorElem = screen.getByTestId('tinymce-editor');
+                    fireEvent(editorElem, event);
+
+                    const postMessageData = {
+                        action: CUSTOMER_ACTIONS.UPDATE_CONTENTLET_INLINE_EDITING,
+                        payload: {
+                            content: 'New content',
+                            dataset: {
+                                inode: dotcmsContentletMock.inode,
+                                langId: dotcmsContentletMock.languageId,
+                                fieldName: 'title'
+                            }
+                        }
+                    };
+
+                    expect(isDirtySpy).toHaveBeenCalled();
+                    expect(getContentSpy).toHaveBeenCalledWith({ format: 'text' });
+                    expect(postMessageToEditor).toHaveBeenCalledWith(postMessageData);
+                });
+            });
+        });
+    });
+
+    afterEach(() => jest.clearAllMocks()); // Clear all mocks to avoid side effects from other tests
+});

package/src/lib/components/DotEditableText/DotEditableText.tsx

@@ -0,0 +1,168 @@
+import { Editor } from '@tinymce/tinymce-react';
+import { useEffect, useRef, useState } from 'react';
+
+import {
+    isInsideEditor as isInsideEditorFn,
+    postMessageToEditor,
+    CUSTOMER_ACTIONS,
+    DotCmsClient
+} from '@dotcms/client';
+
+import { DotEditableTextProps, TINYMCE_CONFIG } from './utils';
+
+const MCE_URL = '/ext/tinymcev7/tinymce.min.js';
+
+/**
+ * Allows inline edit content pulled from dotCMS API using TinyMCE editor
+ *
+ * @export
+ * @component
+ * @param {Readonly<DotEditableTextProps>} props {
+ *     mode = 'plain',
+ *     format = 'text',
+ *     contentlet,
+ *     fieldName = ''
+ * }
+ * @example
+ * ```javascript
+ * import { DotEditableText } from '@dotcms/react';
+ *
+ * const MyContentletWithTitle = ({ contentlet }) => (
+ *     <h2>
+ *         <DotEditableText
+ *             contentlet={contentlet}
+ *             fieldName="title"
+ *             mode='full'
+ *             format='text'/>
+ *     </h2>
+ * );
+ * ```
+ * @returns {JSX.Element} A component to edit content inline
+ */
+export function DotEditableText({
+    mode = 'plain',
+    format = 'text',
+    contentlet,
+    fieldName = ''
+}: Readonly<DotEditableTextProps>): JSX.Element {
+    const editorRef = useRef<Editor['editor'] | null>(null);
+    const [scriptSrc, setScriptSrc] = useState('');
+    const [isInsideEditor, setIsInsideEditor] = useState(false);
+    const [content, setContent] = useState(contentlet?.[fieldName] || '');
+
+    useEffect(() => {
+        setIsInsideEditor(isInsideEditorFn());
+
+        if (!contentlet || !fieldName) {
+            console.error('DotEditableText: contentlet or fieldName is missing');
+            console.error('Ensure that all needed props are passed to view and edit the content');
+
+            return;
+        }
+
+        if (!isInsideEditorFn()) {
+            return;
+        }
+
+        const createURL = new URL(MCE_URL, DotCmsClient.dotcmsUrl);
+        setScriptSrc(createURL.toString());
+
+        const content = contentlet?.[fieldName] || '';
+        editorRef.current?.setContent(content, { format });
+        setContent(content);
+    }, [format, fieldName, contentlet]);
+
+    useEffect(() => {
+        if (!isInsideEditorFn()) {
+            return;
+        }
+
+        const onMessage = ({ data }: MessageEvent) => {
+            const { name, payload } = data;
+            if (name !== 'COPY_CONTENTLET_INLINE_EDITING_SUCCESS') {
+                return;
+            }
+
+            const { oldInode, inode } = payload;
+            const currentInode = contentlet.inode;
+            const shouldFocus = currentInode === oldInode || currentInode === inode;
+
+            if (shouldFocus) {
+                editorRef.current?.focus();
+            }
+        };
+
+        window.addEventListener('message', onMessage);
+
+        return () => {
+            window.removeEventListener('message', onMessage);
+        };
+    }, [contentlet.inode]);
+
+    const onMouseDown = (event: MouseEvent) => {
+        const { onNumberOfPages = 1 } = contentlet;
+        const { inode, languageId: language } = contentlet;
+
+        if (onNumberOfPages <= 1 || editorRef.current?.hasFocus()) {
+            return;
+        }
+
+        event.stopPropagation();
+        event.preventDefault();
+
+        postMessageToEditor({
+            action: CUSTOMER_ACTIONS.COPY_CONTENTLET_INLINE_EDITING,
+            payload: {
+                dataset: {
+                    inode,
+                    language,
+                    fieldName
+                }
+            }
+        });
+    };
+
+    const onFocusOut = () => {
+        const editedContent = editorRef.current?.getContent({ format: format }) || '';
+        const { inode, languageId: langId } = contentlet;
+
+        if (!editorRef.current?.isDirty() || !didContentChange(editedContent)) {
+            return;
+        }
+
+        postMessageToEditor({
+            action: CUSTOMER_ACTIONS.UPDATE_CONTENTLET_INLINE_EDITING,
+            payload: {
+                content: editedContent,
+                dataset: {
+                    inode,
+                    langId,
+                    fieldName
+                }
+            }
+        });
+    };
+
+    const didContentChange = (editedContent: string) => {
+        return content !== editedContent;
+    };
+
+    if (!isInsideEditor) {
+        // We can let the user pass the Child Component and create a root to get the HTML for the editor
+        return <span dangerouslySetInnerHTML={{ __html: content }} />;
+    }
+
+    return (
+        <Editor
+            tinymceScriptSrc={scriptSrc}
+            inline={true}
+            onInit={(_, editor) => (editorRef.current = editor)}
+            init={TINYMCE_CONFIG[mode]}
+            initialValue={content}
+            onMouseDown={onMouseDown}
+            onFocusOut={onFocusOut}
+        />
+    );
+}
+
+export default DotEditableText;

package/src/lib/components/DotEditableText/utils.ts

@@ -0,0 +1,82 @@
+import { IAllProps } from '@tinymce/tinymce-react';
+
+import { DotCMSContentlet } from '../../models';
+
+export type DOT_EDITABLE_TEXT_FORMAT = 'html' | 'text';
+
+export type DOT_EDITABLE_TEXT_MODE = 'minimal' | 'full' | 'plain';
+
+export interface DotEditableTextProps {
+    /**
+     * Represents the field name of the `contentlet` that can be edited
+     *
+     * @memberof DotEditableTextProps
+     */
+    fieldName: string;
+    /**
+     * Represents the format of the editor which can be `text` or `html`
+     *
+     * @type {DOT_EDITABLE_TEXT_FORMAT}
+     * @memberof DotEditableTextProps
+     */
+    format?: DOT_EDITABLE_TEXT_FORMAT;
+    /**
+     * Represents the mode of the editor which can be `plain`, `minimal`, or `full`
+     *
+     * @type {DOT_EDITABLE_TEXT_MODE}
+     * @memberof DotEditableTextProps
+     */
+    mode?: DOT_EDITABLE_TEXT_MODE;
+    /**
+     * Represents the `contentlet` that can be inline edited
+     *
+     * @type {DotCMSContentlet}
+     * @memberof DotEditableTextProps
+     */
+    contentlet: DotCMSContentlet;
+}
+
+const DEFAULT_TINYMCE_CONFIG: IAllProps['init'] = {
+    inline: true,
+    menubar: false,
+    powerpaste_html_import: 'clean',
+    powerpaste_word_import: 'clean',
+    suffix: '.min',
+    valid_styles: {
+        '*': 'font-size,font-family,color,text-decoration,text-align'
+    }
+};
+
+export const TINYMCE_CONFIG: {
+    [key in DOT_EDITABLE_TEXT_MODE]: IAllProps['init'];
+} = {
+    full: {
+        ...DEFAULT_TINYMCE_CONFIG,
+        plugins: 'link lists autolink charmap',
+        toolbar: [
+            'styleselect undo redo | bold italic underline | forecolor backcolor | alignleft aligncenter alignright alignfull | numlist bullist outdent indent | hr charmap removeformat | link'
+        ],
+        style_formats: [
+            { title: 'Paragraph', format: 'p' },
+            { title: 'Header 1', format: 'h1' },
+            { title: 'Header 2', format: 'h2' },
+            { title: 'Header 3', format: 'h3' },
+            { title: 'Header 4', format: 'h4' },
+            { title: 'Header 5', format: 'h5' },
+            { title: 'Header 6', format: 'h6' },
+            { title: 'Pre', format: 'pre' },
+            { title: 'Code', format: 'code' }
+        ]
+    },
+    plain: {
+        ...DEFAULT_TINYMCE_CONFIG,
+        plugins: '',
+        toolbar: ''
+    },
+    minimal: {
+        ...DEFAULT_TINYMCE_CONFIG,
+        plugins: 'link autolink',
+        toolbar: 'bold italic underline | link',
+        valid_elements: 'strong,em,span[style],a[href]'
+    }
+};

package/src/lib/components/DotcmsLayout/DotcmsLayout.module.css

@@ -0,0 +1,7 @@
+/*
+ * Replace this with your own classes
+ *
+ * e.g.
+ * .container {
+ * }
+*/

package/src/lib/components/DotcmsLayout/DotcmsLayout.spec.tsx

@@ -0,0 +1,46 @@
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import { ElementRef, ForwardRefExoticComponent } from 'react';
+
+import { DotcmsLayout } from './DotcmsLayout';
+
+import { mockPageContext } from '../../mocks/mockPageContext';
+
+jest.mock('../Row/Row', () => {
+    const { forwardRef } = jest.requireActual('react');
+
+    return {
+        Row: forwardRef(
+            (
+                { children }: { children: JSX.Element },
+                ref: ElementRef<ForwardRefExoticComponent<unknown>>
+            ) => (
+                <div data-testid="mockRow" ref={ref}>
+                    {children}
+                </div>
+            )
+        )
+    };
+});
+
+jest.mock('../PageProvider/PageProvider', () => {
+    return {
+        PageProvider: ({ children }: { children: JSX.Element }) => (
+            <div data-testid="mockPageProvider">{children}</div>
+        )
+    };
+});
+
+describe('DotcmsLayout', () => {
+    it('renders correctly with PageProvider and rows', () => {
+        render(
+            <DotcmsLayout
+                pageContext={{ ...mockPageContext, isInsideEditor: true }}
+                config={{ pathname: 'some-url' }}
+            />
+        );
+        expect(screen.getAllByTestId('mockRow').length).toBe(
+            mockPageContext.pageAsset.layout.body.rows.length
+        );
+    });
+});

package/src/lib/components/DotcmsLayout/DotcmsLayout.tsx

@@ -0,0 +1,50 @@
+import { DotCMSPageEditorConfig } from '@dotcms/client';
+
+import { useDotcmsEditor } from '../../hooks/useDotcmsEditor';
+import { DotCMSPageContext } from '../../models';
+import { PageProvider } from '../PageProvider/PageProvider';
+import { Row } from '../Row/Row';
+
+/**
+ * `DotcmsPageProps` is a type that defines the properties for the `DotcmsLayout` component.
+ * It includes a readonly `entity` property that represents the context for a DotCMS page.
+ *
+ * @typedef {Object} DotcmsPageProps
+ *
+ * @property {DotCMSPageContext} entity - The context for a DotCMS page.
+ * @readonly
+ */
+export type DotcmsPageProps = {
+    /**
+     * `pageContext` is a readonly property of the `DotcmsPageProps` type.
+     * It represents the context for a DotCMS page and is of type `PageProviderContext`.
+     *
+     * @property {PageProviderContext} pageContext
+     * @memberof DotcmsPageProps
+     * @type {DotCMSPageContext}
+     * @readonly
+     */
+    readonly pageContext: DotCMSPageContext;
+
+    readonly config: DotCMSPageEditorConfig;
+};
+
+/**
+ * `DotcmsLayout` is a functional component that renders a layout for a DotCMS page.
+ * It takes a `DotcmsPageProps` object as a parameter and returns a JSX element.
+ *
+ * @category Components
+ * @param {DotcmsPageProps} props - The properties for the DotCMS page.
+ * @returns {JSX.Element} - A JSX element that represents the layout for a DotCMS page.
+ */
+export function DotcmsLayout(dotPageProps: DotcmsPageProps): JSX.Element {
+    const pageContext = useDotcmsEditor(dotPageProps);
+
+    return (
+        <PageProvider pageContext={pageContext}>
+            {pageContext.pageAsset?.layout?.body.rows.map((row, index) => (
+                <Row key={index} row={row} />
+            ))}
+        </PageProvider>
+    );
+}

package/src/lib/components/PageProvider/PageProvider.module.css

@@ -0,0 +1,7 @@
+/*
+ * Replace this with your own classes
+ *
+ * e.g.
+ * .container {
+ * }
+*/

package/src/lib/components/PageProvider/PageProvider.spec.tsx

@@ -0,0 +1,59 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+
+import '@testing-library/jest-dom';
+import { PageProvider } from './PageProvider';
+
+import { PageContext } from '../../contexts/PageContext';
+
+const MockChildComponent = () => {
+    const context = React.useContext(PageContext);
+
+    return <div data-testid="mockChild">{JSON.stringify(context?.pageAsset.page.title)}</div>;
+};
+
+describe('PageProvider', () => {
+    const mockEntity = {
+        pageAsset: {
+            page: {
+                title: 'Test Page',
+                identifier: 'test-page-1'
+            }
+            // ... add other context properties as needed
+        }
+    };
+
+    it('provides the context to its children', () => {
+        render(
+            <PageProvider pageContext={mockEntity}>
+                <MockChildComponent />
+            </PageProvider>
+        );
+        expect(screen.getByTestId('mockChild')).toHaveTextContent(mockEntity.pageAsset.page.title);
+    });
+
+    it('updates context when entity changes', () => {
+        const { rerender } = render(
+            <PageProvider pageContext={mockEntity}>
+                <MockChildComponent />
+            </PageProvider>
+        );
+        // Change the context
+        const newEntity = {
+            ...mockEntity,
+            pageAsset: {
+                ...mockEntity.pageAsset,
+                page: {
+                    ...mockEntity.pageAsset.page,
+                    title: 'Updated Test Page'
+                }
+            }
+        };
+        rerender(
+            <PageProvider pageContext={newEntity}>
+                <MockChildComponent />
+            </PageProvider>
+        );
+        expect(screen.getByTestId('mockChild')).toHaveTextContent(newEntity.pageAsset.page.title);
+    });
+});

package/src/lib/components/PageProvider/PageProvider.tsx

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+
+import { PageContext } from '../../contexts/PageContext';
+
+export interface PageProviderProps {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    readonly pageContext: any;
+    readonly children: ReactNode;
+}
+
+/**
+ * `PageProvider` is a functional component that provides a context for a DotCMS page.
+ * It takes a `PageProviderProps` object as a parameter and returns a JSX element.
+ *
+ * @category Components
+ * @param {PageProviderProps} props - The properties for the PageProvider. Includes an `entity` and `children`.
+ * @returns {JSX.Element} - A JSX element that provides a context for a DotCMS page.
+ */
+export function PageProvider(props: PageProviderProps): JSX.Element {
+    const { pageContext, children } = props;
+
+    return <PageContext.Provider value={pageContext}>{children}</PageContext.Provider>;
+}

package/src/lib/components/Row/Row.module.css

@@ -0,0 +1,5 @@
+.row {
+    display: grid;
+    grid-template-columns: repeat(12, 1fr);
+    gap: 1rem;
+}