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

* AAE-22612 Fix Rich Text color picker * remove readOnly input from editor
2025-05-26 17:24:56 +00:00 · 2024-05-21 09:06:28 +02:00 · 2024-05-21 09:06:28 +02:00 · 015a4e3cc6
commit 015a4e3cc6
parent 7b6684b0ec
7 changed files with 41 additions and 79 deletions
--- a/lib/process-services-cloud/src/lib/rich-text-editor/rich-text-editor.component.html
+++ b/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>
--- a/lib/process-services-cloud/src/lib/rich-text-editor/rich-text-editor.component.scss
+++ b/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;
+}
--- a/lib/process-services-cloud/src/lib/rich-text-editor/rich-text-editor.component.spec.ts
+++ b/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');
-    });
 });
--- a/lib/process-services-cloud/src/lib/rich-text-editor/rich-text-editor.component.stories.ts
+++ b/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
-};
--- a/lib/process-services-cloud/src/lib/rich-text-editor/rich-text-editor.component.ts
+++ b/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();
        }
    }
-
 }
--- a/package-lock.json
+++ b/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",
-      "resolved": "https://registry.npmjs.org/@editorjs/editorjs/-/editorjs-2.29.0.tgz",
-      "integrity": "sha512-w2BVboSHokMBd/cAOZn0UU328o3gSZ8XUvFPA2e9+ciIGKILiRSPB70kkNdmhHkuNS3q2px+vdaIFaywBl7wGA==",
+      "version": "2.28.2",
+      "resolved": "https://registry.npmjs.org/@editorjs/editorjs/-/editorjs-2.28.2.tgz",
+      "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",
-      "resolved": "https://registry.npmjs.org/editorjs-text-color-plugin/-/editorjs-text-color-plugin-2.0.4.tgz",
-      "integrity": "sha512-QpibTkOxs3ndlKNOLT8ZlC4ktc3/eKIajiLO0Jm/hh9AJug/CrM1/rAvHy+ldfUKavbWeI+YZvgjad0YTyoyGw==",
+      "version": "1.13.1",
+      "resolved": "https://registry.npmjs.org/editorjs-text-color-plugin/-/editorjs-text-color-plugin-1.13.1.tgz",
+      "integrity": "sha512-iCK274omDhoU7/zIFwV1fP5ydgfObYXSGV+q2zlFq3D4JDnvtn0KP+6NPM1A4dDlxTczpywPByRKIwmf7z4CIg==",
      "dev": true
    },
    "node_modules/ee-first": {
--- a/package.json
+++ b/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",