Clicking inline code should copy code snippet to clipboard

[Wookbert]

Describe the feature you'd like It would be nice if clicking some at an inline code or code block, would copy that line or block straight to the computer’s clipboard. A notification „Copied to clipboard“ should appear for two seconds, then quickly fade away.

Alternatively one copy present a button „Copy to clipboard“, in case direct copy to clipboard on click creates a UI or logical problem.

Describe the benefits this feature would bring to BookStack users One would be able to instantly insert the copied code into e.g. a shell/terminal window or code editor, without the need to carefully selecting the beginning and end of the text.

[ssddanbrown]

Hi @Wookbert, Thank you for your suggestion.

Code blocks already have such functionality. On hover of the block a copy button should appear so the entire contents can be quickly copied:

I'm not sure this functionality would suit inline code blocks though since there's limited space to add UI control and I wouldn't want to do it solely behaviour based (Click to copy) as it could cause confusing behaviour.

[Wookbert]

I agree in that there isn't necessarily enough space for a clipboard icon to be permanently present on every inline code block, and that it might be visually distracting, especially when there are many code snippets close to each other.

Several possible, alternative solutions here:

A. A simple click onto an inline code block, marks the entire code block blue (as it does when in edit mode), automatically copies it to the clipboard, notification„Copied to clipboard“ appears for 1-2 seconds above the snippet. Blue text highlighting fades out.

In contrast: Clicking & dragging the text cursor allows you to select just a section from that inline code block, which does not get automatically copied to the clipboard (manual copy through CMD-C. Or: Temporarily make the Clipboard icon top right to the selected section appear, where clicking that icon would copy the selection, whereas clicking elsewhere would not copy it and deselect the text.

B. Same as in A. but on a single, simple click don't copy the entire block automatically, but also make the „manual“ Clipboard icon appear temporarily appear as in A’s partial selection handling.

I have to admit though that I see a little interference between the appearing Clipboard icon and this appearing thingy (what’s it called/named?) on a selection:

C. On single click on inline code block, neither copy automatically, nor display Clipboard icon. Simply highlight the entire block (as in edit mode) for manual copy. Clicking elsewhere deselects the block.

I guess one has to play around with the options to see which one works and feels best.

[nekromoff]

One click selection is easy to be done using pure CSS, e.g.:

.force-select-all {
    -webkit-user-select: all;  /* Chrome all / Safari all */
    -moz-user-select: all;     /* Firefox all */
    -ms-user-select: all;      /* IE 10+ */
    user-select: all;
}

[ishtiyaq]

Is it possible to implement if a code block has multiple commands then the user should be able to copy a particular line? Please check this URL https://goteleport.com/docs/setup/guides/docker/ for your reference.

[ssddanbrown]

I'm going to close this off since there's been little demand since for such a feature but this could be easily hacked-in with a little JavaScript in the custom head setting. Just shout if you'd want an example of that.