[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

demo-shell/src/app/app.routes.ts

@@ -321,6 +321,10 @@ export const appRoutes: Routes = [
                 path: 'datatable/dnd',
                 loadChildren: () => import('./components/datatable/drag-and-drop/datatable-dnd.module').then(m => m.AppDataTableDndModule)
             },
+            {
+                path: 'rich-text-editor',
+                loadChildren: () => import('./components/rich-text-editor/rich-text-editor.module').then(m => m.AppRichTextEditorModule)
+            },
             {
                 path: 'search',
                 component: SearchResultComponent,

demo-shell/src/app/components/app-layout/app-layout.component.ts

@@ -74,6 +74,7 @@ export class AppLayoutComponent implements OnInit, OnDestroy {
             { href: '/datatable/dnd', icon: 'view_module', title: 'Drag and Drop' },
             { href: '/copy-content', icon: 'view_module', title: 'Copy Content' }
         ]},
+        { href: '/rich-text-editor', icon: 'list_alt', title: 'APP_LAYOUT.RICH_TEXT_EDITOR' },
         { href: '/template-list', icon: 'list_alt', title: 'APP_LAYOUT.TEMPLATE' },
         { href: '/webscript', icon: 'extension', title: 'APP_LAYOUT.WEBSCRIPT' },
         { href: '/tag', icon: 'local_offer', title: 'APP_LAYOUT.TAG' },

demo-shell/src/app/components/rich-text-editor/rich-text-editor.component.html

@@ -0,0 +1,12 @@
+<div class="app-rich-text-editor-container" fxLayout="row wrap" fxLayoutAlign="center start">
+
+    <div fxFlex="50" class="app-rich-text-editor-col app-rich-text-editor-col-sx">
+        <h1 class="app-rich-text-editor-col-title">Rich Text Editor</h1>
+        <adf-rich-text-editor [data]="sampleData" #textEditor></adf-rich-text-editor>
+    </div>
+    <div fxFlex="50" class="app-rich-text-editor-col app-rich-text-editor-col-rx">
+        <h1 class="app-rich-text-editor-col-title">Output Data</h1>
+        <pre class="app-rich-text-editor-output">{{editorOutputData | json}}</pre>
+    </div>
+
+</div>

demo-shell/src/app/components/rich-text-editor/rich-text-editor.component.scss

@@ -0,0 +1,19 @@
+.app-rich-text-editor-container {
+    .app-rich-text-editor-col {
+        padding: 20px;
+
+        &-rx {
+            border-left: 1px dashed var(--theme-primary-color);
+            border-spacing: 5px;
+        }
+
+        &-title {
+            text-align: center;
+        }
+    }
+
+    .app-rich-text-editor-output {
+        max-width: 30vw;
+        overflow-x: scroll;
+    }
+}

demo-shell/src/app/components/rich-text-editor/rich-text-editor.component.ts

@@ -0,0 +1,112 @@
+/*!
+ * @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, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { OutputData } from '@editorjs/editorjs';
+import { RichTextEditorComponent as AdfRichTextEditorComponent } from '@alfresco/adf-core';
+import { takeUntil } from 'rxjs/operators';
+import { Subject } from 'rxjs';
+
+@Component({
+    selector: 'app-rich-text-editor',
+    templateUrl: './rich-text-editor.component.html',
+    styleUrls: ['./rich-text-editor.component.scss']
+})
+export class RichTextEditorComponent implements OnInit, AfterViewInit, OnDestroy {
+
+    @ViewChild('textEditor')
+    textEditor: AdfRichTextEditorComponent;
+
+    onDestroy$ = new Subject<boolean>();
+
+    editorOutputData: OutputData;
+
+    sampleData = {
+        time: 1656674370891,
+        blocks: [
+            {
+                id: '99jwc03ETP',
+                type: 'header',
+                data: {
+                    text: 'Header',
+                    level: 2
+                }
+            },
+            {
+                id: 'ffdulIdU1E',
+                type: 'paragraph',
+                data: {
+                    text: `is simply <mark class="cdx-marker">dummy</mark> text of the <font color="#ff1300">printing</font> and typesetting industry.
+                    <b><i><span class="plus20pc">Lorem</span></i></b> Ipsum has been the industry\'s standard dummy text ever since the 1500s,
+                    when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,
+                    but also the leap into electronic typesetting, remaining essentially <font color="#0070ff"><b>unchanged</b></font>.
+                    It was <u class="cdx-underline">popularised</u> in the 1960s with the release of sheets containing
+                    <a href="#testlink">Lorem</a> Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem`,
+                    alignment: 'left'
+                }
+            },
+            {
+                id: 'rTcF4u0pr3',
+                type: 'list',
+                data: {
+                    style: 'unordered',
+                    items: [
+                        'Unordered list <b><u class="cdx-underline">example</u></b>',
+                        'Unordered list example'
+                    ]
+                }
+            },
+            {
+                id: 'Kg2e_K1nHU',
+                type: 'list',
+                data: {
+                    style: 'ordered',
+                    items: [
+                        'Ordered list <u class="cdx-underline">example</u>',
+                        '<span class="plus20pc"><a href="#"><font color="#a43eb1">Ordered</font></a></span> list example'
+                    ]
+                }
+            },
+            {
+                id: 'xqqk0DEmqh',
+                type: 'code',
+                data: {
+                    code: '// Amazing code example\n\ncatch(Exception ex){\n   // Houston, we have a problem\n}'
+                }
+            }
+        ]
+    };
+
+    constructor() { }
+
+    ngOnInit(): void {
+    }
+
+    ngAfterViewInit(): void {
+        this.textEditor.outputData$.pipe(
+            takeUntil(this.onDestroy$)
+        ).subscribe(outputData => {
+            this.editorOutputData = outputData;
+        });
+    }
+
+    ngOnDestroy(): void {
+        this.onDestroy$.next(true);
+        this.onDestroy$.complete();
+    }
+
+}

demo-shell/src/app/components/rich-text-editor/rich-text-editor.module.ts

@@ -0,0 +1,43 @@
+/*!
+ * @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';
+import { ContentModule } from '@alfresco/adf-content-services';
+import { CoreModule } from '@alfresco/adf-core';
+import { RouterModule, Routes } from '@angular/router';
+import { FlexLayoutModule } from '@angular/flex-layout';
+
+const routes: Routes = [
+    {
+        path: '',
+        component: RichTextEditorComponent
+    }
+];
+
+@NgModule({
+    declarations: [RichTextEditorComponent],
+    imports: [
+        CommonModule,
+        CoreModule,
+        RouterModule.forChild(routes),
+        ContentModule.forChild(),
+        FlexLayoutModule
+    ]
+})
+export class AppRichTextEditorModule { }