summernote
summernote copied to clipboard
standard rest font color button resets all other styles
The "reset to default" button in the font colors drop down is using the removeFormat function, so by clicking it, users are expecting to reset only the font color, it resets and removes instead all kind of styles like font-weight for bold, font-family, italic text style, all. Is there anyhow to fix this? Am using summernote-lite v0.8.20 it's even reproducable on the summernote's demo page.
I worked out why all the styles are removed, there is no function to remove individual styles. So I am now working on a PR to implement this.
Edit: It turns out there actually is an all encompasing, execute any of the execCommand functions. However, it looks as the command function to remove certain features, such as removing the format, behaves differently for each browser, and while the correct values are passed which should reset the colour, it's not working as expected.
Font style also includes bold, italic, etc. See CSS documentation https://developer.mozilla.org/en-US/docs/Web/CSS/font-style Font style is not only the font itself.
From a lot of the issues regarding removing just the foreColor from an element, I discerned that the execCommand
has the ability to remove just that using execCommand('removeFormate', false, 'foreColor')
, however, it often fails due to the function working in layers depending on the Browser being used, which is why some of the reports say it works, while others say it remove everything (the most common).
The only way I can see for it to remove the individual styling, would be to check if the element is wrapped in a <font/>
(deprecated but execCommand still uses it in some browsers), or a <span/>
element with the style attribute containing the information for the foreColor (color), or to check if the parent wrapping element contains a style attribute with information for the color, and just remove that/those.
Or come up with some other way to implement changing the text colour, I am right now thinking if it's possible to implement a colour swatch that references to a CSS style, and using vanilla javascript to toggle a class on the containing element or parent to change the colour of the text from a predined swatch of colours. I already have a plugin that toggles styles when on an element the cursor is inside of. https://github.com/DiemenDesign/summernote-classes