Clicking inline code should copy code snippet to clipboard #1327

New Issue

OVERLORD · 2026-02-05T00:37:21+03:00

OVERLORD commented

2026-02-05 00:37:21 +03:00

Originally created by @Wookbert on GitHub (Sep 1, 2019).

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.

Originally created by @Wookbert on GitHub (Sep 1, 2019). **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.

OVERLORD closed this issue

2026-02-05 00:37:23 +03:00

OVERLORD commented

2026-02-05 00:37:25 +03:00

@ssddanbrown commented on GitHub (Sep 1, 2019):

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.

@ssddanbrown commented on GitHub (Sep 1, 2019): 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: ![image](https://user-images.githubusercontent.com/8343178/64074397-92bae180-cca2-11e9-940a-3d281b1a1049.png) 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.

OVERLORD commented

2026-02-05 00:37:28 +03:00

@Wookbert commented on GitHub (Sep 1, 2019):

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.

@Wookbert commented on GitHub (Sep 1, 2019): 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: ![image](https://user-images.githubusercontent.com/3104762/64079338-a425dd00-cce6-11e9-9129-985f6f21ebfb.png) **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.

OVERLORD commented

2026-02-05 00:37:32 +03:00

@nekromoff commented on GitHub (Sep 6, 2019):

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;
}

@nekromoff commented on GitHub (Sep 6, 2019): 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; } ```

OVERLORD commented

2026-02-05 00:37:36 +03:00

@ishtiyaq commented on GitHub (Jul 31, 2022):

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.

@ishtiyaq commented on GitHub (Jul 31, 2022): 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. ![image](https://user-images.githubusercontent.com/14991908/182013836-7449c6fc-bc5d-44cf-95d0-33ed2862e83e.png)

OVERLORD commented

2026-02-05 00:37:40 +03:00

@ssddanbrown commented on GitHub (Nov 8, 2022):

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.

@ssddanbrown commented on GitHub (Nov 8, 2022): 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.

OVERLORD referenced this issue

2026-02-05 10:17:24 +03:00

[PR #1327] [MERGED] Updated 'Spanish Argentina' translation. #5798

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/BookStack#1327