Format content so that it looks pretty when copy & pasted

[matrixbot]

Created by @ matthew:matrix.org.

[ara4n]

still some work to be done here, but somewhat improved by the above commit. if chrome ever implements user-select: none correctly (so that contents are ignored if you include them in a selection) then we'll be able to do better.

The only workaround I can see to hide other contents (initial-letter avatars and 6+ style avatar placeholders) is either to break the position-ing somehow to make them incredibly hard to select (ew), or render them as images via canvas (ew).

[WGH-]

Is this the bug about

test message 1Options
23:02test message 2

ending up in the clipboard instead of something more readable?

[rubo77]

It would already help a lot if there were a space or colon after each timestamp and if the word "Options" is not coded in the alt-tag of the options-Button because the title tag is enough to show it on mouseover, but the title tag is not copied into the clipboard.

[richvdh]

It looks like user-select provides a viable solution to this now?

http://caniuse.com/#feat=user-select-none

[ara4n]

user-select doesn't work in general; on Chrome if you drag a selection over a user-select: none area it still copies it to the clipboard. You just can't /start/ dragging the selection in that area. From memory. Need to check if still true.

[rubo77]

It seems like in Chrome the formatting of the Copy Paste seems not that bad.

In Firefox user-select is a solution

[richvdh]

Github's source view presents an interesting solution to this: use an empty element, with a CSS ::before selector with:

.blob-num::before {
    content: attr(data-line-number);
}

... and stick the content in the data-line-number attribute of the element. It's then visible, but not c&p'ed.

[rubo77]

So which is the better solution?

user-select 

or

::before ?

[ara4n]

as per #893 (comment), user-select doesn't work (unless the browsers have fixed it). ::before seems like a nicer soln.

[z3ntu]

#7460 is/was also a bit about this and a PR of mine (matrix-org/matrix-react-sdk#2929) was merged to add user-select: none attributes to several CSS classes that transforms the copy-pasting experience from horrible to not-so-bad ;)
As mentioned in the references issue, it's tested with chromium 73.0.3683.103, electron 4.1.4 and firefox 66.0.3 and it works fine there.

[turt2live]

This is even worse now with reactions:

[jryans]

Hmm, curious, the whole action bar does have user-select: none on it...

[MadLittleMods]

Related issues:

• Can no longer copy timestamps from timeline when highlighting messages #17844
• Copy / paste limited to 60 lines of messages #11673
• Copying and pasting pills can result in UTF-16-mangled BOM insertion (Firefox/Linux) #11525
• Cannot highlight text in replied-to message [reply redesign] #18202
• slightly related, Add copy to clipboard button to the message action bar #10649

Related PRs:

• Copy events from the timeline in an IRC log style format matrix-org/matrix-react-sdk#3370