Add button to select all text in a preformatted block

(Wes Osborn) #1

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):

COPY option for code blocks in Discourse
(Kane York) #2

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

(Sam Saffron) #3

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.

(Wes Osborn) #4

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:

(Justin Pierce) #5

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.



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

Quote Text button invisible after scrolling right
(Mittineague) #6

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

(Justin Pierce) #7

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.

(Mittineague) #8

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

(Geoff Bowers) #9

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:


(Sam Saffron) #10

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

Added you to @theme_authors group :slight_smile:

(stefan) #11

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.

COPY option for code blocks in Discourse
(Geoff Bowers) #12

Done :rocket: