How to Copy-Paste YouTube Comments With Formatting in Firefox

TL;DR: Copy more. Extending your selection outside the comment body will prevent the bug from triggering.

For the last little while, I’d been suffering from an annoying bug where, if I tried to copy and paste YouTube comments, I’d lose all the line breaks and have one big ugly wall of text.

I finally decided to go to Bugzilla and report it, only to discover that someone else had reported it two years ago and there appeared to be no progress, so I decided to see if I could figure out what was going on… and not only did I narrow it down to something actionable, I realized why I had only started to suffer from it much more recently.

YouTube serves up its comments in a custom HTML element named <yt-formatted-string> and, in the DOM inspector, it looked like the element contained exactly the problem text I getting when I tried to copy and paste.

At first, this had me worried, as visions of custom rendering and esoteric bugs danced through my head bu, as I continued to poke around, I noticed two things:

First, it actually did have the line breaks… but as raw, plaintext newlines (\n in views showed all characters). That prompted a supicion, which revealed the second thing…

They’re using white-space: pre-wrap to ask the browser to render that “plaintext” as it’s meant to be.

It was then I had a bit of a “No. It couldn’t be that simple.” moment.

Sure enough, when I popped over to jsBin and added these active ingredients, I was able to reproduce the bug:

<style>
  div { white-space: pre-wrap; }
</style>
[...]
<div>
  some

  text

  with

  newlines
</div>

Firefox has a bug with copying and pasting any text that’s set to white-space: pre-wrap;!

…but then why didn’t I trigger it before? I actually discovered that completely by accident, when I got a bit sloppy and impatient. If you begin your text selection outside the pre-wrapped element, then it copies properly!

For YouTube, I used to copy the entire comment, including the header, in one go, and then edit out all the cruft that got picked up in between the username and the content, which protected me from the bug.

In hindsight, that does make sense. This isn’t the only circumstance I’ve run into where Firefox may not give the clipboard what you expect if you begin and end your selection in the right place. (I’ve also seen it happen when copy-pasting fragments of <p> tags into my fanfiction quotes bin, which is from a normal website into a contenteditable element in a form, also being rendered by Firefox.)

EDIT: And I’ve now tracked down and reported that other bug too.

CC BY-SA 4.0 How to Copy-Paste YouTube Comments With Formatting in Firefox by Stephan Sokolow is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.

This entry was posted in Web Wandering & Opinion. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

By submitting a comment here you grant this site a perpetual license to reproduce your words and name/web site in attribution under the same terms as the associated post.       Also, please be aware that non-constructive comments will have their URL field erased before being approved in order to combat SEO spam.