Missive App
Published in

Missive App

Copy-paste with (some) style

Don’t you hate it when you copy-paste text from the internet and you forget to Paste and Match Style or you get an email from someone who doesn’t know about pasting without copying original styles. You don’t even read the email anymore, because you have keen eyes and you notice a shift of 1–2px in the font size or worse, a sans-serif font becomes serif. 😱

This happens because email client composers are basically web pages that will render any HTML thrown at them. When you copy something from your browser, the clipboard copies the selection and injects inline styles. It is then very awkward to try and get out of that style when continuing typing… I’m sure you’ve been there.

Here’s what your draft will get when copy-pasting this:

Things to notice: font-family is stuck to Times, font-size forced at 64px, etc. At Missive we’re very aware that this is unwanted 99% of the time and that this could easily be prevented if email clients sanitized HTML before pasting. Here’s what our editor actually inserts when pasting the same thing:

We whitelist only a few attributes: font-weight, font-style, text-decoration and href. The rest we don’t keep, no more shift in font size or color!

Left: Missive.app • Right: Mail.app

Another tiny detail that makes for a great experience, with the same example if you only copy the world part, we drop all styles altogether. In other words, when all the whitelisted styles you copy are the same, we drop them. If you were to copy a bold heading from a website, chances are you don’t intend to make it bold in your email. The pasted text will match the style of what you’re currently typing.

Left: Missive.app • Right: Mail.app

Some of you may argue that this is exactly what the Paste and Match Style feature does and that we should leave the choice to the user. While that is an excellent point, we found that our own experience — even as experienced tech-savvy users— was much better and the result is always on par with the craft our email deserves. We bet you’d love it too! Our sanitizer may not support all use cases* yet, let us know if you hit any rough edges.

May your HTML be more hygienic. 😷

*Known bugs: Anything copied from Safari will end up being pasted as plain text. Safari doesn’t support copying HTML yet (it does support pasting it though).

Better at email. Better at chat. Better at work.

We’re on a quest to make Missive the only app your organization needs to manage both internal and external communication. Give it a try and make sure to let us know about your experience!

--

--

--

The one app for team email and chat

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Etienne Lemay

Etienne Lemay

Co-founder & Developer at @missiveapp 📬

More from Medium

Project 1 And A New CSS Framework

Screenshot of DaisyUI link HTML

how to add css pseudo to your react inline styles using radium

Blow away your styles with Tailwind CSS!

Upgrade your Tailwind CSS project to version 3.0