[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/form/components/widgets/display-rich-text/display-rich-text.widget.html

@@ -0,0 +1,3 @@
+<div class="adf-display-rich-text-widget">
+    <div class="adf-display-rich-text-widget-parsed-html" [innerHTML]="parsedHTML"></div>
+</div>

lib/core/form/components/widgets/display-rich-text/display-rich-text.widget.scss

@@ -0,0 +1,22 @@
+.adf-display-rich-text-widget {
+    padding: 10px;
+
+    pre {
+        min-height: 100px;
+        font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
+        color: #41314e;
+        line-height: 1.6em;
+        font-size: 12px;
+        background: #f8f7fa;
+        border: 1px solid #f1f1f4;
+        box-shadow: none;
+        white-space: pre;
+        word-wrap: normal;
+        overflow-x: auto;
+        resize: vertical;
+        border-radius: 3px;
+        padding: 10px 12px;
+        outline: none;
+        width: 100%;
+    }
+}

lib/core/form/components/widgets/display-rich-text/display-rich-text.widget.spec.ts

@@ -0,0 +1,73 @@
+import { DebugElement } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { CoreTestingModule, setupTestBed } from 'core/testing';
+
+import { DisplayRichTextWidgetComponent } from './display-rich-text.widget';
+
+describe('DisplayRichTextWidgetComponent', () => {
+    let widget: DisplayRichTextWidgetComponent;
+    let fixture: ComponentFixture<DisplayRichTextWidgetComponent>;
+    let debugEl: DebugElement;
+
+    const cssSelector = {
+        parsedHTML: '.adf-display-rich-text-widget-parsed-html'
+    };
+
+    const fakeFormField: any = {
+        id: 'fake-form-field',
+        name: 'fake-label',
+        value: {
+            time: 1658154611110,
+            blocks: [
+                {
+                    id: '1',
+                    type: 'header',
+                    data: {
+                        text: 'Editor.js',
+                        level: 1
+                    }
+                }
+            ],
+            version: 1
+        },
+        required: false,
+        readOnly: false,
+        overrideId: false,
+        colspan: 1,
+        placeholder: null,
+        minLength: 0,
+        maxLength: 0,
+        params: {
+            existingColspan: 1,
+            maxColspan: 1
+        }
+    };
+
+    setupTestBed({
+        imports: [
+            CoreTestingModule
+        ]
+    });
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(DisplayRichTextWidgetComponent);
+        widget = fixture.componentInstance;
+        debugEl = fixture.debugElement;
+        widget.field = fakeFormField;
+    });
+
+    it('should create', () => {
+        fixture.detectChanges();
+        expect(widget).toBeTruthy();
+    });
+
+    it('should parse editorjs data to html', async () => {
+        const expectedHtml = '<h1>Editor.js</h1>';
+        fixture.detectChanges();
+        await fixture.whenStable();
+        const parsedHtmlEl = debugEl.query(By.css(cssSelector.parsedHTML));
+        expect(parsedHtmlEl.nativeElement.innerHTML).toEqual(expectedHtml);
+    });
+
+});

lib/core/form/components/widgets/display-rich-text/display-rich-text.widget.ts

@@ -0,0 +1,55 @@
+/*!
+ * @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.
+ */
+
+/* eslint-disable @angular-eslint/component-selector */
+
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { FormService } from '../../../services/form.service';
+import { WidgetComponent } from '../widget.component';
+/* cspell:disable-next-line */
+import * as edjsHTML from 'editorjs-html';
+@Component({
+    selector: 'display-rich-text',
+    templateUrl: './display-rich-text.widget.html',
+    styleUrls: ['./display-rich-text.widget.scss'],
+    host: {
+        '(click)': 'event($event)',
+        '(blur)': 'event($event)',
+        '(change)': 'event($event)',
+        '(focus)': 'event($event)',
+        '(focusin)': 'event($event)',
+        '(focusout)': 'event($event)',
+        '(input)': 'event($event)',
+        '(invalid)': 'event($event)',
+        '(select)': 'event($event)'
+    },
+    encapsulation: ViewEncapsulation.None
+})
+export class DisplayRichTextWidgetComponent extends WidgetComponent implements OnInit {
+
+    parsedHTML: any;
+
+    constructor(public formService: FormService) {
+        super(formService);
+    }
+
+    ngOnInit(): void {
+        /* cspell:disable-next-line */
+        this.parsedHTML = edjsHTML().parseStrict(this.field.value).join('\n');
+    }
+
+}

lib/core/form/components/widgets/index.ts

@@ -48,6 +48,7 @@ import { DateTimeWidgetComponent } from './date-time/date-time.widget';
 import { JsonWidgetComponent } from './json/json.widget';
 import { UploadFolderWidgetComponent } from './upload-folder/upload-folder.widget';
 import { FileViewerWidgetComponent } from './file-viewer/file-viewer.widget';
+import { DisplayRichTextWidgetComponent } from './display-rich-text/display-rich-text.widget';
 
 // core
 export * from './widget.component';
@@ -80,6 +81,7 @@ export * from './date-time/date-time.widget';
 export * from './json/json.widget';
 export * from './upload-folder/upload-folder.widget';
 export * from './file-viewer/file-viewer.widget';
+export * from './display-rich-text/display-rich-text.widget';
 
 // editors (dynamic table)
 export * from './dynamic-table/dynamic-table.widget.model';
@@ -123,7 +125,8 @@ export const WIDGET_DIRECTIVES: any[] = [
     JsonWidgetComponent,
     AmountEditorComponent,
     UploadFolderWidgetComponent,
-    FileViewerWidgetComponent
+    FileViewerWidgetComponent,
+    DisplayRichTextWidgetComponent
 ];
 
 export const MASK_DIRECTIVE: any[] = [