AAE-22612 Fix Rich Text color picker (#9688)

* AAE-22612 Fix Rich Text color picker

* remove readOnly input from editor

lib/process-services-cloud/src/lib/rich-text-editor/rich-text-editor.component.html

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

lib/process-services-cloud/src/lib/rich-text-editor/rich-text-editor.component.scss

@@ -9,3 +9,9 @@
         }
     }
 }
+
+xy-color-picker {
+    background-color: transparent;
+    margin-left: 150px;
+    width: 22px;
+}

lib/process-services-cloud/src/lib/rich-text-editor/rich-text-editor.component.spec.ts

@@ -105,20 +105,4 @@ describe('RichTextEditorComponent', () => {
 
         expect(destroyEditorSpy).not.toHaveBeenCalled();
     });
-
-    it('should add readonly class if readOnly is set to true', async () => {
-        component.readOnly = true;
-        await whenEditorIsReady();
-
-        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;
-        await whenEditorIsReady();
-
-        const editorEl = debugElement.query(By.css(cssSelectors.editorJsElement));
-        expect(editorEl.nativeElement.classList).not.toContain('readonly');
-    });
 });

lib/process-services-cloud/src/lib/rich-text-editor/rich-text-editor.component.stories.ts

@@ -19,7 +19,6 @@ import { RichTextEditorModule } from './rich-text-editor.module';
 import { Meta, moduleMetadata, Story } from '@storybook/angular';
 import { ProcessServicesCloudStoryModule } from '../testing/process-services-cloud-story.module';
 import { RichTextEditorComponent } from './rich-text-editor.component';
-import { exampleData } from './mocks/rich-text-editor.mock';
 
 export default {
     component: RichTextEditorComponent,
@@ -36,14 +35,6 @@ export default {
             table: {
                 type: { summary: 'OutputData' }
             }
-        },
-        readOnly: {
-            control: 'boolean',
-            defaultValue: false,
-            table: {
-                type: { summary: 'boolean' },
-                defaultValue: { summary: 'false' }
-            }
         }
     }
 } as Meta;
@@ -51,10 +42,7 @@ export default {
 const template: Story<RichTextEditorComponent> = (args: RichTextEditorComponent) => ({
     props: args,
     template: `
-    <adf-cloud-rich-text-editor
-        [data]=data
-        [readOnly]=readOnly
-        #editor >
+    <adf-cloud-rich-text-editor [data]=data #editor>
     </adf-cloud-rich-text-editor>
     <hr/>
     <h3>Output data from editor:</h3>
@@ -65,34 +53,28 @@ const template: Story<RichTextEditorComponent> = (args: RichTextEditorComponent)
 export const defaultRichTextEditor = template.bind({});
 defaultRichTextEditor.args = {
     data: {
-        time : 1550476186479,
-        blocks : [
+        time: 1550476186479,
+        blocks: [
             {
-                type : 'paragraph',
-                data : {
-                    text : 'The example of text that was written in <b>one of popular</b> text editors.'
+                type: 'paragraph',
+                data: {
+                    text: 'The example of text that was written in <b>one of popular</b> text editors.'
                 }
             },
             {
-                type : 'header',
-                data : {
-                    text : 'With the header of course',
-                    level : 2
+                type: 'header',
+                data: {
+                    text: 'With the header of course',
+                    level: 2
                 }
             },
             {
-                type : 'paragraph',
-                data : {
-                    text : 'So what do we have?'
+                type: 'paragraph',
+                data: {
+                    text: 'So what do we have?'
                 }
             }
         ],
-        version : '2.29.0'
+        version: '2.29.0'
     }
 };
-
-export const readOnlyRichTextEditor = template.bind({});
-readOnlyRichTextEditor.args = {
-    readOnly: true,
-    data: exampleData
-};

lib/process-services-cloud/src/lib/rich-text-editor/rich-text-editor.component.ts

@@ -28,13 +28,9 @@ import { editorJsConfig } from './editorjs-config';
     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();
@@ -43,9 +39,6 @@ export class RichTextEditorComponent implements OnInit, OnDestroy, AfterViewInit
     dynamicId: string;
     isReady = false;
 
-    constructor() {
-    }
-
     ngOnInit(): void {
         this.dynamicId = `editorjs-${crypto.getRandomValues(new Uint32Array(1))}`;
     }
@@ -55,27 +48,25 @@ export class RichTextEditorComponent implements OnInit, OnDestroy, AfterViewInit
             holder: this.dynamicId,
             ...editorJsConfig,
             data: this.data,
-            readOnly: this.readOnly,
             onChange: () => {
-                if (!this.readOnly) {
-                    this.sendEditorOutputData();
-                }
+                this.sendEditorOutputData();
             },
             onReady: () => {
                 this.isReady = true;
-                if (!this.readOnly) {
-                    this.sendEditorOutputData();
-                }
+                this.sendEditorOutputData();
             }
         } as any);
     }
 
     private sendEditorOutputData() {
-        this.editorInstance.save().then((outputData) => {
-            this._outputData.next(outputData);
-        }).catch((error) => {
-            console.error('Saving failed: ', error);
-        });
+        this.editorInstance
+            .save()
+            .then((outputData) => {
+                this._outputData.next(outputData);
+            })
+            .catch((error) => {
+                console.error('Saving failed: ', error);
+            });
     }
 
     getEditorContent() {
@@ -87,5 +78,4 @@ export class RichTextEditorComponent implements OnInit, OnDestroy, AfterViewInit
             this.editorInstance.destroy();
         }
     }
-
 }