#2529 Copying code from Firefox mangles newlines
Opened by sanqui. Modified

For example, copying a portion of this file:

https://pagure.io/pagure/blob/master/f/setup.py

results in the following in the clipboard:

#!/usr/bin/env python
"""
Setup script
"""
# Required to build on EL6
__requires__ = ['SQLAlchemy >= 0.8', 'jinja2 >= 2.4']
import pkg_resources
import os
import re
from setuptools import setup
pagurefile = os.path.join(os.path.dirname(__file__), 'pagure', '__init__.py')
# Thanks to SQLAlchemy:
# https://github.com/zzzeek/sqlalchemy/blob/master/setup.py#L104
with open(pagurefile) as stream:
    __version__ = re.compile(
        r".*__version__ = '(.*?)'", re.S
    ).match(stream.read()).group(1)

It is desirable that the newlines are preserved correctly.

This problem is not present with Chrome.


Would you have any idea on how to fix this? Otherwise I'd recommend you use the Raw view to copy text :)

The problem seems to be the <pre> tag in each row of the code:

<tbody><tr><td class="cell1"><a id="_1" href="#_1" data-line-number="1"></a></td>
<td class="cell2"><pre><span style="color: #8f5902; font-style: italic">#!/usr/bin/env python</span></pre></td>
</tr>
<tr><td class="cell1"><a id="_2" href="#_2" data-line-number="2"></a></td>
</tr><tr><td class="cell1"><a id="_3" href="#_3" data-line-number="3"></a></td>
<td class="cell2"><pre><span style="color: #8f5902; font-style: italic">"""</span></pre></td>
</tr>
<tr><td class="cell1"><a id="_4" href="#_4" data-line-number="4"></a></td>
<td class="cell2"><pre><span style="color: #8f5902; font-style: italic">Setup script</span></pre></td>
</tr>

<pre> is a block element. Semantically, Firefox puts extra newlines around one.

There are multiple fixes possible here but generally the block element needs to go. You could set display: inline; onto the <pre>. Or you could change the <pre> to a <span> and set a monospace font with CSS, as well as a pre-like white-space property.

It may also be necessary to include a <td> for empty rows, which is not currently done.

Correction: seems like just adding display: inline; to <pre> isn't enough to change the behavior in Firefox. So the best path is probably to switch to <span> with font-family: monospace and white-space: pre (or pre-wrap).

Would you like to make a PR for this?

I'll give it a shot :)

Metadata Update from @pingou:
- Issue tagged with: bug

I don't think using span is a good solution. pre is semantically correct. \<pre>\<code> even better. I can dig around and see if the is another solution.

Did either of you find a solution for this one?

looking at the html as rendered, I see:

  1. a lot of CR's, particularly after close tags for TD and TR. In trying to do multi-browser similar rendering in the past, I have had to go in and get rid of those to get similar appearances. This is a 'practical' real world, rather than a 'against the specification' observation

  2. it is intentional to have 'line by line' PRE pairs? :

"""
Setup script
"""

Instead of changing the underlying html, we could use a javascript listener on copy event to clean the copied text and achieve this

Metadata Update from @wombelix:
- Issue set to the milestone: 6.0

Metadata