AAE-25569 Add text alignment options to the rich text editor (#10208)

docs/process-services-cloud/rich-text-editor.md

@@ -69,4 +69,6 @@ export class RichTextEditorDemo {
 | Name | Type | Default value | Description |
 | ---- | ---- | ------------- | ----------- |
 | data | `OutputData` | null | EditorJs data format (follow the [official documentation](https://editorjs.io/saving-data) ) |
+| placeholder | `string` | '' | Placeholder displayed when the content of the editor is empty (follow the [official documentation](https://editorjs.io/configuration/#placeholder) ) |
+| autofocus | `boolean` | false | Set a Caret to the Editor after initialization (follow the [official documentation](https://editorjs.io/configuration/#autofocus) ) |
 | readOnly | `boolean` | false | If true users won't have the ability to change the document content |

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

@@ -18,12 +18,14 @@
 /** Plugin import */
 import CodeTool from '@editorjs/code';
 import Header from '@editorjs/header';
+import Paragraph from '@editorjs/paragraph';
 import InlineCode from '@editorjs/inline-code';
 import List from '@editorjs/list';
 import Marker from '@editorjs/marker';
 import Underline from '@editorjs/underline';
 import ChangeFontSize from '@quanzo/change-font-size';
 import ColorPlugin from 'editorjs-text-color-plugin';
+import AlignmentTuneTool from 'editorjs-text-alignment-blocktune';
 
 export const editorJsConfig = {
     autofocus: true,
@@ -35,7 +37,13 @@ export const editorJsConfig = {
         },
         header: {
             class: Header,
-            inlineToolbar: true
+            inlineToolbar: true,
+            tunes: ['anyTuneName']
+        },
+        paragraph: {
+            class: Paragraph,
+            inlineToolbar: true,
+            tunes: ['anyTuneName']
         },
         list: {
             class: List,
@@ -48,7 +56,25 @@ export const editorJsConfig = {
             class: ColorPlugin,
             config: {
                 customPicker: true,
-                colorCollections: ['#FF1300', '#ffa500', '#9C27B0', '#673AB7', '#3F51B5', '#0070FF', '#03A9F4', '#00BCD4', '#5f9ea0', '#4CAF50', '#8BC34A', '#CDDC39', '#FFF', '#000', '#c0c0c0', '#808080', '#800000'],
+                colorCollections: [
+                    '#FF1300',
+                    '#ffa500',
+                    '#9C27B0',
+                    '#673AB7',
+                    '#3F51B5',
+                    '#0070FF',
+                    '#03A9F4',
+                    '#00BCD4',
+                    '#5f9ea0',
+                    '#4CAF50',
+                    '#8BC34A',
+                    '#CDDC39',
+                    '#FFF',
+                    '#000',
+                    '#c0c0c0',
+                    '#808080',
+                    '#800000'
+                ],
                 defaultColor: '#FF1300',
                 type: 'text'
             }
@@ -67,6 +93,9 @@ export const editorJsConfig = {
             class: InlineCode,
             shortcut: 'CMD+SHIFT+M'
         },
+        anyTuneName: {
+            class: AlignmentTuneTool
+        },
         code: CodeTool
     }
 };

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

@@ -39,6 +39,20 @@ export default {
             table: {
                 type: { summary: 'OutputData' }
             }
+        },
+        placeholder: {
+            control: 'text',
+            description: 'Placeholder text.',
+            table: {
+                type: { summary: 'string' }
+            }
+        },
+        autoFocus: {
+            control: 'boolean',
+            description: 'Focus on the editor when it is loaded.',
+            table: {
+                type: { summary: 'boolean' }
+            }
         }
     }
 } as Meta<RichTextEditorComponent>;
@@ -46,7 +60,7 @@ export default {
 const template: StoryFn<RichTextEditorComponent> = (args) => ({
     props: args,
     template: `
-    <adf-cloud-rich-text-editor [data]=data #editor>
+    <adf-cloud-rich-text-editor [data]=data [placeholder]=placeholder [autofocus]=autofocus #editor>
     </adf-cloud-rich-text-editor>
     <hr/>
     <h3>Output data from editor:</h3>
@@ -80,5 +94,7 @@ DefaultRichTextEditor.args = {
             }
         ],
         version: '2.29.0'
-    }
+    },
+    placeholder: 'Type something here...',
+    autoFocus: true
 };

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

@@ -31,6 +31,12 @@ export class RichTextEditorComponent implements OnInit, OnDestroy, AfterViewInit
     @Input()
     data: OutputData;
 
+    @Input()
+    placeholder = '';
+
+    @Input()
+    autoFocus = false;
+
     private _outputData = new Subject<OutputData>();
 
     outputData$ = this._outputData.asObservable();
@@ -46,6 +52,8 @@ export class RichTextEditorComponent implements OnInit, OnDestroy, AfterViewInit
     ngAfterViewInit(): void {
         this.editorInstance = new EditorJS({
             holder: this.dynamicId,
+            placeholder: this.placeholder,
+            autofocus: this.autoFocus,
             ...editorJsConfig,
             data: this.data,
             onChange: () => {

package-lock.json

@@ -22,6 +22,7 @@
         "@angular/router": "15.2.10",
         "@apollo/client": "^3.10.2",
         "@cspell/eslint-plugin": "^7.3.6",
+        "@editorjs/paragraph": "^2.11.6",
         "@mat-datetimepicker/core": "11.0.3",
         "@ngx-translate/core": "^14.0.0",
         "@storybook/core-server": "8.2.6",
@@ -34,6 +35,7 @@
         "cropperjs": "1.6.2",
         "date-fns": "^2.30.0",
         "dotenv-expand": "^5.1.0",
+        "editorjs-text-alignment-blocktune": "^1.0.3",
         "event-emitter": "^0.3.5",
         "material-icons": "^1.13.12",
         "minimatch-browser": "1.0.0",
@@ -4610,6 +4612,19 @@
         "@codexteam/icons": "^0.0.5"
       }
     },
+    "node_modules/@editorjs/paragraph": {
+      "version": "2.11.6",
+      "resolved": "https://registry.npmjs.org/@editorjs/paragraph/-/paragraph-2.11.6.tgz",
+      "integrity": "sha512-i9B50Ylvh+0ZzUGWIba09PfUXsA00Y//zFZMwqsyaXXKxMluSIJ6ADFJbbK0zaV9Ijx49Xocrlg+CEPRqATk9w==",
+      "dependencies": {
+        "@codexteam/icons": "^0.0.4"
+      }
+    },
+    "node_modules/@editorjs/paragraph/node_modules/@codexteam/icons": {
+      "version": "0.0.4",
+      "resolved": "https://registry.npmjs.org/@codexteam/icons/-/icons-0.0.4.tgz",
+      "integrity": "sha512-V8N/TY2TGyas4wLrPIFq7bcow68b3gu8DfDt1+rrHPtXxcexadKauRJL6eQgfG7Z0LCrN4boLRawR4S9gjIh/Q=="
+    },
     "node_modules/@editorjs/underline": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@editorjs/underline/-/underline-1.1.0.tgz",
@@ -17608,6 +17623,11 @@
       "integrity": "sha512-vSjjB/KUECEBxYqbj9yn1L799L14n0uoKrvk5qfaAokIHB8mYg5hZ8mOTtoS2cJu+xE3QZ/jmHY/Fh0EJeM8ZQ==",
       "dev": true
     },
+    "node_modules/editorjs-text-alignment-blocktune": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/editorjs-text-alignment-blocktune/-/editorjs-text-alignment-blocktune-1.0.3.tgz",
+      "integrity": "sha512-DAJ2LJP+WjETvU4lVOJCqZ1kZkKHp0GkujkqZgza9DRv7bO46m1M/s2d5Ba5hPFdmqk1vA/ci++MQXgWD7mWYw=="
+    },
     "node_modules/editorjs-text-color-plugin": {
       "version": "1.13.1",
       "resolved": "https://registry.npmjs.org/editorjs-text-color-plugin/-/editorjs-text-color-plugin-1.13.1.tgz",

package.json

@@ -42,6 +42,7 @@
     "@angular/router": "15.2.10",
     "@apollo/client": "^3.10.2",
     "@cspell/eslint-plugin": "^7.3.6",
+    "@editorjs/paragraph": "^2.11.6",
     "@mat-datetimepicker/core": "11.0.3",
     "@ngx-translate/core": "^14.0.0",
     "@storybook/core-server": "8.2.6",
@@ -54,6 +55,7 @@
     "cropperjs": "1.6.2",
     "date-fns": "^2.30.0",
     "dotenv-expand": "^5.1.0",
+    "editorjs-text-alignment-blocktune": "^1.0.3",
     "event-emitter": "^0.3.5",
     "material-icons": "^1.13.12",
     "minimatch-browser": "1.0.0",