Copy to Clipboard Widget in Code Blocks/Snippets

[JamesBauman]

Is your request for enhancement related to a problem?

We rec'd an enhancement/suggestion to help users copy code snippets from our online help code blocks to their clipboard.

The user wants to issue a command line command to install something. We provide the precise command to issue. The user's browser didnt cooperate with them so it took a few tries to select the code snippet and perform a copy task (right-click/control+c). The user indicates that clicking 'copy to clipboard' widget in the code block would be very helpful.

Describe the solution you'd like

See the screen shot in below.

Related doc pages

https://zowe.github.io/docs-site/latest/user-guide/cli-installcli.html#installing-zowe-cli-from-an-online-registry

Additional context

Here is the code block. I mocked up what the widget can look like like and some alt text.

[JamesBauman]

See the Github implementation:

[BrandonJenkins14]

I agree with this, good idea. Especially for the CLI documentation where commands are the way in which you interact with the software.

(BTW, I think the second screenshot shows a button that copies a link TO that specific comment in GitHub, rather than copy text to clipboard. )

[BrandonJenkins14]

@jackjia-ibm - I just learned that someone implemented a copy-code-block-to-clipboard feature in Vuepress. Funnily enough, they did not update their documentation about how to use the feature.

I wonder if you can decipher from the PR if this code would work for this use case? -
vuejs/vuepress#703
vuejs/vuepress#751

[jackjia-ibm]

@BrandonJenkins14 sounds really great feature. I will do some investigation and reach you back.

[BrandonJenkins14]

Here's one other related resource, not sure if applicable or not.

https://codepen.io/shaikmaqsood/pen/XmydxJ

[BrandonJenkins14]

Some minor progress, and issue:

1. I created a branch named "clipboard"
2. npm i --save @dovyp/vuepress-plugin-clipboard-copy
3. added plugins: ['@dovyp/vuepress-plugin-clipboard-copy', true], to config.js as was mentioned in Make code blocks copyable in default theme vuejs/vuepress#703
4. ISSUE - Plug-in has no effect. Not sure if defect, or if not compatible with our configuration of Vuepress. @jackjia-ibm might investigate.

[jackjia-ibm]

Thanks Brandon for the investigation.

I found the version of VuePress we are using is 0.14.1 which doesn't support plugin. I created an issue to upgrade later once VuePress announced formal v1.x. #522.

PR #523 created for this issue. Please check if this is good enough or let me know how you want to change.

[jackjia-ibm]

Fixed with #523