Thelounge: Copying text has new lines between time, username, and message

[McInkay]

I think this is due to the new layout in chat.

When you copy something like:

09:54 YaManicKill test

What you get copied into your clipboard is:

09:54
YaManicKill
test

This is probably due to the new flexbox layout. Not sure of the best way to do it, we could intercept the copy and remove some of the new lines, but that feels...not great. But I can't think of a better way to do it.

I feel like this should be a blocker for 2.3.0, but if we don't have an idea for a fix this week, maybe not.

[bews]

I think it's because new lines are really there (from .tpl files).

[McInkay]

Nah, we had those before. HTML ignores whitespace.

If you take a look at this pen you'll see that if you have the 3 spans inside a flex container, you can recreate this issue.

[williamboman]

HTML ignores whitespace.

Whitespace between inline blocks will create a margin. A quite common mistake when developing web apps is that one relies on whitespace to position elements (e.g. between an icon and the text inside a button), which works fine in development, but truncated HTML templates in production will exclude those whitespaces and consequently break the UI.

[McInkay]

@williamboman Ok, sure, but that isn't part of the issue we are coming to. I was wrong to say that it ignores whitespace, but in this circumstance, it ignores the specific whitespace. Especially as everything in a flex container becomes a flex block rather than inline, anyway.

[MiniDigger]

heh. noticed that in chrome too. just wanted to check out the codepen on my uni laptop with firefox and I couldn't reproduce it. it does add newlines in edge tho.

[McInkay]

Based on some questions on the internet people seem to agree that the only way to fix this would be to override the copy in JS. Not a great fix, but meh.

[astorije]

@YaManicKill, I fully agree with you on the issue (and agreed before in another issue), but I'm not 100% sure we should take this as part of v2.3.0. I get that this looks like a regression, but I don't know how long it is going to take until we have a fix, tested, reviewed, merged, etc.
So maybe v2.3.1? Not strongly pushing for this or saying we should not fix this, just thinking out loud how we should handle it.

the only way to fix this would be to override the copy in JS. Not a great fix, but meh.

I see where you are coming from, but I think this would actually be a great opportunity. I have been wanting to do that for a while, even before the flex layout, to be able to tweak copy/pasting into an even better outcome:

15:03 <astorije> Lorem ipsum dolor sit amet
15:05 <YaManicKill> Ut enim ad minim veniam

That way we have a better control over what's in the clipboard instead of being subject to potential changes to layout. And wrapping nicks with <> has also advantages over raw IMO.

[McInkay]

I'm not convinced about leaving it till 2.3.1, as I don't like us introducing regressions in a release when we know there's a regression before releasing.

But if there's a majority of @thelounge/maintainers who agree with @astorije , I'll accept it.

[xPaw]

Have you tried `inline-flex?

[bews]

Have you tried `inline-flex?

Doesn't help.

[astorije]

Ok, I tried to play with this a little bit, and couldn't get my head around it. inline-flex did not solve it for me (but maybe I misused it?) and the copy-pasting highjacking, while probably the solution we need, is a bit harder than I thought.

Does anyone want to help with this?

[McInkay]

inline-flex did not solve it for me (but maybe I misused it?)

Nah, this wouldn't solve it. The problem is with Chrome itself, and not with our CSS. The thing is that even using inline-flex, elements within it are neither block nor inline elements. They are, infact, flex elements. Inline flex still gives us flex elements, and it's just down to Chrome deciding what to do with copying text from multiple flex elements. Chrome inserts newlines, firefox does not. I cannot see any way to tell Chrome not to do that other than trying to hijack the copy, which as you've mentioned isn't the simplest thing.

If we don't find a solution in the next few days, we can push it out of 2.3.0. It's not the worst bug in the world, just a little annoying.

[McInkay]

Alright, let's push this to 2.3.1 for just now. I don't think we should wait on this for 2.3.0. We've waited long enough, and it won't be that big a deal, I think.

[astorije]

Agreed. I know I won't be able to spend time on this, so help welcome :)

[xPaw]

I've found that wrapping spans in an additional <div> fixes the issue. Because our .message has flex, it turns all non-blocks into blocks, and adding an additional wrapper does that.

[McInkay]

@xPaw Do you mean doing this:

<div class="msg message" id="msg-136109" data-time="2017-06-03T23:47:13.371Z" data-from="MehBot">
  <div>
    <span class="time tooltipped tooltipped-e" aria-label="4 June 2017, 00:47:13">00:47</span>
  </div>
  <div>
    <span class="from">
      <span role="button" class="user color-32" data-name="YaManicKill">YaManicKill</span>
    </span>
  </div>
  <div>
    <span class="text">Some text</span>
  </div>
</div>

That doesn't work, because we are still copying text across multiple blocks, which is why it inserts the newlines.

[xPaw]

@YaManicKill just a single div around the spans.

[McInkay]

@xPaw Have you tried that here? It does remove that issue, but then they aren't displayed correctly, as we are using flex to arrange them on the screen.

[xPaw]

Yeah I noticed the layout got messed up, but I just commented here to give more info on the issue, and a possible solution we could end up using.

[McInkay]

So, just to update here.

@xPaw found the bug on the chromium bugtracker, and it looks like they aren't going to fix it anytime soon. It appears css -> copy is completely undefined, which is why they do it differently.

So, as a horrible hacky fix (and because we wanted a way to add <> around usernames when someone copies it, I did #1227.

Enjoy.

[starquake]

Seeing as you stopped working on #1227 how do you want to proceed? Would you like to override the copy in JS? Cause I would be okay to give it a shot.

[starquake]

Actually. I think you need JS regardless of how a browser copies stuff. Consider this:

Do you really want this to be copied as:

Hi!
14:41 <starquake> How are you?!
14:41 <lounge-user29>

[McInkay]

Do you really want this to be copied as:

Hi!
14:41 <starquake> How are you?!
14:41 <lounge-user29>

Yes.

[astorije]

@xPaw found the bug on the chromium bugtracker, and it looks like they aren't going to fix it anytime soon. It appears css -> copy is completely undefined, which is why they do it differently.

Do you have a URL for this? I couldn't find it after a full 3-second search 😅

[McInkay]

Do you have a URL for this?

https://bugs.chromium.org/p/chromium/issues/detail?id=573298

Merry Christmas.