How do I add a "copy to clipboard" button block extension?

Question

Edit: I had to discard the attempt to get it applied via asciidoctor, and just wrote a javascript function for it instead. Thanks for the help anyways!

I have tried to add a button to code blocks in my .adoc files to make it easy to copy the code to the clipboard. Since there's literally no documentation anywhere for how to do this, I had to ask Bard about it, but it doesn't work, so as a last ditch effort, I'm reaching out to other devs to see if anyone knows how to get this to work.

I tried adding the "copyblocks" extension that belongs to asciidoctorJ, but that never worked out, and might need me to know where it is hosted, which is impossible to find, so that's a dead end afaik.

Currently, I've created an asciidoctor.conf file with the following:

Asciidoctor::Extensions.register do
  include Asciidoctor::Extensions::CopyButtonBlockExtension
end

and a copy-button.rb file with the following:

require 'asciidoctor/extensions'

class CopyButtonBlockExtension < Asciidoctor::Extensions::BlockProcessor
    use_dsl
  
    named :copy-button
    on_context :source
  
    def process(parent, reader, attrs)
        # Extract code language from the "source" attribute
        lang = attrs['source'].value
    
        # Extract code content from the block
        content = reader.lines.join
    
        # Generate HTML markup for the container element and the copy button
        html = %(
            <div class="custom-code">
                <pre><code class="#{lang}">#{content}</code></pre>
                <button onclick="copyToClipboard(this)">Copy</button>
            </div>
        )
    
        # Return the generated HTML content
        html
    end
end

def copy_to_clipboard(element) {
    const codeElement = element.previousElementSibling.querySelector('code');
    const codeText = codeElement.innerText;

    navigator.clipboard.writeText(codeText)
    .then(() => {
        element.innerText = 'Copied!';
        setTimeout(() => {
            element.innerText = 'Copy';
        }, 2000);
    })
    .catch((error) => {
        console.error('Failed to copy to clipboard:', error);
    });
}

The .rb file is in the "src/site/resources/asciidoc/extensions/" folder. Both the folder and .conf file I had to create, as everything asciidoc related is obtained in the pom.xml via an asciidoctor-maven-plugin dependency for maven-site-plugin.

Would really love help with getting this to finally work, as it's driving me mad with how seemingly easy it should be considering most sites have a "copy to clipboard" button for code blocks, and vuetify uses asciidoc for their documentation.