Copia componente tema Codeblocks

[justin (Justin DiRose)]

Questo componente del tema è ora deprecato a favore di Copia il contenuto del blocco di codice negli appunti, una funzionalità principale di Discourse.

Anteprima su Theme Creator
Repository Git: https://github.com/discourse/discourse-copy-codeblocks
Come si installa un tema o un componente del tema?

Questo componente del tema aggiunge un pulsante di copia ai blocchi di codice all’interno dei post di Discourse — perfetto per le comunità che condividono esempi di codice o articoli della knowledge base che richiedono la copia del testo.

Su desktop, il pulsante di copia appare al passaggio del mouse sul blocco.

Su mobile, il pulsante di copia è sempre visibile ma sposta il codice nel blocco verso il basso per evitare di oscurare la prima riga di codice se troppo lunga.

Tieni presente che questo funziona solo per i blocchi di codice generati da \ \\, e non per i blocchi di codice in linea.

Questo è un blocco di codice.
Copia questo testo.

Questo è un blocco di codice in linea. La copia non funziona qui.

Un grande ringraziamento a @j.jaffeux, che ha svolto la maggior parte dello sviluppo iniziale di questa funzionalità.

[Falco]

What is the difference between this and COPY option for code blocks in Discourse ?

[j.jaffeux (Joffrey Jaffeux)]

Multiple things:

• doesn’t vendor a full clipboard lib
• doesn’t rely on jQuery
• doesn’t leak event listeners
• doesn’t rely on multiple events
• uses up to date coding standards
• doesn’t have the quoting bug
• …

Not sure if this is working correctly on mobile too.

[xrav3nz]

Awesome!!

Curious if we are open to replacing the localized “copy”/“copied” text with icons? Maybe the copy icon for “copy”, and the checkmark icon for “copied”?

[justin (Justin DiRose)]

I’m open to adding a setting to the component. The reason I decided to go with localized text is it is clear what is happening, plus text can have a shorter height and still be readable. The aesthetic of it seemed to fit the use case better.

[codinghorror (Jeff Atwood)]

@j.jaffeux

Multiple things:

It sounds like we should remove / deprecate one or the other and consolidate effort?

[sam (Sam Saffron)]

Minor, the copied delay is too fast on my iPhone, text should say copied for around 3 seconds prior to flipping back

It does look good

[justin (Justin DiRose)]

Modified here:

https://github.com/discourse/discourse-copy-codeblocks/commit/d1af36a4a5197dab4ca1dd62a05930088882de45

Also fixed a couple of bugs with older versions of Discourse that don’t have @ember/runloop and Promise from the rsvp library available. (Thanks to @jomaxro for the reports on those)

[pfaffman (Jay Pfaffman)]

Sorry, but a isn’t enough this time.

Sweet! This is awesome. This combined with the Discourse-placeholder-theme-component is really cool.

what I just did with it

Replacing A Failed Hard Drive In A Software RAID1 Array

sfdisk -d /dev/=gooddev= | sfdisk /dev/=newdev=
mdadm --manage /dev/md1 --add /dev/=newdev=
mdadm --detail /dev/md1

Watch it work!

while true; do mdadm --detail /dev/md1|grep "Rebuild Status" ; sleep 10;done

Get Power On time for all drives

for x in a b c d ; do smartctl -a /dev/sd$x|grep Power_On; done

[codinghorror (Jeff Atwood)]

I like this a lot! But can the copy button be a visible-on-tap-only thing for mobile? I’m a little bummed by the consistent loss of screen space on mobile, an extra line for each code block:

But then again I realize

• code blocks aren’t that common
• since it’s opt-in you’d only enable it on sites where actually copying code blocks is a common activity as well

… that being said… the odds of any given code block being copied on mobile are vanishingly small, so I feel the ratio of UI to usage is off here, and would prefer an on-tap thing for mobile?

Not urgent.

[j.jaffeux (Joffrey Jaffeux)]

Yes totally fair request I share this concern too, we will find a solution.

[codinghorror (Jeff Atwood)]

Even this would be preferable on mobile, I think. Alignment is off but you get the concept:

(Even if it overlaps text, etc, not sure if that makes it harder or easier than on-tap display? )

[justin (Justin DiRose)]

We had that originally but it overlapped text without being able to see it. I like the idea of it becoming visible on tap. Will look into that.

[codinghorror (Jeff Atwood)]

@justin

it overlapped text without being able to see it

On mobile that is a better tradeoff, big time. On laptop/desktop/tablet, the additional space being consumed is 100% fine.

[lcestou (Lutechi)]

Hello,

I would love to use this but as soon as I enabled it for my Grey Amber theme, my site became sluggish and unresponsive at times until I turn it off.

Has anyone experience this behavior, or could it tax the VPS that much when this is enabled?

The site is like 99.9% single code lines and I was hoping to switch into code blocks for this, so is not like is trying to fetch to convert any existing code. Or is it?

Do I have to give it some amount of time to normalize? It just kept bringing the site down temporarily and when sometimes a page would load it would say error and the try again message from discourse would show up.

Thanks in advance.

[codinghorror (Jeff Atwood)]

Oh wow that sounds like a serious bug actually!

[riking (Kane York)]

Minor Bug: the “copy” text can show up in a quote. (Much more minor than the previous post.)

@pfaffman

copy

while true; do mdadm --detail /dev/md1|grep "Rebuild Status" ; sleep 10;done

Get Power On time for all drives

copy

for x in a b c d ; do smartctl -a /dev/sd$x|grep Power_On; done

The button.copy-cmd needs to be excluded from the quote. Applying user-select: none in the CSS fixes Ctrl-C but not the quote functionality.

[j.jaffeux (Joffrey Jaffeux)]

Do you have a link to your site? It seems very weird than a theme could cause this. How many codeblocks do you have on a page?

[j.jaffeux (Joffrey Jaffeux)]

So I made multiple changes here. Given our problems were:

• screen space on mobile
• copy text bug on quote
• and we have had request of having an icon instead of text

The obvious solution solving all of this… was to use an icon.

On mobile it’s now acceptable to have it on the right, given it takes less space and we can just have some padding for text:

Only minor annoyance, on long FIRST lines it will be hidden behind button, I think it’s acceptable given you can scroll:

And in Desktop it will work as before without the quoting bug:

Concerning, the possible perf bug, I tried a page with dozens of code blocks and got 0 issue, so I will need a reproduction before I can do anything @lcestou please

Try the new codeblock here:

rsync -a file.txt file_backup.txt
rsync -a /var/www/public_html/ /var/www/public_html_backup/

[justin (Justin DiRose)]

This feature is now in core Discourse

As a result, this theme component is now DEPRECATED. It will still work for older Discourse instances but will no longer receive any updates.

I’ve updated the OP to reflect this information.