Si trato de escribir algo de html en el portapapeles usando navigator.clipboard.write , safari lo cambiará mucho, incluida la eliminación de comentarios y la adición de un montón de propiedades css aleatorias. Almaceno metadatos en los comentarios, así que realmente me gustaría que no hicieran eso, de lo contrario, se rompen mis mecanismos de copiar/pegar en la aplicación. ¿Hay alguna manera de copiar html en el portapapeles sin que Safari lo cambie?
const html = "<!-- data in comment --><div>Some content</div>" document.querySelector('button').addEventListener('click', function() { navigator.clipboard.write([new ClipboardItem({ "text/html": new Blob([html], {type: "text/html"}) })]) })https://codepen.io/msfeldstein/pen/jOwEXGw?editors=0010
Resultado Esperado:
<!-- data in comment --><div>Some content</div>Resultado en cromo:
<meta charset='utf-8'><!-- data in comment --><div>Some content</div>Resultado en safari:
<div style="caret-color: rgb(0, 0, 0); color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; text-decoration: none;">Some content</div>Tenga en cuenta que el comentario está totalmente eliminado y necesito los datos allí.
Mirando el código de WebKit, parece que la desinfección/normalización es intencional y no se puede eludir, pero parece que los atributos de los datos se conservan para que pueda pasar los datos adicionales usándolos.
Dependiendo de su caso de uso que no elabore, podría usar, por ejemplo, <div data-settings="data in attribute"></div><div>Some content</div> (incluso los elementos vacíos parecen conservarse), o simplemente establezca el atributo para ese div de ejemplo o use un elemento contenedor en algún nivel.
Para asegurarse de que el elemento no afecte el contenido y tampoco aparezca en el árbol de accesibilidad:
<div data-settings="foo" style="position: absolute; top: -9999px; left: -9999px; visibility: hidden;"></div>WebKit también intenta poner la información de estilo común en el elemento más externo posible, por lo que usar un elemento contenedor hace que los datos sean más fáciles de leer, lo que probablemente facilitará la depuración.
Nota: al usar display: none , se eliminará el elemento del HTML pegado nuevamente. No pude encontrar una lista simple de elementos que se conservan, pero WebKit básicamente trata el HTML pegado como una especie de texto enriquecido. Probablemente debería probar por separado cada elemento que va a usar y traducirlos a divs con atributos de datos si es necesario.