Introducing a Copy Code Button Plugin for TiddlyWiki: Enhancing Code Sharing and Efficiency

Plugins
21

Here’s a version independent of tailwind. I made the button invisible by default, greyed out when codeblock hovered greyed out by default, and more prominent when button hovered (using palette colors), similarly to how it looks here on discourse.
Also @oeyoews the inner div (with position: absolute) can be skipped I guess and its properties/classes assigned to the button itself, the $button widget supports class attribute.

Widget definition:

tags: $:/tags/Global

\widget $codeblock(code, language)
<div class="wilk-copy-code-button">
<$button message="tm-copy-to-clipboard" param=<<code>> tooltip="Copy" class="tc-btn-invisible">
{{$:/core/images/copy-clipboard}}
</$button>
<$genesis $type="$codeblock" $remappable="no" code=<<code>> language=<<language>>/>
</div>
\end

CSS:

tags: $:/tags/Stylesheet

div.wilk-copy-code-button {
	position: relative;
}
div.wilk-copy-code-button > button.tc-btn-invisible {
	position: absolute;
	right: 0;
	padding: 0.1em 0.2em;
	fill: <<colour tiddler-controls-foreground>>;
}
div.wilk-copy-code-button > button.tc-btn-invisible:hover {
	fill: <<colour tiddler-controls-foreground-hover>>;
}

Demo with drag-and-drop-ready tweak.

Edit: simplified the colors/hover behavior.

4 Likes
22

Just keep in mind that this is will be a usability issue on touch devices.

Edit: it looks like Discourse shows the button by default on touch devices.

23

Good point. I simplified it a bit and made it visible all the time, more prominent when button hovered. This is actually less distracting and flickery.

1 Like
24

Here’s my take on the copy code button (adapted from my old copy-code macro):

image
image1696×731 50.3 KB

Same idea, but with an indication of the language used by the codeblock when there is enough space, and the ability to add a title with the full notation (I wonder if this could be possible with the short wikitext syntax, like for block quote..)

share

2 Likes
25

One little issue is when first line is long it overflows and covers the copy-button!

26

In TW 5.3.6 for a tiddler with code-body=yes, you will see two buttons.

1 Like
27

See this example

image
image684×818 39.7 KB

28

Thanks for noticing! I see it comes from this PR: Add Copy to Clipboard Button to Code Template by kookma · Pull Request #8430 · TiddlyWiki/TiddlyWiki5 · GitHub

I have quickly fixed it by making my button conditionally not displayed if the currentTiddler has code-body=yes, the newly introduced core button takes precedence. The widget code is now:

\widget $codeblock(code, language)
<div class="wilk-copy-code-button">
	<% if [<currentTiddler>!code-body[yes]] %>
		<$button
		message="tm-copy-to-clipboard"
		param=<<code>>
		tooltip="Copy"
		class="tc-btn-invisible">
			{{$:/core/images/copy-clipboard}}
		</$button>
	<% endif %>
	<$genesis $type="$codeblock" $remappable="no" code=<<code>> language=<<language>>/>
</div>
\end

My demo has been updated as well.

I would have liked it more to always show the custom button and never show the core button, but I don’t see a way of doing it without overriding the core view template or introducing a custom view template with the cascade.

1 Like
29

Thank you for the update. Please also note to the Cascades where some tiddlers are dynamically displayed as code.