Copying from Code Block Inserts Extraneous EOL Characters

[Mark Symons]

When using the syntax highlighter plugin to render code, I have found that if I copy XML code directly from JIRA, then when I paste it elsewhere, then it has picked up extra EOL characters. (I have not tested with anything but XML).

See screenshot. Note that this is copying when viewing the issue… if I EDIT the field and copy from that then there’s no problem... but not everyone has edit permissions, and the edit might accidentally get "saved", resulting in possible unintended changes to the field contents - plus unwanted notifications.

Aside: If I am pasting the copied XML into SoapUI then I can use Alt-F (format XML) in order to tidy things up… but often the pasting is into an email, a text file, etc.

[arm atlassian]

Hi

Looks like we are seeing the same.

Could you please let us know if there are any plans to fix this?

Regards, Areg

[Holger Schimanski]

I can reproduce the problem and would like to fix this issue. But sorry, I don't have any idea, where this is coming from. It looks like this is not coming from bad HTML code generated by the plugin. I have remove all (!) linefeeds in HTML code. No effect... Maybe it has something to do with \r\n handled as duplicate linefeeds? Or is it because I have <td> and <pre> in each line, which are two block elements with two linefeeds?

Any HTML or CSS specialist in your environment who can have a look at this problem?

Best regards, Holger

[Holger Schimanski]

Hm, how about this issue here? Sounds similar... http://stackoverflow.com/questions/24851173/why-does-text-copied-from-a-set-of-pre-tags-have-double-line-breaks?lq=1 Looks like a block element is always adding two line feeds?

[Mark Symons]

Based on observing that when the macro is configured for "collapse" then you provide a nice little "show all" link, would it be possible to have a link for "copy all"?

That might help you control what is actually copied.

If nothing else, it might address the separate problem that exists currently... how to copy code and NOT also copy the line numbering provided by the macro (when the macro uses "linenumbers").

[Brian Johnson]

A previous version of the plugin didn't have this issue. Is the wrapping of each line in a distinct PRE tag new?

[Sergei Golubchik]

This is because of PRE. One way to fix it is to remove PRE tags and merge their style with the parent TD style (and add white-space:pre). Like this: Was:

<td style=" line-height: 1.4em !important; padding: 0em; vertical-align: top;">
  <pre style="font-size: 1em; margin: 0 10px;  margin-top: 10px;   width: auto; padding: 0;"><span style="color: black; font-family: 'Consolas', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;">commit 4d0e52189ca945c94146035c2733d85c9c6fd18d</span></pre>
</td>

Now:

<td style=" line-height: 1.4em !important; padding: 0em; vertical-align: top; white-space: pre; font-size: 1em; margin: 0 10px;  margin-top: 10px;   width: auto; padding: 0;"><span style="color: black; font-family: 'Consolas', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;">commit 4d0e52189ca945c94146035c2733d85c9c6fd18d</span></td>

[Holger Schimanski]

Thank you very much for the tip! I need to check, if this works also in email layout of Outlook etc.

[Sergei Golubchik]

Here, I've created a pull request for this: https://bitbucket.org/hski/syntaxplugin-public/pull-requests/13

[Holger Schimanski]

Great! That is really how open source works. Many thanks for your contribution!

While testing layout for different browsers is easy these days, but it is very hard for emails send out by JIRA.

Would it be possible, that you do some testing of layout in Outlook (whatever version) for emails sent out by JIRA on issue create of issue comment?

[Mark Symons]

I can do some testing if there is a new version of the plugin. Currently using v2.2.0,

I have Outlook client in the office (which has built-in rendering which I guess is based on IE) and I can also use Office365 over the internet and use Chrome or Firefox.

[Holger Schimanski]

Sorry guys, that pull request is incomplete. <pre> in line numbers are still there and therefor no proper layout with line numbers. Also padding layout is not as before.

[Holger Schimanski]

Anyhow @msymons can you give it a try in Outlook using attached version 2.2.1?

[Sergei Golubchik]

Yes, I didn't remove PRE from line numbers, because one cannot correctly copy a code snippet with line numbers anyway. So I thought that PRE doesn't matter. But it adds extra padding, I should've thought of that. Sorry for this.

As a fix you can add a bit of padding to TD elements or remove PRE from line numbers. I don't want to risk another pull request, I think it'll be less work for you just to fix padding instead of merging a pull request.

But if you want a pull request that fixes it — of course, just tell me.

[Holger Schimanski]

I was able to resolve the remaining layout issues with padding. Please find attached an updated version 2.2.1

[Mark Symons]

After updating to v2.2.1 plugin, the rendering in JIRA itself seemed great. Testing with Firefox v45.0, I was able to copy and paste and have no extraneous EOL.

Emails seem problematic... see screenshot. This was in Microsoft Outlook

The obfuscation edits that I did to the screenshot are rather messy - but you can clearly see that there are huge vertical gaps.. about 7 lines each

[Holger Schimanski]

Creating CSS style for emails is really tricky because of limited CSS features implemented by Outlook. * What version of Outlook did you test with? * How about Outlook 365? * Can you identify if it is a problem with extra lines or padding / lineheight or the code?

[Sergei Golubchik]

Any plans to release 2.2.1 ?

[Holger Schimanski]

Not sure what to do with layout problems in Outlook. Do you see ideas, where this is extra gaps are coming from CSS?

[Sergei Golubchik]

Unfortunately, I don't use Outlook (I'm on Linux) so I cannot really test it. I don't even know anyone who does.

[Sergei Golubchik]

Any news?

[Sergei Golubchik]

Any news?

[Sergei Golubchik]

Hallo? Any plans to release 2.2.1 ?

[Holger Schimanski]

I cannot release because this change fixing additional linefeeds with the current CSS approach breaks layout in emails sent by JIRA.

[Sergei Golubchik]

Okay, thanks. I'll see if I can do anything about this layout break. It's only Outlook issue that stops the release right? Or is there anything else?

[Holger Schimanski]

No, nothing else.

[jbick]

So..

1. It seems white-space: pre; forces Outlook (2010 here) to add line breaks. Remove it.
2. The font-family needs to be 'Consolas', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; (without !important).
3. Leading white-spaces are missing then. To add them use   (inside of a span with the given font-family).

It's dirty but it works: I did not change the plugins code. I played with the html produced by it and used the send test email function to test it.

[Holger Schimanski]

Great! Thank you very much for looking at it. Did you use 2.2.1 (attached to this issue) or 2.2.0 as base for your modification?

[jbick]

I've used the second 2.2.1 version posted in this thread.

[Holger Schimanski]

Style white-space: pre is used so that sequences of whitespace will not collapse into a single whitespace. http://www.w3schools.com/cssref/pr_text_white-space.asp (I think that is what you mean with 3. that you need to replace any whitespace char by a nbsp?)

Can you double check white-space influence?

And would white-space: pre-wrap help instead of removing white-space: pre?

[jbick]

I'm sure about the influence of white-space: pre;. Removing it has definitely fixed the issue with extra lines (but it created the problem with indentation etc. - no need to replace all whitespaces, only multiple whitespaces collapse). I'll validate it again tomorrow and I'll change it to white-space: pre-wrap;.

[jbick]

white-space: pre-wrap; without  s: no indentation.

white-space: pre; without  s: indentation exactly as much as in the source code (original problem, source code see below). No idea where the line breaks come from.

This is a block for a single code line:

                                                        <tr id="syntaxplugin_code_and_gutter"> 
                                                            <td style=" line-height: 1.4em !important; padding: 8px 0px; vertical-align: top;  white-space: pre-wrap;  font-size: 1em; margin: 0 10px;  padding-top: 0px;   padding-bottom: 0px;  padding-left: 10px; padding-right: 10px;; padding: 0px; border-collapse: collapse">
                                                                <span style="color: black; font-family: 'Consolas', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;">{</span>
                                                            </td> 
                                                        </tr> 

And this is the corresponding line in the mail: (same amount of spaces left of <span> (as expected because of the white space handling))

                                                                {

I should add that we use JIRA 6.4.13.

[Holger Schimanski]

Maybe it has something to do with line-height: 1.4em !important; I once read somewhere, that Outlook sometimes creates extra space because it set its Word-typical heigh which has something to do with page layout (Outlook uses the Word HTML Rendering Engine).

Instead for line-height maybe we can use 20px instead of 1.4em or completely remove it? Can you play around with it? I don't have Outlook (Windows) in my personal environment, that's why it is extra tricky for me to check.

[jbick]

Hi Holger,

the extra space is extra lines as you can see in this screenshot:

I've found white-space: pre; to be the origin of this because I've removed every single CSS attribute from the code one by one until it worked.

Please note the indentation in the HTML that I've sent earlier. There are 56 spaces in front of the <tr> tag and even more in front of its children. Therefore you can't achive correct indentation only with the CSS attributes of <td> (as long as this source code indentation stays the same).

What's wrong with replacing <space><space> with    as a workaround?

[Holger Schimanski]

I would like to stick with white-space: pre, because otherwise it is not only about <space> to   but also about tabs to convert.

I have played arround with CSS styling moving white-space: pre from <td> one level down to <span> and then invested 5 $ for using HTML email preview capabilities of Campaing Monitor. The results http://holgerschimanski.createsend.com/screens/t/43C38F1A26653DB8 look promissing (don't be confused by the title of the webpage; I just forgot to change the version name before running the test).

So, I have created a new beta release 2.3.0-b1 and attached it to this issue. Could you @jbick, @vuvova, @msymons pick it up and test it in your environment? You testing would be much appriciated!

[jbick]

Hi @hski,

unfortunately indentation does not work in my version of Outlook.

Firefox (4 / 8 spaces):

Outlook (1 / 1 space):

In the source code it shows only one space in a tag left of the returns.

The line is:

                                                                <span style="color: black; white-space: pre; font-family: 'Consolas', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;"> </span><span style="color: #006699; font-weight: bold; white-space: pre; font-family: 'Consolas', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;">return</span><span style="color: black; white-space: pre; font-family: 'Consolas', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;"> foo;</span>

The line should be:

                                                                <span style="color: black; white-space: pre; font-family: 'Consolas', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;">    </span><span style="color: #006699; font-weight: bold; white-space: pre; font-family: 'Consolas', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;">return</span><span style="color: black; white-space: pre; font-family: 'Consolas', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;"> foo;</span>

[Holger Schimanski]

Thank you very much for testing! At least no extra lines are introduced by Outlook anymore. But looks like Outlook merges multiple space into one even with white-space:pre. (The Plugin renders content for email and browser in the same way. If something is shown differently, then this is because of differences in rendering engines of various versions of email and webbrowsers.) What version of Outlook are you using? Can you check behaviour when using tabs in getFoo()?

[Rudy Holtkamp]

Hi, we also saw this issue when copying text which was between {noformat} tags from a Firefox browser to a text editor. Note that with Chrome the issue has not been seen.

[jbick]

Hi Holger, we're using Outlook 2010. It does not merge spaces for every mail. I double checked by using the "send a test email" function of JIRA that I mentioned before (/secure/admin/OutgoingMailServers.jspa) with a corrected source code (see last comment). Spaces are not merged. Therefore there must be a difference either in the way the plugin produces HTML or how JIRA processes mails (notifications vs. test mail - function) as Outlook is capable of displaying multiple spaces.

[jbick]

Proof:

Outlook manually (HTML source code change, test email function => 4 / 8 spaces):

[jbick]

Just wanted to ask if you need any addition information / testing :)

[Rudy Holtkamp]

We use version 2.3.0-b1 and no problem has been seen anymore.