diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/display-rich-text/display-rich-text.widget.spec.ts b/lib/process-services-cloud/src/lib/form/components/widgets/display-rich-text/display-rich-text.widget.spec.ts index 24c8212237..cf72fb7d03 100644 --- a/lib/process-services-cloud/src/lib/form/components/widgets/display-rich-text/display-rich-text.widget.spec.ts +++ b/lib/process-services-cloud/src/lib/form/components/widgets/display-rich-text/display-rich-text.widget.spec.ts @@ -49,6 +49,11 @@ describe('DisplayRichTextWidgetComponent', () => { type: 'paragraph', data: { text: 'Display some formatted text' + }, + tunes: { + anyTuneName: { + alignment: 'left' + } } } ], @@ -90,7 +95,8 @@ describe('DisplayRichTextWidgetComponent', () => { }); it('should parse editorjs data to html', async () => { - const expectedHtml = '

Editor.js

Display some formatted text

'; + const expectedHtml = + '

Editor.js

Display some formatted text

'; fixture.detectChanges(); await fixture.whenStable(); diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/display-rich-text/display-rich-text.widget.ts b/lib/process-services-cloud/src/lib/form/components/widgets/display-rich-text/display-rich-text.widget.ts index d9cdd470f5..dbef7784d5 100644 --- a/lib/process-services-cloud/src/lib/form/components/widgets/display-rich-text/display-rich-text.widget.ts +++ b/lib/process-services-cloud/src/lib/form/components/widgets/display-rich-text/display-rich-text.widget.ts @@ -42,12 +42,32 @@ import { DomSanitizer } from '@angular/platform-browser'; export class DisplayRichTextWidgetComponent extends WidgetComponent implements OnInit { parsedHTML: any; + private static readonly CUSTOM_PARSER = { + header: ({ data, tunes }): string => { + const paragraphAlign = data.alignment || data.align || tunes?.anyTuneName?.alignment; + if (typeof paragraphAlign !== 'undefined' && ['left', 'right', 'center'].includes(paragraphAlign)) { + return `${data.text}`; + } else { + return `${data.text}`; + } + }, + paragraph: ({ data, tunes }): string => { + const paragraphAlign = data.alignment || data.align || tunes?.anyTuneName?.alignment; + + if (typeof paragraphAlign !== 'undefined' && ['left', 'right', 'center', 'justify'].includes(paragraphAlign)) { + return `

${data.text}

`; + } else { + return `

${data.text}

`; + } + } + }; + constructor(public formService: FormService, private readonly sanitizer: DomSanitizer) { super(formService); } ngOnInit(): void { - this.parsedHTML = edjsHTML().parseStrict(this.field.value); + this.parsedHTML = edjsHTML(DisplayRichTextWidgetComponent.CUSTOM_PARSER).parseStrict(this.field.value); if (!(this.parsedHTML instanceof Error)) { this.sanitizeHtmlContent();