diff --git 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 index b6e940d312..697079d0c6 100644 --- 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 @@
-
+
diff --git 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 index dcee1cdd12..b7e0c0bdf9 100644 --- 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; +} diff --git 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 index 1f7585a751..3bea180e3f 100644 --- 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'); - }); }); diff --git 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 index c919e25e0f..39c77df789 100644 --- 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 = (args: RichTextEditorComponent) => ({ props: args, template: ` - +

Output data from editor:

@@ -65,34 +53,28 @@ const template: Story = (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 one of popular text editors.' + type: 'paragraph', + data: { + text: 'The example of text that was written in one of popular 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 -}; diff --git 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 index 2e5bb6a99f..a35b319759 100644 --- 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$ = 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(); } } - } diff --git a/package-lock.json b/package-lock.json index 81ab44d13e..bb764b1b4c 100644 --- 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": { diff --git a/package.json b/package.json index 53d95a965f..1162b6cdb6 100644 --- 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",