The Secret Lives Of Clipboards In The Browser
Something I've wondered about forever is how certain platforms like Google Docs and Notion can take formatted data that was copied from a website and paste it as formatted data somewhere else, and how whenever I pasted it *anywhere else*, it would just show up as plain text. Or how the UK government is able to manipulate things on paste[1]. I could have dug more when I saw this pass through my new feeds, but what was going on under the hood, I never quite dug into enough to understand.
1: How we're saving publishers time by converting formatted text
Then the other day, someone I know who works with Wordpress and Google Docs mentioned that when they copy from a Google Doc to Wordpress, it adds all this weird HTML, and it brought back this question. After a little bit of digging I came upon this really cool tool: the Clipboard Inspector.
With this, you can paste what is in your clipboard and it will show you what is actually in there. And there was a *lot* more than I realized.
I always thought a clipboard item was just a chunk of text saved as just that, and somehow sites were able to interpolate that data using something I couldn't see or was filtered out by other programs. But I realized they save *different types* of data: HTML, metadata, plain text, proprietary data, images, and more.
Try making a Google Doc with lots of formatting, or finding a simple website, copying the contents, and then pasting it into the CLipboard Inspector. Even a simple website will give you two types of data: `text/plain`, and `text/html`.
So now knowing that this data exists, I dug into that site's source on Github and tried to figure out what the mechanism was, and it all came down to the ClipboardEvent in Javascript.
If you watch for a `paste` event, you can then scoop out all the different data using a `getData` function by just calling it by name. Using this, you can get the different data and manipulate it however you want or need to.
For example, this grabs the HTML data, or plain text if the HTML is copied as plain text, and allows you to manipulate it before copying the newly manipulated data back to the clipboard. Using this, I save a friend lots of time having to hand-manipulate plain text back into HTML, and then edit the HTML in specific ways to meet guidelines[2].
document.addEventListener('paste', (e) => {
e.preventDefault();
let pastedHTML = e.clipboardData.getData('text/html');
if (!pastedHTML) {
pastedHTML = e.clipboardData.getData('text/plain');
}
const cleaned = cleanHTML(pastedHTML);
document.getElementById('output').value = cleaned;
navigator.clipboard.writeText(cleaned);
});