Hi Daniël,
I am using this component in my project and ran into an issue: I was trying to allow text-decoration, but somehow it always removed this property from the html.So i had a deeper look into the javascript.
Looking at the HtmlSanitizer.js file, line 18 sets the default values for Tags, Attributes and CssStyles.
In CssStyles, the defaults are: 'color', 'background-color', 'font-size', 'text-align', 'font-weight' and 'text-decoration'.All of them work, except for text-decoration.
After some debugging i found the problem:
Text-decoration is a shorthand CSS property, which sets values to other CSS properties (text-decoration-line, text-decoration-color, text-decoration-style, text-decoration-thickness).
When the makeSanitizedCopy() function is called and tries to break down the list of components in the style attribute (Line 76), it retrieves all the properties. So for each of the values, when it tried searching on the AllowedCssStyles all the properties were being blocked because only the shorthand property was there.
I changed the defaults to include all the properties, line 28 is now:
this.AllowedCssStyles = { 'color': true, 'background-color': true, 'font-size': true, 'text-align': true, 'font-weight': true, 'text-decoration': true, 'text-decoration-line': true, 'text-decoration-thickness': true, 'text-decoration-style': true, 'text-decoration-color': true };
Hi André,
Thank you for reporting this. I will have a look at it this weekend and update the component accordingly.
Regards,
Daniel
I implemented your suggested improvement in the latest version. Thanks again for reporting the issue.