Make code blocks copyable in default theme

[rdwatters]

Feature request

What problem does this feature solve?

This is interesting phrasing, since many features don't solve a problem as much as provide an enhancement 😉 . That said, execCommand is a common feature of code blocks in technical documentation. If you're writing large amounts of code, it's often easier to have the user click a copy button (icon or text or whatever) and have a confirmation of some kind saying the text has been copied to the clipboard.

What does the proposed API look like?

Go here and hover the first code block: https://angular.io/guide/displaying-data

How should this be implemented in your opinion?

Plenty of options for implementation, including the popular clipboard.js. I think turning this feature on/off should be as simple as a boolean in the config.

Are you willing to work on this yourself?**

I wish I could, but I'm more of a technical writer than a frontend developer, so this feels a bit brazen.

Cheers all around to VuePress (just discovered this project a couple days ago and it's AWESOME!) and to the Vue community in general. Thanks!

[shershen08]

I am creating a sample implementation of this here: https://github.com/shershen08/vuepress/tree/dev/add-copytoclipboard
However this functionality falls between the markdown-it parser tool that's used under the hood and the Vue.js app wrapper UI, so some feedback on the best to choose approach would be appreciated

[shershen08]

I've created a implementation, that behaves like this: https://www.youtube.com/watch?v=YJ3lnB9AxcM&feature=youtu.be
Will create a PR soon

[ulivz]

This is from PR's template:

To avoid wasting your time, it's best to open a feature request issue first and wait for approval before working on it.

@shershen08 Thanks for your work, but for now we don't accept any new feature requests to master. because we will focus on the next version. you can create a PR after our next version is released.

---

This feature can still be done through the plugin API which is in VuePress Next.

[shershen08]

Thanks for clarification @ulivz - I've seen this note in PR template, but I didn't get it right that an extra separate issue should be created before working on feature PR.

Is this feature being worked on in VuePress Next already ? If not yet, what could be the road map to add this functionality ?

[dovy]

@rdwatters took your work and refractored it into a plugin using the same style as the code from @vuepress/plugin-medium-zoom.

Anyone is welcome to merge this into core if desired.

https://github.com/dovy/plugin-clipboard-copy

Installing as as simple as placing in your root repo and adding this to your ~/.vuepress/config.js file:

['plugin-clipboard-copy', true]

Should work out of the box for anyone.

[dovy]

Published now too for anyone who wants to install and use. https://www.npmjs.com/package/@dovyp/plugin-clipboard-copy

['@dovyp/plugin-clipboard-copy', true]

[ulivz]

@dovy Thanks for the great job, and could you also help do following 2 things?

1. Follow the naming convention of VuePress's plugin to prefix your plugin name with vuepress-plugin, which will take better SEO and simple usage.

2. Adding your fresh plugin to https://github.com/ulivz/awesome-vuepress.