A copy button for [code] blocks (SMF patch)

[PowerGlove]

This is something @libert19 suggested last year. I think it's a good idea: manually copy-pasting BBCode to update your signature is a bit error-prone (not everyone is as careful as they should be, and, although I don't really mess with mobile, I'm guessing that it's even more finicky on a phone/tablet). Besides that, it's just a nice, unobtrusive little time-saver (I bump into [code] blocks quite often on Bitcointalk, so I think this will be pretty handy beyond the use-case that inspired it).

Thanks to @TryNinja for posting a userscript that I took a peek at as a starting point.

I've put together two variations of this patch, here's what style A (default styling with just a hair of margin-bottom) looks like:



And here's what style B (the same border as [quote] blocks, which ends up working pretty nicely, IMO) looks like:



(I think style B works/fits a bit better, personally. Especially when there are small and/or multiple code blocks, like at the bottom of this post, I think style A will draw too much attention to itself.)

Here's the diff for @theymos (style A):

Code:

--- baseline/Sources/Subs.php	2011-09-17 21:59:55.000000000 +0000
+++ modified/Sources/Subs.php	2024-02-19 11:28:27.000000000 +0000
@@ -1123,7 +1123,7 @@
 			array(
 				'tag' => 'code',
 				'type' => 'unparsed_content',
-				'content' => '<div class="codeheader">' . $txt['smf238'] . ':</div><div class="code">' . ($context['browser']['is_gecko'] ? '<pre style="margin-top: 0; display: inline;">$1</pre>' : '$1') . '</div>',
+				'content' => '<div class="codeheader">' . $txt['smf238'] . ': <button type="button" style="margin-bottom: 1px;" onclick="navigator.clipboard.writeText(this.parentElement.nextElementSibling.innerText);">Copy</button></div><div class="code">' . ($context['browser']['is_gecko'] ? '<pre style="margin-top: 0; display: inline;">$1</pre>' : '$1') . '</div>',
 				// !!! Maybe this can be simplified?
 				'validate' => isset($disabled['code']) ? null : create_function('&$tag, &$data, $disabled', '
 					global $context;
@@ -1161,7 +1161,7 @@
 			array(
 				'tag' => 'code',
 				'type' => 'unparsed_equals_content',
-				'content' => '<div class="codeheader">' . $txt['smf238'] . ': ($2)</div><div class="code">' . ($context['browser']['is_gecko'] ? '<pre style="margin-top: 0; display: inline;">$1</pre>' : '$1') . '</div>',
+				'content' => '<div class="codeheader">' . $txt['smf238'] . ': ($2) <button type="button" style="margin-bottom: 1px;" onclick="navigator.clipboard.writeText(this.parentElement.nextElementSibling.innerText);">Copy</button></div><div class="code">' . ($context['browser']['is_gecko'] ? '<pre style="margin-top: 0; display: inline;">$1</pre>' : '$1') . '</div>',
 				// !!! Maybe this can be simplified?
 				'validate' => isset($disabled['code']) ? null : create_function('&$tag, &$data, $disabled', '
 					global $context;

And here's the diff for style B:

Code:

--- baseline/Sources/Subs.php	2011-09-17 21:59:55.000000000 +0000
+++ modified/Sources/Subs.php	2024-02-19 11:28:40.000000000 +0000
@@ -1123,7 +1123,7 @@
 			array(
 				'tag' => 'code',
 				'type' => 'unparsed_content',
-				'content' => '<div class="codeheader">' . $txt['smf238'] . ':</div><div class="code">' . ($context['browser']['is_gecko'] ? '<pre style="margin-top: 0; display: inline;">$1</pre>' : '$1') . '</div>',
+				'content' => '<div class="codeheader">' . $txt['smf238'] . ': <button type="button" style="border: 1px solid #d0d0e0;" onclick="navigator.clipboard.writeText(this.parentElement.nextElementSibling.innerText);">Copy</button></div><div class="code">' . ($context['browser']['is_gecko'] ? '<pre style="margin-top: 0; display: inline;">$1</pre>' : '$1') . '</div>',
 				// !!! Maybe this can be simplified?
 				'validate' => isset($disabled['code']) ? null : create_function('&$tag, &$data, $disabled', '
 					global $context;
@@ -1161,7 +1161,7 @@
 			array(
 				'tag' => 'code',
 				'type' => 'unparsed_equals_content',
-				'content' => '<div class="codeheader">' . $txt['smf238'] . ': ($2)</div><div class="code">' . ($context['browser']['is_gecko'] ? '<pre style="margin-top: 0; display: inline;">$1</pre>' : '$1') . '</div>',
+				'content' => '<div class="codeheader">' . $txt['smf238'] . ': ($2) <button type="button" style="border: 1px solid #d0d0e0;" onclick="navigator.clipboard.writeText(this.parentElement.nextElementSibling.innerText);">Copy</button></div><div class="code">' . ($context['browser']['is_gecko'] ? '<pre style="margin-top: 0; display: inline;">$1</pre>' : '$1') . '</div>',
 				// !!! Maybe this can be simplified?
 				'validate' => isset($disabled['code']) ? null : create_function('&$tag, &$data, $disabled', '
 					global $context;

@hd49728: Thanks for adding my patches to your topic, I appreciate it. I noticed that one of the titles is rendering incorrectly: Adding   (non-breaking space) to the BBCode parser instead of Adding [nbsp] (non-breaking space) to the BBCode parser. That title probably rendered correctly at the time you added it, but, since that patch was accepted, [nbsp] has become valid BBCode, so now it needs to be escaped if you want it to display properly. You'll probably run into a similar problem with this title, too. Here's a tip: whenever you want a BBCode tag (or something that might become a BBCode tag) to render without being processed, remember to wrap it in [nobbc] tags (you can quote this post and examine this paragraph to see what I mean).

[1714660357]

1714660357

[1714660357]

1714660357

[1714660357]

1714660357

[1714660357]

1714660357

[1714660357]

1714660357

[joker_josue]

Congratulations on another patch that could improve the forum.

Although I don't feel affected by the problem that this patch seeks to solve, I think it is a very useful option. Whether for subscription campaigns or other cases of code sharing.
Especially because we are on a technology forum, which involves a lot of programming, and a lot of code sharing. So having an option, which with just 1 click, has the entire code copied, is an added value.

I think both options A and B are good. But perhaps option B is more discreet. For me, either one could be implemented. It's up to @theymos if he decides to implement it. 

@hd49728: Thanks for adding my patches to your topic, I appreciate it. I noticed that one of the titles is rendering incorrectly: Adding   (non-breaking space) to the BBCode parser instead of Adding [nbsp] (non-breaking space) to the BBCode parser. That title probably rendered correctly at the time you added it, but, since that patch was accepted, [nbsp] has become valid BBCode, so now it needs to be escaped if you want it to display properly. You'll probably run into a similar problem with this title, too. Here's a tip: whenever you want a BBCode tag (or something that might become a BBCode tag) to render without being processed, remember to wrap it in [nobbc] tags (you can quote this post and examine this paragraph to see what I mean).

Just taking advantage of the opportunity, I find the tag [nbsp] for the best patch you made. I use it a lot. Thanks again. 

[Sandra_hakeem]

Finally some good news for tab users..!!!!. It's so fascinating to know that you're always thinking of better ways to make the forum as easy as possible.. isn't that amazing?? I meannn, C'monnnn -- you tryna copy some BBcodes and you end up copying the whole campaign starting thread - this goes on and on for like 5 fuckin' times or so... That's how annoying it is( I bet you don't have a clue unless you've tried copying these codes on a tab)...
Normally, I don't support just any type of bs - but this one?? THIS IS QUIET GOING TO BE HELPFUL!
Chymist has never been too free for himself, obviously! I'm just wondering how much time it'll take him to copy 'em codes - assuming he uses a smart phone?! Bahahaha!!
Again, is there gonna be like a little glitch or something immediately after hitting the button? - That would atleast safe the user's time to not hitting it twice and thrice, therefore copying too many codes on their clipboard?..
Congratulations mhan!

Sandra 🧑‍🦰

[BlackHatCoiner]

I just applaud for your contributions in this place. Your account is less than two years old, and yet you've radically improved the user experience of bitcointalk, from SMF patches like this one to convincing theymos for a 2FA addition and responsibly disclosing forum security flaws. And all that, voluntarily. You're simply a user example to follow for everyone.

It surprises me that copying the code doesn't already exist. In phpbb, there is a similar "Select All" which does the same job for me.


And yes, I just learned something more important than automatically selecting and copying text. Thanks, PowerGlove.

[code][/code]

Code:

[nobbc][code][/code][/nobbc]

[PX-Z]

Not the update that majority needed but it will always be great to have a new improvements and development of the forum. Thank you for this.

In my POV, A is better, it looks like having clearer button border and margin below to make it look like separate from the box or anything that will be in the next line, a little adjustment (reduce) of box-radius might be better too.

[dkbit98]

This is something @libert19 suggested last year. I think it's a good idea: manually copy-pasting BBCode to update your signature is a bit error-prone (not everyone is as careful as they should be, and, although I don't really mess with mobile, I'm guessing that it's even more finicky on a phone/tablet). Besides that, it's just a nice, unobtrusive little time-saver (I bump into [code] blocks quite often on Bitcointalk, so I think this will be pretty handy beyond the use-case that inspired it).

PowerGlove strikes yet again  
I like this idea for another SMF patch and I think this could be used even for other things, not only for signature codes.
First thing that pops in my mind is using it for longer codes and for long list of user names or wallet addresses, and I think something similar in other forums.
Style B is better option if you ask me, but both of them are good.

[WhyFhy]

Thanks again for your contributions to the forums and SMF.

Personally, im weary digging in too much wondering if epochtalk's coming.
maybe @Wangbus could enlighten us with an update?
The GitHub appears to be inactive for 3-4 years.as well as the site.
beta.bitcointalk doesn't work at all now.  Perhaps I'm missing an announcement about it or something?


 

[libert19]

I don't find any difference between two styles, can someone pinpoint? Or is it due to I'm on phone and no differences are showing?

Finally some good news for tab users..!!!!. It's so fascinating to know that you're always thinking of better ways to make the forum as easy as possible.. isn't that amazing?? I meannn, C'monnnn -- you tryna copy some BBcodes and you end up copying the whole campaign starting thread - this goes on and on for like 5 fuckin' times or so... That's how annoying it is( I bet you don't have a clue unless you've tried copying these codes on a tab)...
Normally, I don't support just any type of bs - but this one?? THIS IS QUIET GOING TO BE HELPFUL!

Tryninja's script (linked in op) solved this problem quite a while ago. But, having this feature natively is of course better.


https://www.talkimg.com/image/YtMm5

[Learn Bitcoin]

I don't find any difference between two styles, can someone pinpoint? Or is it due to I'm on phone and no differences are showing?

If I am not wrong, then the difference between Style A and B is the black border in the copy button. Take a closer look at the picture of the example and you will understand what I am talking about. I don't know if there are any other changes or not. These are the only visible changes I have noticed there.

If you ask me about picking one from Style A or Style B, I would like to choose Style A because of the black border and the space it has between the code box and the button. I guess this is a old style, but I like it more than the updated version due to the visibility fact.

[un_rank]

I struggle to copy bbcodes whenever I am on mobile and it is not streamlined on pc too, just much better than using a mobile phone. Great work PowerGlove for yet another useful addition to the forum software. Whether or not theymos implements it, you have done the part of looking for ways to make the forum ride more enjoyable, safe and convenient.

- Jay -

[LoyceV]

I'm guessing that it's even more finicky on a phone/tablet).

Whenever I want to change LoyceMobile's signature, I use my PC to login to that account

On other sites, I like this copy feature a lot when copying code (which, after all, is exactly what the code tag is for). On Bitcointalk I rarely copy code, but it can be useful. So kuddos again on improving the forum (assuming it gets implemented).

[hd49728]

@hd49728: Thanks for adding my patches to your topic, I appreciate it. I noticed that one of the titles is rendering incorrectly: Adding   (non-breaking space) to the BBCode parser instead of Adding [nbsp] (non-breaking space) to the BBCode parser. That title probably rendered correctly at the time you added it, but, since that patch was accepted, [nbsp] has become valid BBCode, so now it needs to be escaped if you want it to display properly. You'll probably run into a similar problem with this title, too. Here's a tip: whenever you want a BBCode tag (or something that might become a BBCode tag) to render without being processed, remember to wrap it in [nobbc] tags (you can quote this post and examine this paragraph to see what I mean).

Thank you.

I did not notice the problem with that topic title.

I knew about  code block and I used it in posts but honestly I did not know it can be used in topic title. Edited it in my thread list and added this topic to it as well.

Thank you for continuation to code SMF patch for forum community.

[satashi_nokamato]

Is there any reason for the delay? This is a code based kind of forum and such a minor improvement is a must. Could we please have this one prioritized?

[criptoevangelista]

Perfect, @powerglove (every time I see you here I remember the Nintendo 8 BIT glove hahaha)

I always had this difficulty copying the subscription codes, several times I selected all the messages on the page and had to redo the entire selection...

Everything that makes it easier for us is worthy of congratulations, thank you very much for all the work you do here in the community , without @powerglove, @Tryninja and everyone else helping to improve our experience, the bitcointalk forum wouldn't be the same.

[ABCbits]

Nice work @PowerGlove. Some member who share programming code or long data inside code tag would also appreciate this feature.

The GitHub appears to be inactive for 3-4 years.as well as the site.

You're looking at wrong repository. At some point, the work moved to https://github.com/epochtalk/epochtalk_server and https://github.com/epochtalk/epochtalk-vue. And take note some works done on different branch.