Changing text alignment (justify, left, right, center) causes incorrect html output

[Jagan-P]

Upon adding text alignment, existing styles get lost. Please see the below video.

Browser information: Google Chrome Version 102.0.5005.115 (Official Build) (64-bit)

https://user-images.githubusercontent.com/31800888/181487290-d7f07122-af48-402e-9858-9872b39200bb.mp4

[KhadijaSaoulajane]

@Jagan-P Did you find a solution to this yet?

[Jagan-P]

@Jagan-P Did you find a solution to this yet?

@KhadijaSaoulajane this is a browser issue. There is a hack to get rid of this. Instead of using the value/ngModel, we can directly make use of the innerHTML property of HTML DOM object which retains all the styles.

[KhadijaSaoulajane]

@Jagan-P Did you find a solution to this yet?

@KhadijaSaoulajane this is a browser issue. There is a hack to get rid of this. Instead of using the value/ngModel, we can directly make use of the innerHTML property of HTML DOM object which retains all the styles.

Yes I actually just solved it by putting the AngularEditorConfig sanitize field to false, and by transforming the innerHTML of the displayed field with transform(xx) and what this function does is : transform(html: string): SafeHtml { return this.domSanitizer.bypassSecurityTrustHtml(html); }

[Jagan-P]

@Jagan-P Did you find a solution to this yet?

@KhadijaSaoulajane this is a browser issue. There is a hack to get rid of this. Instead of using the value/ngModel, we can directly make use of the innerHTML property of HTML DOM object which retains all the styles.

Yes I actually just solved it by putting the AngularEditorConfig sanitize field to false, and by transforming the innerHTML of the displayed field with transform(xx) and what this function does is : transform(html: string): SafeHtml { return this.domSanitizer.bypassSecurityTrustHtml(html); }

If you are disabling sanitizing fields and using bypassSecurityTrustHtml, then make sure that your html is safe. Because this may lead to xss attacks.

[PotatooSalad]

I fixed that with this: this.text = this.text.replace(/style=\"text-align: right;\"/g, 'align="right"'); this.text = this.text.replace(/style=\"text-align: center;\"/g, 'align="center"'); this.text = this.text.replace(/style=\"text-align: left;\"/g, 'align="left"'); this.text = this.sanitizer.sanitize(SecurityContext.HTML, this.text) ?? '';

This bug is funny, because on Firefox changing text alignment puts 'align', but on chromium for some reason it puts 'style=[...]' and DOM Sanitizer erases it. Turn off sanitizing in component confing and doing it on your own is the safest way i found. Is that a dirty hack? Maybe. Does it work? YES.