diff --git a/docs/process-services-cloud/rich-text-editor.md b/docs/process-services-cloud/rich-text-editor.md index 62ad4b355c..07c047b0c8 100644 --- 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 index dd7eda98f4..cefecc7663 100644 --- 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 index af1f02a200..f0e2d7a71e 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 @@ -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; @@ -46,7 +60,7 @@ export default { const template: StoryFn = (args) => ({ props: args, template: ` - +

Output data from editor:

@@ -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 index a35b319759..7e9b9ec411 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 @@ -31,6 +31,12 @@ export class RichTextEditorComponent implements OnInit, OnDestroy, AfterViewInit @Input() data: OutputData; + @Input() + placeholder = ''; + + @Input() + autoFocus = false; + private _outputData = new Subject(); 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 index 6d1822780d..9ff63b34e0 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index de78ea4bdb..839848c238 100644 --- 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",