blackmambahk
commented
6 years ago This issue stems from our setting "user-select" to "on" by default which allows the user to then select any part of the UI markup, allowing markup to be pasted back into the RTE and also maybe a misunderstanding of what "remove formatting" actually does.
So in this case the user action triggers a selection process which is completely handled by the browser it then selects elements following its own internal code.
Regardless of what the user thinks the browser selects the html "Header" element and its child elements and as normal the browser then only highlights the text selected not the elements selected.
Pasting into the RTE will then paste in the frameworks Header element complete with content including Buttons etc, which is what is seen.
This is then selected by the user and the "remove formatting" button is clicked which tells the browser to execute the "removeformat" command.
This command is built into the browser and is standard across browsers, its action are governed by a W3C Editing API, it removes formatting only and its does not remove structural elements. So things like "Br" or "Strong" tags and style attributes and Spans with style are removed but not Div, Header, Footer or any Unknown elements as they are not regarded as "formatting".
In this case the reason nothing changes is that the elements are regarded as structural so are not removed and then the css is being applied by are own stylesheets as it always is and not as style attributes i.e. one of our Buttons is formatted per our own stylesheets as you would expect and it can never be 'removed'.
So the remove formatting command executes successfully even if it is not doing what the user may have in his mind.
So what can we do? 1) We could reduce the problem by setting some things to "user-select:none". For example in this case if I set the Header and Buttons as not selectable but set H1 as selectable then it would behave as the user would expect 2) Eliminate the problem by turning 'user-select' off and then explicitly turning "user-select" on for those elements that can be copied. 3) Strip all html markup being pasted into the RTE 4) Sanitise all html markup being pasted into the RTE by removing specific elements 5) Ignore the browser removeformat command and create our own that removes all markup
or something else????
1) is achievable but doesn't 100% ensure that this situation won't arise again and could leave something not selectable that the user thinks should be selectable, 2) is not practical now as the app is too big to have to sweep through and change 3) is not practical as it would block the user from pasting in html content from other valid sources 4) is achievable but its effectiveness is dependent on exactly what is sanitised and what is not 5) is achievable although it might require more than one attempt to remove all formatting and doesn't prevent the user from saving without attempting to remove formatting and thus our markup ends up in the user content.
So.. thoughts comments?
Also, do you know why the Remove Formatting option doesn't work?
I created a conversation in the AZ site to note the change of primary contact, but the font is all different sizes and has hyperlinks. But I have no way to cleaning it up in the interface.
The only way I can think of is to use Paste and Match Style on a mac or Paste as Plain Text in windows.
Then whats the point of the remove formatting option? Seems like a bug to me.
What's remove formatting?
its supposed to take off any formatting on text and return it to a normal state. if its not working I need the details because I know I have used it and it does work. but there may be a situation its not handling.