Plugin: Click-to-Copy spans

I wrote a plugin to make inline spans which, when clicked on, copy their contents to the user's clipboard. The spans are unobtrusively styled, and the plugin works on desktop and mobile. The spans do support displaying inline code, but otherwise do not display markdown within them - intentional since I use it to copy passwords, which may inadvertently contain valid markdown.

The basic format is that something like [[this]] in the editor will be rendered as a click-to-copy span in the webview which, when clicked, copies "this" to the user's clipboard. Any click-to-copy span that has its contents entirely encased in backticks, like [[`this`]], will have its contents displayed as inline code, while still click-to-copying (without the backticks).

There are settings to change the start and end tokens from [[ and ]] to whatever you may want to use.

GitHub: GitHub - ntczkjfg/joplin-plugin-click-to-copy-span (includes a screenshot)

3 Likes

This is really neat!

Have you thought about extending the functionality to work in the markdown editor?

1 Like

Thanks! I haven't, but I have now.

I'm pretty new to basically everything involved here: JavaScript, TypeScript, every relevant library - so every bit of progress is quite slow. But I can absolutely look into adding an option for that.

Well, you are doing great so far.

Having the click to copy would be a little tricky in the markdown editor because the user would also be clicking in the word to put the cursor there for editing.

My use case would be this… I only use the markdown editor along with the Rich Markdown plugin. This feature would be really useful when I'm documenting CLI processes because I often want to put a code snipit inline to copy later. I have the Better Code Blocks plugin installed so I can do what I want as a code block. But the inline copy would be great.

I'm thinking it's probably possible, based on what I've seen with another plugin - the Extra Editor Settings one, which displays a lot more markdown in the editor. The checkboxes in particular seem relevant: They appear in the editor as checkboxes as long as they aren't on the active line and, when clicked, can be checked or unchecked like usual, without moving the cursor. I'll be aiming to replicate something like that.

1 Like

Thanks for your work on this. I found Click-to-Copy immediately useful. The kind of thing where one wonders, "How did I manage without this facility before?" :slightly_smiling_face:

Likewise, kudos on your collapsible blocks plugin, which also is a pleasure to use :+1:

1 Like

This looks pretty useful

Could there be an option to change the syntax?

[[]] is wikilinks syntax, so could be interpreted as wikilinks if you ever export the markdown to an app that supports wikilinks (or if joplin ever added support for them)

@bwat47 You'll find that the ability to change that to something that suits you better is already available in the plugin settings

2 Likes

I've added this (click-to-copy spans in the editor) now, in version 1.1.1, which also fixes a bug someone reported about exporting notes to HTML/PDF. Thanks for the idea!

I did add an option to disable having the spans appear in the editor. I have them enabled by default. I'm curious to hear if anyone thinks they should be off by default?

1 Like