Add button to select all text in a preformatted block

We’re moving our internal knowledge base over to Discourse and one thing we’re finding difficult is working with the topics that have a lot of code (usually SQL) in them.

We wrap the code blocks using the preformatted text option to preserve link breaks and enable code highlighting, but then when we need to use the code, the copy/paste is a bit cumbersome due to the horizontal scrolling.

I know that adding an actual copy to clipboard button is a bad idea due to security concerns and a requirement for flash, but would it be possible to add a “select” button that would select all the text in a preformatted text box?

This seems like it might be possible to do according to:

Putting the button in the lower right hand corner of the preformatted block seems like a nice way to handle the UI (replace COPY with SELECT in this example):

7 Likes

There is also now seeming to be support for document.execCommand("copy") even when not in designer/edit mode.

Sure, I think this would be a cool feature, especially for longer blocks, another one would be “full screen” option for code blocks, which makes reading large code blocks way easier.

2 Likes

The preformatted text box might need to gain some height in order for a button to work effectively if the text is just a single line:

Came here looking to see if this was possible. Would be super useful. Wanted to paste a webcal link, which is a long single line. The scrollbar is nice for formatting but it also made copying more difficult so instead I opted for quoting it.

webcal://p07-calendars.icloud.com/published/2/rXPvXJTMckFZitCwW_K-DLBq3SXfawefHgg1L78iPNnafwefK9e25qpya0Sx5XIjiwawfeawefjuzp0RhUhFvMNpa5xrxVvW0Qd-PkqukkFu0XactUi6C2QaNaqD3o

webcal://p07-calendars.icloud.com/published/2/rXPvXJTMckFZitCwW_K-DLBq3SXfawefHgg1L78iPNnafwefK9e25qpya0Sx5XIjiwawfeawefjuzp0RhUhFvMNpa5xrxVvW0Qd-PkqukkFu0XactUi6C2QaNaqD3o

Would also be nice if triple-clicking preformatted text or quoted text would only highlight what’s inside.

I just tried using Firefox latest desktop and triple clicking does just that.

Does it work on the preformatted text? This is what I get in chrome.

Maybe a browser thing rather than a discourse thing? I get an extra line (empty) when I triple click the quoted text.

I think so, I tried using more of my other browsers.
IE11 and Opera 12 - same as Firefox
Chrome and Vivaldi - same as what you posted.

I also noticed when I triple clicked in your post what I previously “gif-ified” it looks like another row or maybe padding appears below the text, but … *

* … I tried a copy-paste of what I selected and Chrome has a newline after the selected text while Firefox doesn’t

Apologies for resurrecting such an old thread… but I thought others might be interested in a working solution. We recently cracked our last hurdle getting it all to work with Ember by running on post cooked rather than DOM ready.

You can try out the feature, grab the code and update your own Discourse forum here:

Enjoy!

6 Likes

I recommend you share that as a custom theme in the #theme category?

Added you to @theme_authors group :slight_smile:

just a small note if you noticed already then my bad.

The copy button seem to be on top of the scroll bar. I can’t click the up arrow without copying :slight_smile:

edit: I just tried again and I can very narrowly click the up arrow.

1 Like

Done :rocket:

https://meta.discourse.org/t/copy-option-for-code-blocks-in-discourse/60961

1 Like

Hi,

also apologies for resurrecting such an old thread, but I believe it would make sense to give you an update on this matter, for all people discovering this discussion when searching for a solution.

In this manner, I would like to refer to the content within another discussion I just added.

Edit

@Dax just made me aware about the fact that this feature is already in Discourse core. Thank you!

With kind regards,
Andreas.

1 Like