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

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: () => {