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

Alfresco · Sep 16, 2024 · 02587ec · 02587ec
1 parent 6cb3b58
commit 02587ec
Show file tree

Hide file tree

Showing 6 changed files with 81 additions and 4 deletions.
diff --git a/docs/process-services-cloud/rich-text-editor.md b/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 |
diff --git a/lib/process-services-cloud/src/lib/rich-text-editor/editorjs-config.ts b/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
     }
 };
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
@@ -39,14 +39,28 @@ 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>;
 
 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
 };
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
@@ -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: () => {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/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",