[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
2025-07-24 17:32:15 +00:00 · 2022-07-26 12:36:08 +02:00
parent dafdb4bf59
commit d8f1eda132
32 changed files with 1023 additions and 27 deletions
--- a/lib/core/core.module.ts
+++ b/lib/core/core.module.ts
@@ -62,6 +62,7 @@ import { versionCompatibilityFactory } from './services/version-compatibility-fa
 import { VersionCompatibilityService } from './services/version-compatibility.service';
 import { AlfrescoJsClientsModule } from '@alfresco/adf-core/api';
 import { LegacyApiClientModule } from './api-factories/legacy-api-client.module';
+import { RichTextEditorModule } from './rich-text-editor/rich-text-editor.module';

@NgModule({
    imports: [
@@ -99,7 +100,8 @@ import { LegacyApiClientModule } from './api-factories/legacy-api-client.module'
        SearchTextModule,
        BlankPageModule,
        LegacyApiClientModule,
-        AlfrescoJsClientsModule
+        AlfrescoJsClientsModule,
+        RichTextEditorModule
    ],
    exports: [
        AboutModule,
@@ -134,7 +136,8 @@ import { LegacyApiClientModule } from './api-factories/legacy-api-client.module'
        IconModule,
        NotificationHistoryModule,
        SearchTextModule,
-        BlankPageModule
+        BlankPageModule,
+        RichTextEditorModule
    ]
 })
 export class CoreModule {
--- a/lib/core/form/components/widgets/display-rich-text/display-rich-text.widget.html
+++ b/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>
--- a/lib/core/form/components/widgets/display-rich-text/display-rich-text.widget.scss
+++ b/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%;
+    }
+}
--- a/lib/core/form/components/widgets/display-rich-text/display-rich-text.widget.spec.ts
+++ b/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);
+    });
+
+});
--- a/lib/core/form/components/widgets/display-rich-text/display-rich-text.widget.ts
+++ b/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');
+    }
+
+}
--- a/lib/core/form/components/widgets/index.ts
+++ b/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[] = [
--- a/lib/core/form/services/form-rendering.service.spec.ts
+++ b/lib/core/form/services/form-rendering.service.spec.ts
@@ -22,7 +22,8 @@ import {
    UnknownWidgetComponent,
    UploadWidgetComponent,
    TextWidgetComponent,
-    JsonWidgetComponent
+    JsonWidgetComponent,
+    DisplayRichTextWidgetComponent
 } from './../components/widgets/index';
 import { FormRenderingService } from './form-rendering.service';

@@ -128,4 +129,10 @@ describe('FormRenderingService', () => {
        const type = resolver(null);
        expect(type).toBe(JsonWidgetComponent);
    });
+
+    it('should resolve Display Rich Text widget for display-rich-text field type', () => {
+        const resolver = service.getComponentTypeResolver('display-rich-text');
+        const type = resolver(null);
+        expect(type).toBe(DisplayRichTextWidgetComponent);
+    });
 });
--- a/lib/core/form/services/form-rendering.service.ts
+++ b/lib/core/form/services/form-rendering.service.ts
@@ -49,6 +49,7 @@ export class FormRenderingService extends DynamicComponentMapper {
        document: DynamicComponentResolver.fromType(widgets.DocumentWidgetComponent),
        upload:  DynamicComponentResolver.fromType(widgets.UploadWidgetComponent),
        datetime:  DynamicComponentResolver.fromType(widgets.DateTimeWidgetComponent),
-        'file-viewer': DynamicComponentResolver.fromType(widgets.FileViewerWidgetComponent)
+        'file-viewer': DynamicComponentResolver.fromType(widgets.FileViewerWidgetComponent),
+        'display-rich-text': DynamicComponentResolver.fromType(widgets.DisplayRichTextWidgetComponent)
    };
 }
--- a/lib/core/index.ts
+++ b/lib/core/index.ts
@@ -26,6 +26,7 @@ export * from './language-menu/index';
 export * from './info-drawer/index';
 export * from './data-column/index';
 export * from './datatable/index';
+export * from './rich-text-editor/index';
 export * from './context-menu/index';
 export * from './card-view/index';
 export * from './app-config/index';
--- a/lib/core/mock/form/demo-form.mock.ts
+++ b/lib/core/mock/form/demo-form.mock.ts
@@ -1806,27 +1806,115 @@ export class DemoForm {
                                    }
                                }
                            ],
-                            2: [{
-                                fieldType: 'AttachFileFieldRepresentation',
-                                id: 'attachfiletest',
-                                name: 'attachfiletest',
-                                type: 'upload',
-                                required: true,
-                                colspan: 2,
-                                placeholder: 'attachfile',
-                                params: {
-                                    existingColspan: 2,
-                                    maxColspan: 2,
-                                    fileSource: {
-                                        serviceId: 'local-file',
-                                        name: 'Local File'
+                            2: [
+                                {
+                                    fieldType: 'AttachFileFieldRepresentation',
+                                    id: 'attachfiletest',
+                                    name: 'attachfiletest',
+                                    type: 'upload',
+                                    required: true,
+                                    colspan: 2,
+                                    placeholder: 'attachfile',
+                                    params: {
+                                        existingColspan: 2,
+                                        maxColspan: 2,
+                                        fileSource: {
+                                            serviceId: 'local-file',
+                                            name: 'Local File'
+                                        },
+                                        multiple: true,
+                                        link: false,
+                                        displayableCMProperties: []
                                    },
-                                    multiple: true,
-                                    link: false
-                                },
-                                visibilityCondition: {
+                                    visibilityCondition: {}
                                }
-                            }]
+                            ]
+                        }
+                    },
+                    {
+                        id: 'c23bf7e8-d43c-48b6-86b9-56d174faec4f',
+                        name: 'Label',
+                        type: 'container',
+                        tab: null,
+                        numberOfColumns: 2,
+                        fields: {
+                            1: [
+                                {
+                                    id: 'DisplayRichtext06jsjb',
+                                    name: 'Display Rich text',
+                                    type: 'display-rich-text',
+                                    readOnly: false,
+                                    value: {
+                                        time: 1658423394276,
+                                        blocks: [
+                                            {
+                                                id: 'dry4RE17v_',
+                                                type: 'header',
+                                                data: {
+                                                    text: 'Display Rich Text widget example',
+                                                    level: 1
+                                                }
+                                            },
+                                            {
+                                                id: 'my1r7YmMOs',
+                                                type: 'paragraph',
+                                                data: {
+                                                    text: `<font color="#000000">Is simply a redonly</font><mark class="cdx-marker">
+                                                    <font color="#000000">dummy </font><b>text</b></mark><b></b><font color="#000000">
+                                                    of the </font><i>printing and typesetting</i><font color="#000000"> industry.\n
+                                                    </font><b><i>Lorem</i></b><font color="#000000"> Ipsum has been the industry\'s standard du</font><b>
+                                                    <i>mmy text ever since the 1500s,\n                    when an unknown printer took a galley of type
+                                                    and scrambled it to make a type specime</i></b><font color="#000000">n book. </font><font color="#ff1300">
+                                                    It has survived not only five centuries</font><font color="#000000">,\n
+                                                    but also the leap into </font><u>electronic </u><font color="#000000">typesetting,
+                                                    </font><a href="#kljh">remaining </a><font color="#000000">essentially </font><b>unchanged</b><font color="#000000">.\n
+                                                    It was </font><u class="cdx-underline"><font color="#0070ff">underline</font></u><font color="#000000">&nbsp;
+                                                    in the 1960s with </font><u>the release of sheets</u><font color="#000000"> containing\n
+                                                    </font><a href="#link">Lorem</a><font color="#000000"> Ipsum passages, and more recently with desktop
+                                                    publishing software like Aldus PageMaker including versions of <span class="plus20pc">Lorem</span>,
+                                                    <code class="inline-code">example of inline code</code></font>`
+                                                }
+                                            },
+                                            {
+                                                id: 'vgpY3obXS7',
+                                                type: 'list',
+                                                data: {
+                                                    style: 'unordered',
+                                                    items: [
+                                                        'Unordered list example',
+                                                        'Unordered list example'
+                                                    ]
+                                                }
+                                            },
+                                            {
+                                                id: 'lWR9x3OF1M',
+                                                type: 'list',
+                                                data: {
+                                                    style: 'ordered',
+                                                    items: ['Ordered list example', 'Ordered list example']
+                                                }
+                                            },
+                                            {
+                                                id: 'aeZV7M8sU1',
+                                                type: 'code',
+                                                data: {
+                                                    code: '// Code Block Example\ncatch(Exception ex){\n   // Houston, we have a problem\n}'
+                                                }
+                                            }
+                                        ],
+                                        version: '2.25.0'
+                                    },
+                                    isCustomType: false,
+                                    colspan: 1,
+                                    rowspan: 1,
+                                    visibilityCondition: null,
+                                    params: {
+                                        existingColspan: 1,
+                                        maxColspan: 2
+                                    }
+                                }
+                            ],
+                            2: []
                        }
                    }
                ],
--- a/lib/core/rich-text-editor/editorjs-config.ts
+++ b/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
+    }
+};
--- a/lib/core/rich-text-editor/index.ts
+++ b/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';
--- a/lib/core/rich-text-editor/public-api.ts
+++ b/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';
--- a/lib/core/rich-text-editor/rich-text-editor.component.html
+++ b/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>
--- a/lib/core/rich-text-editor/rich-text-editor.component.scss
+++ b/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;
+            }
+        }
+    }
+}
--- a/lib/core/rich-text-editor/rich-text-editor.component.spec.ts
+++ b/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');
+    });
+
+});
--- a/lib/core/rich-text-editor/rich-text-editor.component.ts
+++ b/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();
+        }
+    }
+
+}
--- a/lib/core/rich-text-editor/rich-text-editor.module.ts
+++ b/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 { }