HTML divs with contentEditable keep any styles applied to the text when a user highlights and copies.

I have a contentEditable div where text inside the div becomes decorated with underlines via inline styles on spans of text. Currently if a user highlights the text and copies, if they later paste it into another contentEditable - for example, Gmail's email compose box - it keeps the underlines.

So for example, a line of text may look like (in the DOM):

<span class="underline" 
 id="id-1" 
 style="box-shadow: white 0px 0px 0px 0px inset, 
 rgb(1, 2, 3) 0px -2px 0px 0px inset; 
 background-color: transparent;">This is an example.</span>

And once it has been copied and then pasted into Gmail, it's added to the DOM as:

<span class="gmail-underline" 
 id="gmail-id-1" 
 style="box-shadow: white 0px 0px 0px 0px inset, 
 rgb(1, 2, 3) 0px -2px 0px 0px inset; 
 background-color: transparent;">This is an example.</span>

Which means within Gmail's editor, which is also contentEditable, the underline from the original div remains.

Gmail does some processing here to add gmail- to the id and class, but the point is, that data was available on the clipboard.

How can I make it so that when a user does a regular copy from the original div, highlighting the text and pressing CTRL+C or right click-> copy, they only get the text (i.e. innerText) in the div and none of the markup is retained?

This appears to only be an issue copying between contentEditables - if the above sentence were copied to, say, Microsoft Word, it would just be "This is an example.", no HTML around it.

I believe something can be done with intercepting copy events and possibly using document.execCommand to copy, but am not sure how to do it. I've seen similar questions about pasting into contentEditables, but haven't found anything about stopping it at the source when copying.