[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

package.json

@@ -84,6 +84,10 @@
     "@angular/platform-browser-dynamic": "^10.0.4",
     "@angular/router": "^10.0.4",
     "@apollo/client": "^3.5.6",
+    "@editorjs/editorjs": "2.25.0",
+    "@editorjs/header": "2.6.2",
+    "@editorjs/list": "1.7.0",
+    "@editorjs/underline": "1.0.0",
     "@mat-datetimepicker/core": "^5.1.1",
     "@mat-datetimepicker/moment": "^5.1.1",
     "@ngx-translate/core": "^13.0.0",
@@ -94,6 +98,8 @@
     "cropperjs": "1.5.12",
     "custom-event-polyfill": "^1.0.7",
     "dotenv-expand": "^5.1.0",
+    "editorjs-html": "3.4.2",
+    "editorjs-paragraph-with-alignment": "3.0.0",
     "minimatch": "^3.0.4",
     "minimatch-browser": "1.0.0",
     "moment-es6": "^1.0.0",
@@ -116,11 +122,15 @@
     "@angular-eslint/template-parser": "1.2.0",
     "@angular/cli": "^10.2.2",
     "@angular/compiler-cli": "^10.0.12",
+    "@editorjs/code": "2.7.0",
+    "@editorjs/inline-code": "1.3.1",
+    "@editorjs/marker": "1.2.2",
     "@nrwl/schematics": "8.12.11",
     "@nrwl/storybook": "^12.9.0",
     "@nrwl/workspace": "^11.2.11",
     "@paperist/types-remark": "0.1.3",
     "@playwright/test": "^1.19.2",
+    "@quanzo/change-font-size": "1.0.0",
     "@storybook/addon-essentials": "~6.3.0",
     "@storybook/angular": "~6.3.0",
     "@storybook/builder-webpack5": "~6.3.0",
@@ -141,6 +151,7 @@
     "cspell": "^5.5.1",
     "css-loader": "^5.2.6",
     "dotenv": "^8.2.0",
+    "editorjs-text-color-plugin": "1.13.1",
     "eslint": "^7.6.0",
     "eslint-plugin-ban": "^1.6.0",
     "eslint-plugin-import": "2.25.4",