Better copy/paste support in admin ui

[mooreds]

Better copy/paste support in admin ui

Problem

I'd like better copy/paste support from the admin UI. I'm often copying and pasting user ids or other long guids and would like the ability to double click on them and have them selected.

On the Users screen I can do so, but it picks up extra whitespace:

917cc000-7126-48c1-a63a-568d596550e7

Solution

I'd like to be able to double click on any id and hit the copy keyboard shortcut and paste it elsewhere with no whitespace or other extraneous text copied.

With a brief google, this looks useful: https://clipboardjs.com/

Alternatives/workarounds

Carefully copy and paste ids, remove extra whitespace.

Additional context

Would need to support major browsers. I am seeing the whitespace issue in latest FF/Mac

https://css-tricks.com/copy-paste-the-web/

Related

• Add A Handy Copy/Paste To Clipboard Button in the Admin UI #1301
• Add 'copy to clipboard' for secrets #1866
• Add a 'copy to clipboard' for settings #1867
• Add copy button to all certificate/key fields in keymaster #2773

How to vote

Please give us a thumbs up or thumbs down as a reaction to help us prioritize this feature. Feel free to comment if you have a particular need or comment on how this feature should work.

[robotdan]

I think there are also ways to do this without JS, it could be that we can put values we think users will want to copy into some semantic tag.

[mooreds]

Comment from another user: Add ‘copy to buffer’ buttons on all your API keys and IDs (e.g. User Id, Application Ids). I’m constantly copying those and it would make my (and probably everybody else’s) life just that much better

[brettwp]

One option would be to add user-select: all; to IDs. This allows selecting the entire ID with one click. It's not obvious this is going to happen, so we might also need some visual clue, color, underline, etc. To help distinguish keys, IDs, etc that will have this behaviour. This could be implemented in addition to an icon + javascript that copies to the clip board.

[robotdan]

What I'd like to do is build a copy widget of some sort that is easily enabled by just adding an attribute to an element.

For example:

<table>
  <tr>
    <td data-copy="42">42</td>
  </tr>
</table>    

And this is just automatically hooked up due to the data-copy attribute. Then anytime we want to add something that is "copiable" we just add data-copy="{copy-value}" and it works. The widget can handle an icon to indicate it is copiable, it can can handle user feedback to let the user know it was copied, etc.

We could optionally also use the JS select range API to select the text we copied, in that case we may just want to copy whatever is in the inner HTML and trim it instead of using a value found in a data- attribute.