inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

AAE-26043 Use text alignment set in rich text editor (#10228)

Browse Source
This commit is contained in:
Pablo Martinez
2024-09-18 10:42:25 +02:00
committed by GitHub
parent 59818226aa
commit 0bb2fc9253
2 changed files with 28 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
lib/process-services-cloud/src/lib/form/components/widgets/display-rich-text/display-rich-text.widget.spec.ts
View File

@@ -49,6 +49,11 @@ describe('DisplayRichTextWidgetComponent', () => {
type: 'paragraph', type: 'paragraph',
data: { data: {
text: 'Display some <font color="#ff1300">formatted</font> <mark class="cdx-marker">text</mark>' text: 'Display some <font color="#ff1300">formatted</font> <mark class="cdx-marker">text</mark>'
},
tunes: {
anyTuneName: {
alignment: 'left'
}
} }
} }
], ],
@@ -90,7 +95,8 @@ describe('DisplayRichTextWidgetComponent', () => {
}); });
it('should parse editorjs data to html', async () => { it('should parse editorjs data to html', async () => {
const expectedHtml = '<h1>Editor.js</h1><p>Display some <font color="#ff1300">formatted</font> <mark class="cdx-marker">text</mark></p>'; const expectedHtml =
'<h1>Editor.js</h1><p class="ce-tune-alignment--left">Display some <font color="#ff1300">formatted</font> <mark class="cdx-marker">text</mark></p>';
fixture.detectChanges(); fixture.detectChanges();
await fixture.whenStable(); await fixture.whenStable();

22
lib/process-services-cloud/src/lib/form/components/widgets/display-rich-text/display-rich-text.widget.ts
View File

@@ -42,12 +42,32 @@ import { DomSanitizer } from '@angular/platform-browser';
export class DisplayRichTextWidgetComponent extends WidgetComponent implements OnInit { export class DisplayRichTextWidgetComponent extends WidgetComponent implements OnInit {
parsedHTML: any; 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 `<h${data.level} class="ce-tune-alignment--${paragraphAlign}">${data.text}</h${data.level}>`;
} else {
return `<h${data.level}>${data.text}</h${data.level}>`;
}
},
paragraph: ({ data, tunes }): string => {
const paragraphAlign = data.alignment || data.align || tunes?.anyTuneName?.alignment;
if (typeof paragraphAlign !== 'undefined' && ['left', 'right', 'center', 'justify'].includes(paragraphAlign)) {
return `<p class="ce-tune-alignment--${paragraphAlign}">${data.text}</p>`;
} else {
return `<p>${data.text}</p>`;
}
}
};
constructor(public formService: FormService, private readonly sanitizer: DomSanitizer) { constructor(public formService: FormService, private readonly sanitizer: DomSanitizer) {
super(formService); super(formService);
} }
ngOnInit(): void { ngOnInit(): void {
this.parsedHTML = edjsHTML().parseStrict(this.field.value); this.parsedHTML = edjsHTML(DisplayRichTextWidgetComponent.CUSTOM_PARSER).parseStrict(this.field.value);
if (!(this.parsedHTML instanceof Error)) { if (!(this.parsedHTML instanceof Error)) {
this.sanitizeHtmlContent(); this.sanitizeHtmlContent();