To reproduce:
- Run the MVCE snippet on both Firefox desktop and Chrome desktop
- Open FF desktop, then copy "foobar" from source
- Open Chrome desktop, and paste into target (after the colon in
here:
)
window.onload = function() {
const info = document.querySelector('.info'),
pinfo = document.querySelector('.paste-info'),
target = document.querySelector('.target');
setInterval(() => {
const sel = ".source *, .target *"
info.innerHTML = '';
for (const elm of [...document.querySelectorAll(sel)]) {
info.innerHTML += "TAG: " + elm.tagName + "; TEXT: " + elm.innerText + "; FONTSIZE: " + window.getComputedStyle(elm)['font-size'] + "<br>";
}
}, 1000);
target.addEventListener('paste', function(e) {
pinfo.innerHTML += "PASTE HTML: <pre>" + e.clipboardData.getData('text/html').replaceAll('<', '<').replaceAll('>', '>') + '</pre><br>';
});
};
div[contenteditable] {
border: 1px solid black;
}
<div class="source" contenteditable=true>Source text: <b>foobar</b></div>
<div style="font-size: 14px">
<div contenteditable=true class="target">Destination, <h1>paste here:</h1></div>
</div>
<div class="info"></div>
<div class="paste-info"></div>
You will notice that:
- Clipboard data contains
<b>foobar</b>
(see content afterPASTE HTML:
), but... - the actually pasted HTML has
style="font-size: 14px;"
set on theb
old element (The 14px size comes from the parent of the contenteditable)
I expect the pasted HTML to not have any font sizes set on it, because they were not specified in the source clipboard data.
Question: How to force Chrome to not put any font sizes on the pasted HTML, when there is no font-size present on the source HTML?
I tried one workaround: to set font-size: unset/revert
on the source, but it causes font-size: unset
to also be present in the pasted HTML. I prefer to not have any font-size to be present in the pasted HTML.
The context of this code is a Chrome extension, and I control the text/html data that is pasted into the target. I can attach a paste event listeners on the target contenteditable. But I cannot alter the HTML/styles of contents after it has been pasted.
from Prevent Chrome from setting font size on HTML paste into contenteditable
No comments:
Post a Comment