Los divs HTML con contentEditable mantienen los estilos aplicados al texto cuando un usuario resalta y copia.

Tengo un div contentEditable donde el texto dentro del div se decora con subrayados a través de estilos en línea en tramos de texto. Actualmente, si un usuario resalta el texto y lo copia, si luego lo pega en otro contenido Editable, por ejemplo, el cuadro de redacción de correo electrónico de Gmail, mantiene los subrayados.

Entonces, por ejemplo, una línea de texto puede verse así (en el 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>

Y una vez que se ha copiado y luego pegado en Gmail, se agrega al DOM como:

 <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>

Lo que significa que dentro del editor de Gmail, que también es contentEditable, permanece el subrayado del div original.

Gmail realiza algún procesamiento aquí para agregar gmail- a la id y la class , pero el punto es que los datos estaban disponibles en el portapapeles.

¿Cómo puedo hacer que cuando un usuario haga una copia regular del div original, resalte el texto y presione CTRL+C o haga clic con el botón derecho -> copiar, solo obtenga el texto (es decir, texto innerText ) en el div y ninguno de los se conserva el marcado?

Esto parece ser solo un problema al copiar entre contentEditables: si la oración anterior se copiara, por ejemplo, en Microsoft Word, sería solo "Este es un ejemplo", sin HTML a su alrededor.

Creo que se puede hacer algo interceptando eventos de copia y posiblemente usando document.execCommand para copiar, pero no estoy seguro de cómo hacerlo. He visto preguntas similares sobre pegar en contentEditables, pero no he encontrado nada sobre detenerlo en la fuente al copiar.