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)

Full documentation:

Joplin Plugin - Click-to-Copy Spans

This Joplin plugin allows you to create inline click-to-copy text spans.

Version: 1.3.0

Installation

  • Open Joplin and navigate to Preferences > Plugins
  • Search for click-to-copy and click install
  • Restart Joplin

Uninstall

  • Open Joplin and navigate to Tools > Options > Plugins
  • Find the Click to copy plugin
  • Press Delete to remove the plugin, or click the toggle to disable it
  • Restart Joplin

Usage

Click-to-copy spans

In order to create a Click-to-Copy Span, you can:

  • press on the Click-to-Copy Span toolbar button to create a template span, or
  • highlight text then press on the Click-to-Copy Span toolbar button to convert it to a span, or
  • or manually type in the following format:
[[insert text here]]

You can additionally make the text within the span render as inline code by wrapping the entire contents of the span in backticks, like so:

[[`This will render as inline code, but still be click-to-copy`]]

If you double the start token, then the span will render its text as dots, to obfuscate things like passwords. If you double the end token, then the plugin will attempt to clear your clipboard after 15 seconds. When a span is rendered as a password, right clicking it will toggle between displaying dots and the actual text.

[[[[`This will show up as dots, and be erased from the clipboard 15 seconds after being clicked`]]]]

Screenshots

Use it for things you may frequently want to copy/paste:

With password obfuscation and forgetting:

With editor view enabled (default):

Settings

There is a settings page for the plugin in the Joplin options. There, you can:

  • Customize the start and end tokens away from the default [[ and ]]
  • Disable having the spans appear in the editor if you'd prefer only the raw text there
  • Choose if the start and end tokens are shown or hidden, when displaying spans in the editor is enabled

Advanced

Custom styles

If you would like to style the collapsible blocks to your preference, use the following in your userstyle.css file, which can be accessed in Joplin β†’ Options β†’ Appearance β†’ Show Advanced Settings β†’ Custom stylesheet for rendered Markdown:

/* Styling of the click-to-copy spans */
.ctc {

}

/* Styling of the ctc-markdown, only when displaying ctc-spans in the editor, and not hiding markdown */
.ctc-markdown {

}

Notes

Acknowledgement

Thanks to the creator of the Joplin Spoilers plugin, whose code helped me build this plugin.

Other plugins

Check out my other plugins:

  • Collapsible blocks! Easily lets you create collapsible/foldable blocks that can hide their content from view.
  • Hotstrings & Hotkeys! Easily define custom hotstrings and hotkeys you can use in any note.
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.

2 Likes

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:

2 Likes

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)

1 Like

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

3 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?

2 Likes

I've updated to 1.3.0. This update adds a few things:

  • If you double the starting token, then the span will render obfuscated, so your password will show as "β€’β€’β€’β€’β€’β€’β€’" instead of "hunter2". For spans like this, right clicking the spans will toggle between displaying dots and the actual text.
  • If you double the ending token, then the plugin will attempt to clear your clipboard 15 seconds after a span is clicked, as long as the clipboard hasn't changed in the mean time. Pairs well with the above.
  • I noticed in other threads that people don't always like when plugins hide markdown in the editor, so there is now an option to keep the markdown displayed when showing click-to-copy spans in the editor. This is disabled by default.
  • Fixed an issue where, if a click-to-copy span was in a checklist item, clicking the span would toggle the checklist item.

The README has been updated - and edited into the top message of this thread.

2 Likes