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
+    <adf-cloud-rich-text-editor [data]=data #editor>
-        [data]=data
-        [readOnly]=readOnly
-        #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,
+        time: 1550476186479,
-        blocks : [
+        blocks: [
             {
-                type : 'paragraph',
+                type: 'paragraph',
-                data : {
+                data: {
-                    text : 'The example of text that was written in <b>one of popular</b> text editors.'
+                    text: 'The example of text that was written in <b>one of popular</b> text editors.'
                 }
             },
             {
-                type : 'header',
+                type: 'header',
-                data : {
+                data: {
-                    text : 'With the header of course',
+                    text: 'With the header of course',
-                    level : 2
+                    level: 2
                 }
             },
             {
-                type : 'paragraph',
+                type: 'paragraph',
-                data : {
+                data: {
-                    text : 'So what do we have?'
+                    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.editorInstance
-            this._outputData.next(outputData);
+            .save()
-        }).catch((error) => {
+            .then((outputData) => {
-            console.error('Saving failed: ', error);
+                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();
         }
     }
-
 }

package-lock.json

@@ -56,7 +56,7 @@
         "@angular/cli": "~14.2.12",
         "@angular/compiler-cli": "14.1.3",
         "@editorjs/code": "2.9.0",
-        "@editorjs/editorjs": "^2.29.0",
+        "@editorjs/editorjs": "^2.28.2",
         "@editorjs/header": "2.8.1",
         "@editorjs/inline-code": "1.5.0",
         "@editorjs/list": "1.9.0",
@@ -96,7 +96,7 @@
         "dotenv": "16.4.5",
         "editorjs-html": "3.4.3",
         "editorjs-paragraph-with-alignment": "3.0.0",
-        "editorjs-text-color-plugin": "2.0.4",
+        "editorjs-text-color-plugin": "1.13.1",
         "ejs": "^3.1.10",
         "eslint": "^8.47.0",
         "eslint-config-prettier": "^8.10.0",
@@ -4502,9 +4502,9 @@
       }
     },
     "node_modules/@editorjs/editorjs": {
-      "version": "2.29.0",
+      "version": "2.28.2",
-      "resolved": "https://registry.npmjs.org/@editorjs/editorjs/-/editorjs-2.29.0.tgz",
+      "resolved": "https://registry.npmjs.org/@editorjs/editorjs/-/editorjs-2.28.2.tgz",
-      "integrity": "sha512-w2BVboSHokMBd/cAOZn0UU328o3gSZ8XUvFPA2e9+ciIGKILiRSPB70kkNdmhHkuNS3q2px+vdaIFaywBl7wGA==",
+      "integrity": "sha512-g6V0Nd3W9IIWMpvxDNTssQ6e4kxBp1Y0W4GIf8cXRlmcBp3TUjrgCYJQmNy3l2a6ZzhyBAoVSe8krJEq4g7PQw==",
       "dev": true
     },
     "node_modules/@editorjs/header": {
@@ -30545,9 +30545,9 @@
       "license": "MIT"
     },
     "node_modules/editorjs-text-color-plugin": {
-      "version": "2.0.4",
+      "version": "1.13.1",
-      "resolved": "https://registry.npmjs.org/editorjs-text-color-plugin/-/editorjs-text-color-plugin-2.0.4.tgz",
+      "resolved": "https://registry.npmjs.org/editorjs-text-color-plugin/-/editorjs-text-color-plugin-1.13.1.tgz",
-      "integrity": "sha512-QpibTkOxs3ndlKNOLT8ZlC4ktc3/eKIajiLO0Jm/hh9AJug/CrM1/rAvHy+ldfUKavbWeI+YZvgjad0YTyoyGw==",
+      "integrity": "sha512-iCK274omDhoU7/zIFwV1fP5ydgfObYXSGV+q2zlFq3D4JDnvtn0KP+6NPM1A4dDlxTczpywPByRKIwmf7z4CIg==",
       "dev": true
     },
     "node_modules/ee-first": {

package.json

@@ -101,7 +101,7 @@
     "@angular/cli": "~14.2.12",
     "@angular/compiler-cli": "14.1.3",
     "@editorjs/code": "2.9.0",
-    "@editorjs/editorjs": "^2.29.0",
+    "@editorjs/editorjs": "^2.28.2",
     "@editorjs/header": "2.8.1",
     "@editorjs/inline-code": "1.5.0",
     "@editorjs/list": "1.9.0",
@@ -141,7 +141,7 @@
     "dotenv": "16.4.5",
     "editorjs-html": "3.4.3",
     "editorjs-paragraph-with-alignment": "3.0.0",
-    "editorjs-text-color-plugin": "2.0.4",
+    "editorjs-text-color-plugin": "1.13.1",
     "ejs": "^3.1.10",
     "eslint": "^8.47.0",
     "eslint-config-prettier": "^8.10.0",