XenForo Xenforo 2 - Select all button above the CODE field

[blu3men]

With this, simple editing The parts between Code Bbcode can be copied to the clipboard with a click.

You need to edit a file:
1 - bb_code_tag_code

Let's start

Open the "bb_code_tag_code" file for editing. //Admin > Appearance > Styles *(use filter)*
Find this part:

<div class="bbCodeBlock bbCodeBlock--screenLimited bbCodeBlock--code">
    <div class="bbCodeBlock-title">
        {{ $config.phrase ?: phrase('code') }}{$xf.language.label_separator}
    </div>
    <div class="bbCodeBlock-content" dir="ltr">
        <pre class="bbCodeCode" dir="ltr" data-xf-init="code-block" data-lang="{{ $language ?: '' }}"><code>{$content}</code></pre>
    </div>
</div>

Overwrite with this:

<div class="bbCodeBlock bbCodeBlock--screenLimited bbCodeBlock--code">
    <div class="bbCodeBlock-title">
        {{ $config.phrase ?: phrase('code') }}{$xf.language.label_separator}
    </div><button class="selectall-button" onclick="copyCode(this)">Copy</button>
    <div class="bbCodeBlock-content" dir="ltr">
        
        <pre class="bbCodeCode " dir="ltr" data-xf-init="code-block" data-lang="{{ $language ?: '' }}"><code>{$content}</code></pre>
    </div>
</div>

<script>
    function copyCode(button) {
        const codeBlock = button.nextElementSibling;
        const range = document.createRange();
        range.selectNodeContents(codeBlock);
        const selection = window.getSelection();
        selection.removeAllRanges();
        selection.addRange(range);

            codeBlock.classList.add("highlight_selectall");
            setTimeout(() => {
                codeBlock.classList.remove("highlight_selectall");
            }, 500);

        try {
            document.execCommand("copy");
            button.textContent = "Copied";
            button.classList.add("selected");
            setTimeout(() => {
                button.textContent = "Copy";
                button.classList.remove("selected");
            }, 2000);
        } catch (err) {
            console.error("Copy error: ", err);
        }
    }
</script>

<style>
    .selectall-button {
        width: 120px;
    height: 24px;
    font-size: 16px;
    padding: 0;
    background: #0e3c64;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    }
    .selectall-button.selected {
        background: #28a745;
    }
    pre.bbCodeCode ::selection {
         background: transparent;
         color: #28a745;
        }
    .highlight_selectall {
        background: #28a745;
        transition: background 0.5s ease;
    }
</style>

This code above is the simplest solution.
Of course, you can do it to add a language prefix, call the javascript and the style from files.