[AAE-6919] add a display text form control (#7718)

* [AAE-9373] Create adf-rich-text-editor into core library, install editorjs and import it into the component, add a basic editorjs configuration

* [AAE-9374] create a rich text editor demo page

* [AAE-9376] Install header to provide headings blocks

* [AAE-9376] Install editorjs List plugin to add ordered and unordered list

* [AAE-9376] Install text color plugin to change text color and highlight text

* [AAE-9376] Install paragraph plugin to set text alignment to right, left, center and justify

* [AAE-9376] Install font size plugin to increase/decrease font size

* [AAE-9376] Install @editorjs/underline plugin to underline text

* [AAE-9376] Install @editorjs/inline-code to marking code-fragments

* [AAE-9376] Set shortcut to underline text

* [AAE-9376] Install @editorjs/code to add code examples

* [AAE-9376] Enable custom picker to color text changer, add colors codes

* [AAE-9376] Add input to fill rich text editor data

* [AAE-9376] Demo rich text editor, add sample data to display editor content

* [AAE-9376] Demo rich text editor, add sample data to display editor content

* [AAE-9376] Install @editorjs/marker plugin to highlight the text, because color plugin doesn't save marker style

* [AAE-9373] Send editor text output data onReady and onChange

* [AAE-9374] Update editor demo page to show the output on the right side of the page

* [AAE-9373] Allow to enable editorjs readOnly mode

* [AAE-9373] Return rich text editor save data as promise

* [AAE-9480] Add new display-rich-text widget to allow the user add Rich Text into a form

* [AAE-9371] Add readonly class if readOnly property is true to remove the editor 300px padding bottom in readonly mode, set a dynamic id to editorjs

* [AAE-9371] Destroy editorInstance on component destroy to FIX an error faced when there are multiple editorjs instance in the same page --> Uncaught TypeError: Cannot read property 'updateCurrentInput' of undefined

* [AAE-9480] Install editorjs-html utility to parse editorjs clean data to HTML

* [AAE-9480] parse editorjs data to HTML to avoid to create a new EditorJS instance for every single widget and improve performance

* [AAE-9480] Set pre styles to show show Code block styles correctly

* [AAE-9480] Remove space between rules

* [AAE-9480] Set editorjs and plugins fixed versions

* [AAE-9480] Removed unused editorjs dependency

* [AAE-9371] Set is ready property when editor instance is ready, check if is ready to destroy the instance on component destroy

* [AAE-9480] Add parse editorjs data to html Test

* [AAE-9371] Send rich-text-editor component data only if readOnly mode is false

* [AAE-9480] Test if display-rich-text widget is resolved

* [AAE-9480] Rename DisplayRichTextComponent into DisplayRichTextWidgetComponent to be compliant with other widget component names

* [AAE-9480] update Readme files with DisplayRichTextWidgetComponent

* [AAE-9371] Update header text

* [AAE-9371] Add Rich text editor component usage documentation

* [AAE-9480] Add padding to the widget container

* [AAE-9371] Remove plugin that align pragraph text since editorjs-html parser doesn't handle paragraph alignment

* [AAE-9371] Set editor autofocus to true

* [AAE-9480] Add a display-rich-text widget example to demo cloud form

* [AAE-9371] Fix lint issue

* [AAE-9371] Remove duplicated import to fix import module issue in a lib build job

lib/core/rich-text-editor/editorjs-config.ts

@@ -0,0 +1,72 @@
+/*!
+ * @license
+ * Copyright 2019 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+*/
+
+/** Plugin import */
+import CodeTool from '@editorjs/code';
+import Header from '@editorjs/header';
+import InlineCode from '@editorjs/inline-code';
+import List from '@editorjs/list';
+import Marker from '@editorjs/marker';
+import Underline from '@editorjs/underline';
+import * as ChangeFontSize from '@quanzo/change-font-size';
+import * as ColorPlugin from 'editorjs-text-color-plugin';
+
+export const editorJsConfig = {
+    autofocus: true,
+    logLevel: 'ERROR',
+    tools: {
+        underline: {
+            class: Underline,
+            shortcut: 'CMD+U'
+        },
+        header: {
+            class: Header,
+            inlineToolbar: true
+        },
+        list: {
+            class: List,
+            inlineToolbar: true,
+            config: {
+                defaultStyle: 'unordered'
+            }
+        },
+        Color: {
+            class: ColorPlugin,
+            config: {
+                customPicker: true,
+                colorCollections: ['#FF1300', '#ffa500', '#9C27B0', '#673AB7', '#3F51B5', '#0070FF', '#03A9F4', '#00BCD4', '#5f9ea0', '#4CAF50', '#8BC34A', '#CDDC39', '#FFF', '#000', '#c0c0c0', '#808080', '#800000'],
+                defaultColor: '#FF1300',
+                type: 'text'
+            }
+        },
+        Marker: {
+            class: Marker,
+            shortcut: 'CMD+M'
+        },
+        'Increase/Decrease font size': {
+            class: ChangeFontSize,
+            config: {
+                cssClass: 'plus20pc'
+            }
+        },
+        inlineCode: {
+            class: InlineCode,
+            shortcut: 'CMD+SHIFT+M'
+        },
+        code: CodeTool
+    }
+};

lib/core/rich-text-editor/index.ts

@@ -0,0 +1,18 @@
+/*!
+ * @license
+ * Copyright 2019 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export * from './public-api';

lib/core/rich-text-editor/public-api.ts

@@ -0,0 +1,21 @@
+/*!
+ * @license
+ * Copyright 2019 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+
+export * from './rich-text-editor.component';
+
+export * from './rich-text-editor.module';

lib/core/rich-text-editor/rich-text-editor.component.html

@@ -0,0 +1,3 @@
+<div class="adf-rich-text-editor-container">
+    <div class="editorjs" [ngClass]="{'readonly': readOnly}" id="{{dynamicId}}"></div>
+</div>

lib/core/rich-text-editor/rich-text-editor.component.scss

@@ -0,0 +1,10 @@
+/* stylelint-disable selector-class-pattern */
+.adf-rich-text-editor-container {
+    .editorjs {
+        &.readonly {
+            .codex-editor__redactor {
+                padding-bottom: 0 !important;
+            }
+        }
+    }
+}

lib/core/rich-text-editor/rich-text-editor.component.spec.ts

@@ -0,0 +1,130 @@
+/*!
+ * @license
+ * Copyright 2019 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { DebugElement } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+
+import { RichTextEditorComponent } from './rich-text-editor.component';
+
+describe('RichTextEditorComponent', () => {
+    let component: RichTextEditorComponent;
+    let fixture: ComponentFixture<RichTextEditorComponent>;
+    let debugElement: DebugElement;
+
+    const cssSelectors = {
+        editorContent: '.codex-editor',
+        editorJsElement: '.editorjs'
+    };
+
+    const mockEditorData = {
+        time: 1658154611110,
+        blocks: [
+            {
+                id: '1',
+                type: 'header',
+                data: {
+                    text: 'Editor.js',
+                    level: 2
+                }
+            }
+        ],
+        version: 1
+    };
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            declarations: [RichTextEditorComponent]
+        })
+            .compileComponents();
+    });
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(RichTextEditorComponent);
+        component = fixture.componentInstance;
+        debugElement = fixture.debugElement;
+    });
+
+    it('should create', () => {
+        fixture.detectChanges();
+        expect(component).toBeTruthy();
+    });
+
+    it('should render rich text editor', async () => {
+        fixture.detectChanges();
+        await fixture.whenStable();
+        const editor = debugElement.query(By.css(cssSelectors.editorContent));
+        expect(editor).toBeTruthy();
+    });
+
+    it('should generate dynamic id', async () => {
+        fixture.detectChanges();
+        await fixture.whenStable();
+        expect(component.dynamicId).toContain('editorjs');
+    });
+
+    it('should set dynamic id to editor js element', async () => {
+        spyOn(window.crypto, 'getRandomValues').and.returnValue('randomId');
+        fixture.detectChanges();
+        await fixture.whenStable();
+        const editor = debugElement.query(By.css(cssSelectors.editorJsElement));
+        expect(editor.nativeElement.id).toEqual('editorjs-randomId');
+    });
+
+    it('should get editorjs data by calling getEditorContent', async () => {
+        fixture.detectChanges();
+        await fixture.whenStable();
+        spyOn(component.editorInstance, 'save').and.returnValue(Promise.resolve(mockEditorData));
+        const savedEditorData = await component.getEditorContent();
+        expect(savedEditorData).toEqual(mockEditorData);
+    });
+
+    it('should destroy editor instance on ngOnDestroy', async () => {
+        fixture.detectChanges();
+        await fixture.whenStable();
+        const destroyEditorSpy = spyOn(component.editorInstance, 'destroy');
+        component.ngOnDestroy();
+        expect(destroyEditorSpy).toHaveBeenCalledTimes(1);
+        expect(destroyEditorSpy).toHaveBeenCalled();
+    });
+
+    it('should not destroy editor instance on ngOnDestroy if editor is not ready', async () => {
+        fixture.detectChanges();
+        await fixture.whenStable();
+        const destroyEditorSpy = spyOn(component.editorInstance, 'destroy');
+        component.isReady = false;
+        component.ngOnDestroy();
+        expect(destroyEditorSpy).not.toHaveBeenCalled();
+    });
+
+    it('should add readonly class if readOnly is set to true', async () => {
+        component.readOnly = true;
+        fixture.detectChanges();
+        await fixture.whenStable();
+        const editorEl = debugElement.query(By.css(cssSelectors.editorJsElement));
+        expect(editorEl.nativeElement.classList).toContain('readonly');
+    });
+
+    it('should not add readonly class if readOnly is set to false', async () => {
+        component.readOnly = false;
+        fixture.detectChanges();
+        await fixture.whenStable();
+        const editorEl = debugElement.query(By.css(cssSelectors.editorJsElement));
+        expect(editorEl.nativeElement.classList).not.toContain('readonly');
+    });
+
+});

lib/core/rich-text-editor/rich-text-editor.component.ts

@@ -0,0 +1,91 @@
+/*!
+ * @license
+ * Copyright 2019 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { AfterViewInit, Component, Input, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
+
+import EditorJS, { OutputData } from '@editorjs/editorjs';
+import { Subject } from 'rxjs';
+import { editorJsConfig } from './editorjs-config';
+
+@Component({
+    selector: 'adf-rich-text-editor',
+    templateUrl: './rich-text-editor.component.html',
+    styleUrls: ['./rich-text-editor.component.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class RichTextEditorComponent implements OnInit, OnDestroy, AfterViewInit {
+
+    @Input()
+    data: OutputData;
+
+    @Input()
+    readOnly = false;
+
+    private _outputData = new Subject<OutputData>();
+
+    outputData$ = this._outputData.asObservable();
+
+    editorInstance: EditorJS;
+    dynamicId: string;
+    isReady = false;
+
+    constructor() {
+    }
+
+    ngOnInit(): void {
+        this.dynamicId = `editorjs-${crypto.getRandomValues(new Uint32Array(1))}`;
+    }
+
+    ngAfterViewInit(): void {
+        this.editorInstance = new EditorJS({
+            holder: this.dynamicId,
+            ...editorJsConfig,
+            data: this.data,
+            readOnly: this.readOnly,
+            onChange: () => {
+                if (!this.readOnly) {
+                    this.sendEditorOutputData();
+                }
+            },
+            onReady: () => {
+                this.isReady = true;
+                if (!this.readOnly) {
+                    this.sendEditorOutputData();
+                }
+            }
+        } as any);
+    }
+
+    private sendEditorOutputData() {
+        this.editorInstance.save().then((outputData) => {
+            this._outputData.next(outputData);
+        }).catch((error) => {
+            console.log('Saving failed: ', error);
+        });
+    }
+
+    getEditorContent() {
+        return this.editorInstance.save();
+    }
+
+    ngOnDestroy(): void {
+        if (this.isReady) {
+            this.editorInstance.destroy();
+        }
+    }
+
+}

lib/core/rich-text-editor/rich-text-editor.module.ts

@@ -0,0 +1,30 @@
+/*!
+ * @license
+ * Copyright 2019 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RichTextEditorComponent } from './rich-text-editor.component';
+
+
+@NgModule({
+    declarations: [RichTextEditorComponent],
+    imports: [
+        CommonModule
+    ],
+    exports: [RichTextEditorComponent]
+})
+export class RichTextEditorModule { }