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

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

@@ -0,0 +1,269 @@
+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;
+    }
+}

package/src/lib/components/dot-editable-text/utils.ts

@@ -0,0 +1,51 @@
+import { EditorComponent } from '@tinymce/tinymce-angular';
+
+export type DOT_EDITABLE_TEXT_MODE = 'minimal' | 'full' | 'plain';
+
+export type DOT_EDITABLE_TEXT_FORMAT = 'html' | 'text';
+
+const DEFAULT_TINYMCE_CONFIG: EditorComponent['init'] = {
+    menubar: false,
+    inline: true,
+    valid_styles: {
+        '*': 'font-size,font-family,color,text-decoration,text-align'
+    },
+    powerpaste_word_import: 'clean',
+    powerpaste_html_import: 'clean',
+    suffix: '.min', // Suffix to use when loading resources
+    license_key: 'gpl'
+};
+
+export const TINYMCE_CONFIG: {
+    [key in DOT_EDITABLE_TEXT_MODE]: EditorComponent['init'];
+} = {
+    minimal: {
+        ...DEFAULT_TINYMCE_CONFIG,
+        plugins: 'link autolink',
+        toolbar: 'bold italic underline | link',
+        valid_elements: 'strong,em,span[style],a[href]'
+    },
+    full: {
+        ...DEFAULT_TINYMCE_CONFIG,
+        plugins: 'link lists autolink charmap',
+        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' }
+        ],
+        toolbar: [
+            'styleselect undo redo | bold italic underline | forecolor backcolor | alignleft aligncenter alignright alignfull | numlist bullist outdent indent | hr charmap removeformat | link'
+        ]
+    },
+    plain: {
+        ...DEFAULT_TINYMCE_CONFIG,
+        plugins: '',
+        toolbar: ''
+    }
+};

package/src/lib/components/no-component/no-component.component.css

@@ -0,0 +1,3 @@
+:host {
+    display: block;
+}

package/src/lib/components/no-component/no-component.component.spec.ts

@@ -0,0 +1,24 @@
+import { Spectator, createComponentFactory } from '@ngneat/spectator';
+
+import { NoComponent } from './no-component.component';
+
+import { DotCMSContentlet } from '../../models';
+
+describe('NoComponentComponent', () => {
+    let spectator: Spectator<NoComponent>;
+
+    const createComponent = createComponentFactory(NoComponent);
+
+    beforeEach(() => {
+        spectator = createComponent({
+            props: {
+                contentlet: { contentType: 'exampleContentType' } as DotCMSContentlet
+            }
+        });
+    });
+
+    it('should display the content type', () => {
+        const noComponent = spectator.debugElement.nativeElement;
+        expect(noComponent?.innerHTML).toContain('No Component for exampleContentType');
+    });
+});

package/src/lib/components/no-component/no-component.component.ts

@@ -0,0 +1,31 @@
+import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';
+
+import { DotCMSContentlet } from '../../models';
+
+/**
+ * This component is responsible to display a message when there is no component for a contentlet.
+ *
+ * @export
+ * @class NoComponent
+ */
+@Component({
+    selector: 'dotcms-no-component',
+    standalone: true,
+    template: `
+        No Component for {{ contentlet.contentType }}
+    `,
+    styleUrl: './no-component.component.css',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class NoComponent {
+    /**
+     * The contentlet object containing content data.
+     * The component displays a message based on the content type of this contentlet.
+     */
+    @Input() contentlet!: DotCMSContentlet;
+
+    /**
+     * The data-testid attribute used for identifying the component during testing.
+     */
+    @HostBinding('attr.data-testid') testId = 'no-component';
+}

package/src/lib/layout/column/column.component.css

@@ -0,0 +1,99 @@
+:host.col-start-1 {
+    grid-column-start: 1;
+}
+
+:host.col-start-2 {
+    grid-column-start: 2;
+}
+
+:host.col-start-3 {
+    grid-column-start: 3;
+}
+
+:host.col-start-4 {
+    grid-column-start: 4;
+}
+
+:host.col-start-5 {
+    grid-column-start: 5;
+}
+
+:host.col-start-6 {
+    grid-column-start: 6;
+}
+
+:host.col-start-7 {
+    grid-column-start: 7;
+}
+
+:host.col-start-8 {
+    grid-column-start: 8;
+}
+
+:host.col-start-9 {
+    grid-column-start: 9;
+}
+
+:host.col-start-10 {
+    grid-column-start: 10;
+}
+
+:host.col-start-11 {
+    grid-column-start: 11;
+}
+
+:host.col-start-12 {
+    grid-column-start: 12;
+}
+
+:host.col-end-1 {
+    grid-column-end: 1;
+}
+
+:host.col-end-2 {
+    grid-column-end: 2;
+}
+
+:host.col-end-3 {
+    grid-column-end: 3;
+}
+
+:host.col-end-4 {
+    grid-column-end: 4;
+}
+
+:host.col-end-5 {
+    grid-column-end: 5;
+}
+
+:host.col-end-6 {
+    grid-column-end: 6;
+}
+
+:host.col-end-7 {
+    grid-column-end: 7;
+}
+
+:host.col-end-8 {
+    grid-column-end: 8;
+}
+
+:host.col-end-9 {
+    grid-column-end: 9;
+}
+
+:host.col-end-10 {
+    grid-column-end: 10;
+}
+
+:host.col-end-11 {
+    grid-column-end: 11;
+}
+
+:host.col-end-12 {
+    grid-column-end: 12;
+}
+
+:host.col-end-13 {
+    grid-column-end: 13;
+}

package/src/lib/layout/column/column.component.spec.ts

@@ -0,0 +1,33 @@
+import { Spectator, createComponentFactory } from '@ngneat/spectator';
+import { MockComponent } from 'ng-mocks';
+
+import { ColumnComponent } from './column.component';
+
+import { DotPageAssetLayoutColumn } from '../../models';
+import { PageResponseMock } from '../../utils/testing.utils';
+import { ContainerComponent } from '../container/container.component';
+
+describe('ColumnComponent', () => {
+    let spectator: Spectator<ColumnComponent>;
+
+    const createComponent = createComponentFactory({
+        component: ColumnComponent,
+        imports: [MockComponent(ContainerComponent)]
+    });
+
+    beforeEach(() => {
+        spectator = createComponent({
+            props: {
+                column: PageResponseMock.layout.body.rows[0].columns[0] as DotPageAssetLayoutColumn
+            }
+        });
+    });
+
+    it('should render one container', () => {
+        expect(spectator.queryAll(ContainerComponent)?.length).toBe(1);
+    });
+
+    it('should set correct containerClasses', () => {
+        expect(spectator.component.containerClasses).toBe('col-start-1 col-end-13');
+    });
+});

package/src/lib/layout/column/column.component.ts

@@ -0,0 +1,49 @@
+import { ChangeDetectionStrategy, Component, HostBinding, Input, OnInit } from '@angular/core';
+
+import { DotPageAssetLayoutColumn } from '../../models';
+import { getPositionStyleClasses } from '../../utils';
+import { ContainerComponent } from '../container/container.component';
+
+/**
+ * This component is responsible to display a column with containers.
+ *
+ * @export
+ * @class ColumnComponent
+ * @implements {OnInit}
+ */
+@Component({
+    selector: 'dotcms-column',
+    standalone: true,
+    imports: [ContainerComponent],
+    template: `
+        @for (container of column.containers; track $index) {
+            <dotcms-container [container]="container" />
+        }
+    `,
+    styleUrl: './column.component.css',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ColumnComponent implements OnInit {
+    /**
+     * The column object containing the containers.
+     *
+     * @type {DotPageAssetLayoutColumn}
+     * @memberof ColumnComponent
+     */
+    @Input() column!: DotPageAssetLayoutColumn;
+
+    /**
+     * The data-testid attribute used for identifying the component during testing.
+     *
+     * @memberof ColumnComponent
+     */
+    @HostBinding('class') containerClasses = '';
+
+    ngOnInit() {
+        const { startClass, endClass } = getPositionStyleClasses(
+            this.column.leftOffset,
+            this.column.width + this.column.leftOffset
+        );
+        this.containerClasses = `${startClass} ${endClass}`;
+    }
+}

package/src/lib/layout/container/container.component.css

@@ -0,0 +1,9 @@
+:host.empty-container {
+    width: 100%;
+    background-color: #ecf0fd;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #030e32;
+    height: 10rem;
+}

package/src/lib/layout/container/container.component.html

@@ -0,0 +1,26 @@
+@if ($isInsideEditor()) {
+    @if ($contentlets().length) {
+        @for (contentlet of $contentlets(); track $index) {
+            <dotcms-contentlet-wrapper
+                [contentlet]="contentlet"
+                [container]="$dotContainerAsString()">
+                <ng-container
+                    *ngComponentOutlet="
+                        (componentsMap[contentlet.contentType] || componentsMap['CustomNoComponent']
+                            | async) || NoComponent;
+                        inputs: { contentlet }
+                    " />
+            </dotcms-contentlet-wrapper>
+        }
+    } @else {
+        This container is empty.
+    }
+} @else {
+    @for (contentlet of $contentlets(); track $index) {
+        <ng-container
+            *ngComponentOutlet="
+                componentsMap[contentlet.contentType] | async;
+                inputs: { contentlet }
+            " />
+    }
+}