Editor: styles from the content of an editor field are leaking out to the base page

[Sovia]

Describe the bug
HCM team is using a tool (Telematry for one) to generate an html document of a .doc or .pdf file. Their use case is wanting to show a resume for candidate applying for a job. So they take exactly what their tool gives them, and it gets saved into our data. So we, unfortunately, aren't the ones trying to manually enter styles.

Use Case
If an editor field has a value that includes a <style> section, or uses classes in their html, the styles will leak into each other.

To Reproduce
Steps to reproduce the behavior:

1. Copy test-html-with-styling.zip into your codebase in app/views/components/editor
2. Go to /components/editor/test-html-with-styling.html
3. See error

Expected behavior
The styles from the base page shouldn't affect the editor content, and the styles from the editor content shouldn't affect the base page.

Version

• ids-enterprise: 4.21.0-dev

Screenshots

The header title and "Some text here" are in the times new roman font, since the contents of the editor set font-family: 'Times New Roman'

Platform

• All

Additional context
Also in that test, I have a commented out suggestion of wrapping the contents of the editor into an iframe (using srcdoc and sandbox). I realize this is a dramatic change, but it does isolate the styles from each other.

[tmcconechy]

This might be very difficult if not impossible. Whats the Use Case? Some initial ideas...

• Have to use a iFrame (easiest workaround)
• You construct the <style> rules you make so EVERYTHING is overridden
• We add a class like ids-enterprise to the front of ALL styles so you have to add this class at the top of the page (breaking change), then you move the editor content outside of this class. See Support configuring top level element #1199 then the page and editor top level content needs to be separated from the editor content somehow so we can add the class to "part" of the editor but not the content.
• Some other way to reset all page styles???

Still it would be impossible other then an Iframe to make a way that whatever you add to the inner style tag wont effect the top of the page. You could do someting like...

<style>
   body {
    background-color: red;  
 }
</style>

So your styles will have to have some top level classes around them and some rules.

[tmcconechy]

Related to #1199

[tmcconechy]

Descoping this issue for now but when #1199 is done this may be possible