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

[oeyoews]

Link

This plugin is designed to add a copy code button to code blocks in TiddlyWiki, making it easier to copy code snippets with their formatting and indentation intact. In TiddlyWiki, code blocks are typically wrapped in the <pre> tag to preserve their formatting and indentation. However, copying the code manually can be inconvenient.

This plugin solves this problem by adding a “Copy Code” button next to the code block. Clicking the button copies the code to the clipboard, and the copied code is also displayed in a popup using the SweetAlert2 plugin, making it easy to verify that the code was copied successfully.

This plugin can greatly improve the efficiency and convenience of displaying and sharing code in TiddlyWiki, especially when you need to copy code frequently.

The only downside at the moment is that the copy button needs to be manually triggered for display.

[oeyoews]

You can also use the Motion plugin to show copy code button now, just need press g mshortcuts to toggle the display of the code copy button

[linonetwo]

Looks good but Where is it? It don’t seem to exist in your link

And Demo link in that site link to https://oeyoews.github.io/neotw/#: which don’t have any content other than comments…

[oeyoews]

Updated

[linonetwo]

Looks good, and does not require patching CodeBlock widget. While cravat is it requires additional click to show button. But idea is good.

[pmario]

Well done!

But a little bit much bling and external dependencies for my personal taste.

[oeyoews]

Those UI effects are optional，Of course, it can also be removed.

[oeyoews]

Well, I finally rewrote the codeblock widget. I didn’t want to manually trigger the button to start copying the code every time.

[oeyoews]

Icons basically support all language types recognized by highlight.js. If the language type is empty, tiddlywiki’s log will be used by default.

[vilc]

Thank you for the plugin @oeyoews. Am I right that it is the first plugin that does that?

Is the plugin supposed to be also usable independently of neotw or its components?

I tried it on an empty tw with the following results (without/with highlight.js plugin):

The tiny button does work.

[oeyoews]

The styles are written using tailwindcss, and the icons are supported by iconify

tailwindcss plugin: tailwindcss plugin
iconify plugin: iconify

ps: It is completely possible not to rely on additional plug-ins, it just requires extra time, and I don’t plan to do so for the time being.

[vilc]

@oeyoews

It is completely possible not to rely on additional plug-ins, it just requires extra time

I’m trying to rework it so that it doesn’t have any dependencies.
@oeyoews do you by any chance still have the non-uglified version of the JS in the rewritten $:/core/modules/widgets/codeblock.js?
This would make things much easier.

Anyway, I have achieved a reasonable result already:

I’ll share it soon after I refine it a bit.

[oeyoews]

oeyoews/tiddlywiki-starter-kit/blob/main/plugins/oeyoews/neotw-copy-code/tiddlers/codeblock.js

[vilc]

I have modified the plugin to simplify it and remove dependencies. See demo here.

Result:

The copy button is highlighted when hovered and a hover text is displayed:

I don’t know much about JS, so I have made only minimal changes. I have commented out the unnecessary parts of JS instead of removing them, for testing.

• JS of codeblock widget introduces no button content, it is introduced through CSS pseudoelements, for easier editing without touching the widget definition.
• I ended up using emoji as the button icon, it was easier to handle than SVG icons, and is less intrusive than a button with “Copy” text.

I think it looks and works reasonably now, but there is surely a lot of room for improvement. I’ll report here with any updates.

[saqimtiaz]

@vilc Note that adding a copy button to codeblocks is achievable with wikitext:

\widget $codeblock(code)
<$macrocall $name="copy-to-clipboard" src=<<code>>/>
<$genesis $type="$codeblock" $remappable="no" code=<<code>>/>
\end

This can be tagged as a global and the appearance customized using CSS.

[vilc]

@saqimtiaz this simplifies things a lot, thanks!

[oeyoews]

I tried it, and it seems to be more convenient, except that the language type icon of the code block cannot be configured, but in addition, the copy-to-clipboard text seems to be unhideable. Is there any way to hide it? Consider that not all situations require text, an icon is enough.

\widget $codeblock(code)
<div class="group">
<div class="absolute right-4 opacity-0 group-hover:opacity-100">
<$macrocall $name="copy-to-clipboard" src=<<code>>/>
</div>
<$genesis $type="$codeblock" $remappable="no" code=<<code>> class=""/>
</div>
\end

[saqimtiaz]

Something along these lines should do the trick:

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

[oeyoews]

\widget $codeblock(code)
<div class="group relative">
<div class="absolute right-0 opacity-0 group-hover:opacity-100">
<$button message="tm-copy-to-clipboard" param=<<code>> tooltip="copy">
{{$:/core/images/copy-clipboard}}
</$button>
</div>
<$genesis $type="$codeblock" $remappable="no" code=<<code>> language=<<language>>/>
</div>
\end

This is a quick implementation of tailwindcss, everything works perfectly except the code type language highlighting is not working properly yet @saqimtiaz

[oeyoews]

\widget $codeblock(code, language)
<div class="group relative">
<div class="absolute right-0 opacity-0 group-hover:opacity-100">
<$button message="tm-copy-to-clipboard" param=<<code>> tooltip="copy">
{{$:/core/images/copy-clipboard}}
</$button>
</div>
<$genesis $type="$codeblock" $remappable="no" code=<<code>> language=<<language>>/>
</div>
\end