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

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

@@ -1,232 +0,0 @@
-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

@@ -1,168 +0,0 @@
-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

@@ -1,82 +0,0 @@
-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

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

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

@@ -1,46 +0,0 @@
-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/PageProvider/PageProvider.module.css

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

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

@@ -1,59 +0,0 @@
-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/Row/Row.module.css

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