Add a copy to clipboard button for copying testcase Output tiddler contents

[btheado]

The examples in the tiddlywiki documentation currently have a copy-to-clipboard button to copy the text of the example. In order to not lose that feature when converting these examples to use the testcase widget, add a copy to clipboard button to the testcase default template.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
tiddlywiki5	✅ Ready (Inspect)	Visit Preview	Jun 24, 2024 4:50pm

[btheado]

I'm not super confident about this PR. My doubts:

1. Does it belong in the default template? But if not, I think it will be painful to maintain a separate testcase template for the docs site TW.
2. Is the filter I used for extracting the contents of the Output tiddler more complicated than it needs to be?
3. Does the copy-to-clipboard button need to be enclosed in a div with some css class?

[btheado]

Here is a direct link to tiddlers containing the testcase widget. Click through to see the behavior of the copy-to-clipboard button.

[Jermolene]

Thanks @btheado the testcase template is rendered within the context of the testcase wiki, so it is not necessary to reach into the JSON to get the output tiddler, one can just set src={{Output}}. I pushed an update here.

I had hoped eventually to go a little further, and add the ability to copy any of the testcase tiddlers to the clipboard, and to drag tiddlers from the testcase. Perhaps even an "export" button offering the usual formats.

I was thinking that we'd add an "i"-in-a-circle button at the top right of the testcase that brings up a dropdown menu with additional information and options to export the entire testcase. There would also be a dropdown menu within the testcase tiddler tabs on the left, above the field listing, with options for copy to clipboard, export etc for individual tiddlers.

So I'm not sure whether to merge this now, or to wait until we've got something a bit more ambitious. It strikes me that it is not too hard to manually copy the text of a testcase tiddler, so it might not be an urgent change.

[btheado]

I pushed an update here.

Thanks, much better.

So I'm not sure whether to merge this now, or to wait until we've got something a bit more ambitious. It strikes me that it is not too hard to manually copy the text of a testcase tiddler, so it might not be an urgent change.

Your proposed changes sound really good. I agree it isn't all that hard to focus the edit widget and select all and copy. However, on mobile it probably makes a bigger difference.

I was in the process of replacing more examples with the testcase widget and testcase tiddlers, but felt bad about losing the copy-to-clipboard button and so I made this pull request.

Who knows how long it will be until the next core release. I think it is worthwhile merging this PR until then.

[pmario]

Who knows how long it will be until the next core release. I think it is worthwhile merging this PR until then.

I second that. Since Examples are part of tiddlywiki-com changes there can be "out of order" so having the copy-to-clipboard button in this release would make sense for me.

[Jermolene]

I've made a stab at a more elaborate solution in #8292.

[pmario]

@btheado -- I think you can close this one, since it is superseded by #8292

[btheado]

Superseded by #8292