Copy button functionality for "inline code" objects.

[BladeWDR]

Describe the feature you'd like

It would be great if inline code elements included a copy button the way code blocks do.

Inline code tends to fit into ordered or unordered lists better, and it can be handy (especially for the sort of technical documentation I tend to write) to have a single one click copy.

Describe the benefits this would bring to existing BookStack users

Easier copy / paste functionality for small snippets of code / command line standard input.

Can the goal of this request already be achieved via other means?

Not that I'm aware of.

Have you searched for an existing open/closed issue?

• [X] I have searched for existing issues and none cover my fundamental request

How long have you been using BookStack?

3 months to 1 year

Additional context

No response

[ssddanbrown]

Hi @BladeWDR, This is relevant to prior thread #1612.

As per that thread, I'm not really keen on adding this to inline blocks but if you'd like a custom JavaScript snippet to copy-on-click, so you could easily allow on your own instance, I'd be happy to provide one when I get a convenient moment to do so.

[BladeWDR]

That would be great.

[ssddanbrown]

@BladeWDR This should do the job, although depending on browser you might need to be using a secure context (valid https active):

<script type="module">
  const copyElementTextToClipboard = async function(event) {
    const copyText = event.target.textContent;
    try {
      await navigator.clipboard.writeText(copyText);
      window.$events.success('Code copied to clipboard!');
    } catch (err) {
      window.$events.error('Failed to write code to clipboard!')
    }
  };
  
  const inlineCodeElems = document.querySelectorAll('.page-content code:not(pre code)');
  for (const inlineCodeElem of inlineCodeElems) {
    inlineCodeElem.addEventListener('click', copyElementTextToClipboard);
  }
</script>

If you're not running a secure context, I could provide an alternative if needed although it's a little more complex.

[BladeWDR]

Hey Dan,

Thanks a lot for taking the time on this.

Yeah, I'm running Bookstack behind a reverse proxy with valid SSL so it should be fine.

This snippet would go in the custom HTML head content under Customization, right? I'll give it a shot when I get a chance.

On Mon, Dec 25, 2023, 6:50 PM Dan Brown @.***> wrote:

@BladeWDR https://github.com/BladeWDR This should do the job, although depending on browser you might need to be using a secure context (valid https active):

If you're not running a secure context, I could provide an alternative if needed although it's a little more complex.

— Reply to this email directly, view it on GitHub https://github.com/BookStackApp/BookStack/issues/4740#issuecomment-1869155513, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAIVP3455JSTITK6URHZVADYLIGKZAVCNFSM6AAAAABBBADATGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQNRZGE2TKNJRGM . You are receiving this because you were mentioned.Message ID: @.***>

[ssddanbrown]

This snippet would go in the custom HTML head content under Customization, right?

Yeah, that's right, just paste/append it in there.