Allow copy an EuiCodeBlock

[timroes]

It would be nice, if you could enable/disable a copy button on EuiCodeBlock. This could be shown in the upright corner (besides the fullscreen button) and when clicking it, the whole content of the code block is copied to the clipboard.

This would be a very good feature, since pressing Ctrl + A does not work (which makes sense) to select all text in the code block. So it would be nice if we could give the user this easy functionality to copy it. Please make it configurable whether or not this button should be shown.

[snide]

I think this is a good idea. Think we probably want to expose a generic copy to clipboard component separate from the codeblock, then just import it in and attack it to an icon.

[nreese]

Kibana has a copy to clipboard component, https://github.com/elastic/kibana/blob/master/src/core_plugins/kibana/public/home/copy_to_clipboard.js. Do you want me to move this into EUI and create a component around it?

[snide]

@nreese Sure. I think we'd want it to be generic, not tied to the code editor per se, but just a generic... pass me a button prop, pass me the stuff you want to save to clip. When you hit the button, the content goes in your clipboard.

Then we can use wahtever button makes sense for whatever component needs it. My guess is the editor we'd just expose a small icon in the code view, but in other places like the getting started experience we'd use traditional buttons to better focus it.

[chandlerprall]

I think it'd be cleaner to keep the copy-to-clipboard code as a service, and then leave the button/component implementation entirely up to the developer.

<button onClick={() => copyToClipboard(content)}>copy me!</button>

instead of

<CopyToClipboard content={content}><button>copy me!</button></CopyToClipboard>
which would need the CopyToClipboard to modify props to button, and also assumes it will always be acting on an onClick event.

[cchaos]

Could doing it as a service also include the option of adding feedback to the user? I'd really like to implement something like a timed tooltip that comes in and just says "Copied!".

[chandlerprall]

Could doing it as a service also include the option of adding feedback to the user? I'd really like to implement something like a timed tooltip that comes in and just says "Copied!".

Definitely. Service can return a promise, this also exposes the failure case that the kibana code only console.warns, instead of letting the UI react to a failed copy.

[cchaos]

Now we just need to add EuiCopy (#1112) into EuiCodeBlock as an option.

[snide]

@ryankeairns fixed with #1556