@dotcms/angular 0.0.1-alpha.40 → 0.0.1-alpha.41

package/src/lib/components/dot-editable-text/dot-editable-text.component.spec.ts

@@ -1,424 +0,0 @@
-import { SpyObject } from '@ngneat/spectator';
-import { Spectator, createComponentFactory } from '@ngneat/spectator/jest';
-import { EditorComponent, TINYMCE_SCRIPT_SRC } from '@tinymce/tinymce-angular';
-import { MockComponent } from 'ng-mocks';
-import { Editor } from 'tinymce';
-
-import { DebugElement, ElementRef, Renderer2, SecurityContext } from '@angular/core';
-import { By, DomSanitizer } from '@angular/platform-browser';
-
-import * as dotcmsClient from '@dotcms/client';
-
-import { DotEditableTextComponent } from './dot-editable-text.component';
-import { TINYMCE_CONFIG } from './utils';
-
-import { dotcmsContentletMock } from '../../utils/testing.utils';
-
-const { CUSTOMER_ACTIONS, postMessageToEditor } = dotcmsClient;
-
-// 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 TINYMCE_EDITOR_MOCK: unknown = {
-    focus: jest.fn(),
-    getContent: (_data: unknown) => '',
-    isDirty: () => false,
-    hasFocus: () => false,
-    setContent: jest.fn()
-};
-
-const TINYMCE_EDITOR_PROPERTY_MOCK = {
-    get: jest.fn(() => TINYMCE_EDITOR_MOCK as Editor)
-};
-
-const mockEditorFn = (spectator: Spectator<DotEditableTextComponent>) => {
-    // Mock the editor property of the EditorComponent
-    // We need to test that the methods of the editor are called
-    // We do not care about how the editor handles the calls under the hood
-    Object.defineProperty(
-        spectator.component.editorComponent,
-        'editor',
-        TINYMCE_EDITOR_PROPERTY_MOCK
-    );
-};
-
-describe('DotEditableTextComponent', () => {
-    let spectator: Spectator<DotEditableTextComponent>;
-
-    const createComponent = createComponentFactory({
-        component: DotEditableTextComponent,
-        declarations: [MockComponent(EditorComponent)],
-        providers: [
-            Renderer2,
-            {
-                provide: DomSanitizer,
-                useValue: {
-                    bypassSecurityTrustHtml: () => '',
-                    sanitize: () => ''
-                }
-            },
-            {
-                provide: ElementRef,
-                useValue: {
-                    nativeElement: document.createElement('div')
-                }
-            },
-            {
-                provide: TINYMCE_SCRIPT_SRC,
-                useValue: 'tinymce/tinymce.min.js'
-            }
-        ]
-    });
-
-    beforeEach(() => {
-        spectator = createComponent({
-            props: {
-                contentlet: dotcmsContentletMock,
-                fieldName: 'title'
-            },
-            detectChanges: false
-        });
-    });
-
-    describe('Outside Editor', () => {
-        let renderer2: SpyObject<Renderer2>;
-        let elementRef: SpyObject<ElementRef>;
-        let sanitizer: SpyObject<DomSanitizer>;
-
-        beforeEach(() => {
-            jest.spyOn(mockedDotcmsClient, 'isInsideEditor').mockReturnValue(false);
-            renderer2 = spectator.inject(Renderer2, true);
-            elementRef = spectator.inject(ElementRef, true);
-            sanitizer = spectator.inject(DomSanitizer, true);
-        });
-
-        describe('Template', () => {
-            it('Should insert safe HTML content using innerHTML', () => {
-                const safeHtml = dotcmsContentletMock.title + 'Safe';
-                const spyRender2 = jest.spyOn(renderer2, 'setProperty');
-                const spybypassSecurityTrustHtml = jest
-                    .spyOn(sanitizer, 'bypassSecurityTrustHtml')
-                    .mockReturnValue(safeHtml);
-                const spySanitze = jest.spyOn(sanitizer, 'sanitize').mockReturnValue(safeHtml);
-
-                spectator.detectChanges();
-
-                const nativeElement = elementRef.nativeElement;
-                const componentHTML = spectator.debugElement.nativeElement.innerHTML;
-
-                expect(componentHTML).toBe(safeHtml);
-                expect(spybypassSecurityTrustHtml).toHaveBeenCalledWith(dotcmsContentletMock.title);
-                expect(spySanitze).toHaveBeenCalledWith(SecurityContext.HTML, safeHtml);
-                expect(spyRender2).toHaveBeenCalledWith(nativeElement, 'innerHTML', safeHtml);
-            });
-
-            it('Should not initialize the editor', () => {
-                spectator.detectChanges();
-
-                const editorComponent = spectator.query(EditorComponent);
-                expect(editorComponent).toBeNull();
-            });
-        });
-    });
-
-    describe('Inside Editor', () => {
-        beforeEach(() => {
-            jest.spyOn(mockedDotcmsClient, 'isInsideEditor').mockReturnValue(true);
-        });
-
-        it('should set content with the right format when the contentlet changes', () => {
-            spectator.detectChanges();
-            mockEditorFn(spectator);
-
-            const editorComponent = spectator.query(EditorComponent) as EditorComponent;
-            const spySetContent = jest.spyOn(editorComponent.editor, 'setContent');
-
-            spectator.setInput('contentlet', {
-                ...dotcmsContentletMock,
-                title: 'New title'
-            });
-            spectator.detectChanges();
-            expect(spySetContent).toHaveBeenCalledWith('New title', { format: 'text' });
-        });
-
-        describe('Configuration', () => {
-            describe('Editor Configuration', () => {
-                it('should set a plain mode by default', () => {
-                    spectator.setInput('mode', 'plain');
-                    spectator.detectChanges();
-                    const editorComponent = spectator.query(EditorComponent);
-
-                    spectator.detectChanges();
-                    expect(spectator.component.mode).toBe('plain');
-                    expect(editorComponent?.init).toEqual({
-                        ...TINYMCE_CONFIG['plain'],
-                        base_url: 'http://localhost:8080/ext/tinymcev7'
-                    });
-                });
-
-                it('should set a minimal mode when the mode is set to minimal', () => {
-                    spectator.setInput('mode', 'minimal');
-                    spectator.detectChanges();
-
-                    const editorComponent = spectator.query(EditorComponent);
-
-                    expect(spectator.component.mode).toBe('minimal');
-                    expect(editorComponent?.init).toEqual({
-                        ...TINYMCE_CONFIG['minimal'],
-                        base_url: 'http://localhost:8080/ext/tinymcev7'
-                    });
-                });
-
-                it('should set a full mode when the mode is set to full', () => {
-                    spectator.setInput('mode', 'full');
-                    spectator.detectChanges();
-
-                    const editorComponent = spectator.query(EditorComponent);
-
-                    expect(spectator.component.mode).toBe('full');
-                    expect(editorComponent?.init).toEqual({
-                        ...TINYMCE_CONFIG['full'],
-                        base_url: 'http://localhost:8080/ext/tinymcev7'
-                    });
-                });
-            });
-
-            describe('format', () => {
-                let getContentSpy: jest.SpyInstance;
-                let editorDebugElement: DebugElement;
-                let customEvent: {
-                    event: FocusEvent;
-                    editor: unknown;
-                };
-
-                beforeEach(() => {
-                    spectator.detectChanges();
-                    mockEditorFn(spectator);
-
-                    const editor = spectator.component.editorComponent.editor;
-                    getContentSpy = jest.spyOn(editor, 'getContent');
-                    customEvent = {
-                        event: new FocusEvent('focusout'),
-                        editor: TINYMCE_EDITOR_MOCK
-                    };
-                    editorDebugElement = spectator.debugElement.query(
-                        By.directive(EditorComponent)
-                    );
-                });
-
-                it('should get the content as text by default', () => {
-                    spectator.triggerEventHandler(editorDebugElement, 'onFocusOut', customEvent);
-                    expect(getContentSpy).toHaveBeenCalledWith({ format: 'text' });
-                });
-
-                it('should get the content as text when format is set to text', () => {
-                    spectator.setInput('format', 'text');
-                    spectator.detectChanges();
-                    spectator.triggerEventHandler(editorDebugElement, 'onFocusOut', customEvent);
-                    expect(getContentSpy).toHaveBeenCalledWith({ format: 'text' });
-                });
-
-                it('should get the content as html when format is set to html', () => {
-                    spectator.setInput('format', 'html');
-                    spectator.detectChanges();
-                    spectator.triggerEventHandler(editorDebugElement, 'onFocusOut', customEvent);
-                    expect(getContentSpy).toHaveBeenCalledWith({ format: 'html' });
-                });
-            });
-        });
-
-        describe('events', () => {
-            beforeEach(() => {
-                spectator.detectChanges();
-                mockEditorFn(spectator);
-            });
-
-            describe('Window Message', () => {
-                let focusSpy: jest.SpyInstance;
-                beforeEach(() => {
-                    focusSpy = jest.spyOn(spectator.component.editorComponent.editor, '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: dotcmsContentletMock.inode
-                                }
-                            }
-                        })
-                    );
-                    spectator.detectChanges();
-                    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' }
-                        })
-                    );
-                    spectator.detectChanges();
-                    expect(focusSpy).not.toHaveBeenCalled();
-                });
-            });
-
-            describe('mousedown', () => {
-                let event: MouseEvent;
-                let editorDebugElement: DebugElement;
-                let customEvent: {
-                    event: MouseEvent;
-                    editor: unknown;
-                };
-
-                beforeEach(() => {
-                    spectator.setInput('contentlet', {
-                        ...dotcmsContentletMock,
-                        onNumberOfPages: 2 // This will need to be overridden in tests where a different value is required
-                    });
-                    spectator.detectChanges();
-
-                    event = new MouseEvent('mousedown');
-                    customEvent = { event, editor: TINYMCE_EDITOR_MOCK };
-                    editorDebugElement = spectator.debugElement.query(
-                        By.directive(EditorComponent)
-                    );
-
-                    jest.spyOn(event, 'stopPropagation');
-                    jest.spyOn(event, 'preventDefault');
-                });
-
-                it('should postMessage the UVE if the content is in multiple pages', () => {
-                    spectator.triggerEventHandler(editorDebugElement, 'onMouseDown', customEvent);
-
-                    const payload = {
-                        dataset: {
-                            fieldName: 'title',
-                            inode: dotcmsContentletMock.inode,
-                            language: dotcmsContentletMock.languageId
-                        }
-                    };
-
-                    expect(postMessageToEditor).toHaveBeenCalledWith({
-                        action: CUSTOMER_ACTIONS.COPY_CONTENTLET_INLINE_EDITING,
-                        payload
-                    });
-                    expect(event.stopPropagation).toHaveBeenCalled();
-                    expect(event.preventDefault).toHaveBeenCalled();
-                });
-
-                it('should not postMessage the UVE if the content is in a single page', () => {
-                    spectator.setInput('contentlet', {
-                        ...dotcmsContentletMock,
-                        onNumberOfPages: 1
-                    });
-                    spectator.detectChanges();
-                    spectator.triggerEventHandler(editorDebugElement, 'onMouseDown', customEvent);
-                    expect(postMessageToEditor).not.toHaveBeenCalled();
-                    expect(event.stopPropagation).not.toHaveBeenCalled();
-                    expect(event.preventDefault).not.toHaveBeenCalled();
-                });
-
-                it('should not postMessage the UVE if the editor is already focus', () => {
-                    const hasFocusSpy = jest
-                        .spyOn(spectator.component.editorComponent.editor, 'hasFocus')
-                        .mockReturnValue(true);
-
-                    spectator.detectChanges();
-                    spectator.triggerEventHandler(editorDebugElement, 'onMouseDown', customEvent);
-                    expect(postMessageToEditor).not.toHaveBeenCalled();
-                    expect(event.stopPropagation).not.toHaveBeenCalled();
-                    expect(event.preventDefault).not.toHaveBeenCalled();
-                    expect(hasFocusSpy).toHaveBeenCalled();
-                });
-            });
-
-            describe('focusout', () => {
-                let isDirtySpy: jest.SpyInstance;
-                let getContentSpy: jest.SpyInstance;
-                let event: FocusEvent;
-                let editorDebugElement: DebugElement;
-                let customEvent: {
-                    event: FocusEvent;
-                    editor: unknown;
-                };
-
-                beforeEach(() => {
-                    const editor = spectator.component.editorComponent.editor;
-                    isDirtySpy = jest.spyOn(editor, 'isDirty');
-                    getContentSpy = jest.spyOn(editor, 'getContent');
-
-                    event = new FocusEvent('focusout');
-                    customEvent = { event, editor: TINYMCE_EDITOR_MOCK };
-
-                    editorDebugElement = spectator.debugElement.query(
-                        By.directive(EditorComponent)
-                    );
-                });
-
-                it('should not postMessage the UVE if the editor is not dirty', () => {
-                    isDirtySpy.mockReturnValue(false);
-                    getContentSpy.mockReturnValue("I'm not dirty");
-
-                    spectator.detectChanges();
-
-                    spectator.triggerEventHandler(editorDebugElement, 'onFocusOut', customEvent);
-
-                    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);
-
-                    spectator.detectChanges();
-                    spectator.triggerEventHandler(editorDebugElement, 'onFocusOut', customEvent);
-
-                    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');
-
-                    spectator.detectChanges();
-                    spectator.triggerEventHandler(editorDebugElement, 'onFocusOut', customEvent);
-
-                    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/dot-editable-text/dot-editable-text.component.ts

@@ -1,269 +0,0 @@
-import { EditorComponent, TINYMCE_SCRIPT_SRC } from '@tinymce/tinymce-angular';
-import { EventObj } from '@tinymce/tinymce-angular/editor/Events';
-
-import {
-    Component,
-    ElementRef,
-    HostListener,
-    inject,
-    Input,
-    OnChanges,
-    OnInit,
-    Renderer2,
-    SecurityContext,
-    ViewChild
-} from '@angular/core';
-import { DomSanitizer } from '@angular/platform-browser';
-
-import {
-    CUSTOMER_ACTIONS,
-    DotCmsClient,
-    isInsideEditor,
-    postMessageToEditor
-} from '@dotcms/client';
-
-import { TINYMCE_CONFIG, DOT_EDITABLE_TEXT_FORMAT, DOT_EDITABLE_TEXT_MODE } from './utils';
-
-import { DotCMSContentlet } from '../../models';
-
-/**
- * Dot editable text component.
- * This component is responsible to render a text field that can be edited inline.
- *
- * @export
- * @class DotEditableTextComponent
- * @implements {OnInit}
- * @implements {OnChanges}
- */
-@Component({
-    selector: 'dot-editable-text',
-    standalone: true,
-    templateUrl: './dot-editable-text.component.html',
-    styleUrl: './dot-editable-text.component.css',
-    imports: [EditorComponent],
-    providers: [
-        {
-            provide: TINYMCE_SCRIPT_SRC,
-            useFactory: () => {
-                return `${DotCmsClient.dotcmsUrl}/ext/tinymcev7/tinymce.min.js`;
-            }
-        }
-    ]
-})
-export class DotEditableTextComponent implements OnInit, OnChanges {
-    @ViewChild(EditorComponent) editorComponent!: EditorComponent;
-
-    /**
-     * Represents the mode of the editor which can be `plain`, `minimal`, or `full`
-     *
-     * @type {DOT_EDITABLE_TEXT_MODE}
-     * @memberof DotEditableTextComponent
-     */
-    @Input() mode: DOT_EDITABLE_TEXT_MODE = 'plain';
-    /**
-     * Represents the format of the editor which can be `text` or `html`
-     *
-     * @type {DOT_EDITABLE_TEXT_FORMAT}
-     * @memberof DotEditableTextComponent
-     */
-    @Input() format: DOT_EDITABLE_TEXT_FORMAT = 'text';
-    /**
-     * Represents the `contentlet` that can be inline edited
-     *
-     * @type {DotCMSContentlet}
-     * @memberof DotEditableTextComponent
-     */
-    @Input() contentlet!: DotCMSContentlet;
-    /**
-     * Represents the field name of the `contentlet` that can be edited
-     *
-     * @memberof DotEditableTextComponent
-     */
-    @Input() fieldName = '';
-
-    /**
-     * Represents the content of the `contentlet` that can be edited
-     *
-     * @protected
-     * @memberof DotEditableTextComponent
-     */
-    protected content = '';
-    /**
-     * Represents the configuration of the editor
-     *
-     * @protected
-     * @type {EditorComponent['init']}
-     * @memberof DotEditableTextComponent
-     */
-    protected init!: EditorComponent['init'];
-    /**
-     * Represents if the component is inside the editor
-     *
-     * @protected
-     * @type {boolean}
-     * @memberof DotEditableTextComponent
-     */
-    protected isInsideEditor!: boolean;
-
-    readonly #sanitizer = inject<DomSanitizer>(DomSanitizer);
-    readonly #renderer = inject<Renderer2>(Renderer2);
-    readonly #elementRef = inject<ElementRef>(ElementRef);
-
-    /**
-     * The TinyMCE editor
-     *
-     * @readonly
-     * @memberof DotEditableTextComponent
-     */
-    get editor() {
-        return this.editorComponent?.editor;
-    }
-
-    /**
-     * Returns the number of pages the contentlet is on
-     *
-     * @readonly
-     * @memberof DotEditableTextComponent
-     */
-    get onNumberOfPages() {
-        return this.contentlet['onNumberOfPages'] || 1;
-    }
-
-    /**
-     * Handle copy contentlet inline editing success event
-     *
-     * @param {MessageEvent} { data }
-     * @return {*}
-     * @memberof DotEditableTextComponent
-     */
-    @HostListener('window:message', ['$event'])
-    onMessage({ data }: MessageEvent) {
-        const { name, payload } = data;
-        if (name !== 'COPY_CONTENTLET_INLINE_EDITING_SUCCESS') {
-            return;
-        }
-
-        const { oldInode, inode } = payload;
-        const currentInode = this.contentlet.inode;
-
-        if (currentInode === oldInode || currentInode === inode) {
-            this.editorComponent.editor.focus();
-
-            return;
-        }
-    }
-
-    ngOnInit() {
-        this.isInsideEditor = isInsideEditor();
-
-        if (!this.isInsideEditor) {
-            this.innerHTMLToElement();
-
-            return;
-        }
-
-        this.init = {
-            ...TINYMCE_CONFIG[this.mode],
-            base_url: `${DotCmsClient.dotcmsUrl}/ext/tinymcev7`
-        };
-    }
-
-    ngOnChanges() {
-        this.content = this.contentlet[this.fieldName] || '';
-        if (this.editor) {
-            this.editor.setContent(this.content, { format: this.format });
-        }
-    }
-
-    /**
-     * Handle mouse down event
-     *
-     * @param {EventObj<MouseEvent>} { event }
-     * @return {*}
-     * @memberof DotEditableTextComponent
-     */
-    onMouseDown({ event }: EventObj<MouseEvent>) {
-        if (this.onNumberOfPages <= 1 || this.editorComponent.editor.hasFocus()) {
-            return;
-        }
-
-        const { inode, languageId: language } = this.contentlet;
-
-        event.stopPropagation();
-        event.preventDefault();
-
-        try {
-            postMessageToEditor({
-                action: CUSTOMER_ACTIONS.COPY_CONTENTLET_INLINE_EDITING,
-                payload: {
-                    dataset: {
-                        inode,
-                        language,
-                        fieldName: this.fieldName
-                    }
-                }
-            });
-        } catch (error) {
-            console.error('Failed to post message to editor:', error);
-        }
-    }
-    /**
-     * Handle focus out event
-     *
-     * @return {*}
-     * @memberof DotEditableTextComponent
-     */
-    onFocusOut() {
-        const content = this.editor.getContent({ format: this.format });
-
-        if (!this.editor.isDirty() || !this.didContentChange(content)) {
-            return;
-        }
-
-        const { inode, languageId: langId } = this.contentlet;
-
-        try {
-            postMessageToEditor({
-                action: CUSTOMER_ACTIONS.UPDATE_CONTENTLET_INLINE_EDITING,
-                payload: {
-                    content,
-                    dataset: {
-                        inode,
-                        langId,
-                        fieldName: this.fieldName
-                    }
-                }
-            });
-        } catch (error) {
-            console.error('Failed to post message to editor:', error);
-        }
-    }
-
-    /**
-     * inner HTML to element
-     *
-     * @private
-     * @param {string} editedContent
-     * @return {*}
-     * @memberof DotEditableTextComponent
-     */
-    private innerHTMLToElement() {
-        const element = this.#elementRef.nativeElement;
-        const safeHtml = this.#sanitizer.bypassSecurityTrustHtml(this.content);
-        const content = this.#sanitizer.sanitize(SecurityContext.HTML, safeHtml) || '';
-
-        this.#renderer.setProperty(element, 'innerHTML', content);
-    }
-
-    /**
-     * Check if the content has changed
-     *
-     * @private
-     * @param {string} editedContent
-     * @return {*}
-     * @memberof DotEditableTextComponent
-     */
-    private didContentChange(editedContent: string) {
-        return this.content !== editedContent;
-    }
-}