Add a tab size adjust to Code Block Pro WordPress plugin

add-tab-size-control.js

const handleTabSizeAdjustToggle = () => {
    const blocks = Array.from(
        document.querySelectorAll(
            '.wp-block-kevinbatdorf-code-block-pro:not(.cbp-tab-size-loaded)',
        ),
    );
    blocks.forEach((block) => {
        block.classList.add('cbp-tab-size-loaded');
        const button = document.createElement('span');
        button.setAttribute('role', 'button');
        button.setAttribute('tabindex', '0');
        button.setAttribute('aria-label', 'Toggle tab size');
        button.classList.add('code-block-pro-copy-button'); // this class may be removed in the future
        button.classList.add('code-block-pro-header-button'); // and if so, I'll use this class

        // check if nearby span copy button has color
        const copyButton = block.querySelector('.code-block-pro-copy-button');
        if (copyButton) {
            const color = window.getComputedStyle(copyButton).color;
            button.style.color = color;
            button.style.marginRight = '1.4rem';
        }
        if (!button.style.color) {
            button.style.color = 'white';
        }

        button.innerHTML =
            '<svg style="width:24px;height:24px;margin-top:1px;" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6h9.75M10.5 6a1.5 1.5 0 11-3 0m3 0a1.5 1.5 0 10-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-9.75 0h9.75" /></svg>';
        block.querySelector('pre').insertAdjacentElement('beforebegin', button);
        const handle = (event) => {
            event.preventDefault();
            const current = parseInt(
                block.style.getPropertyValue('--cbp-tab-width'),
            );
            // Fine tune these as needed, 2 -> 4-> 8 -> 2
            const next =
                Number(current) === 2 ? 4 : Number(current) === 4 ? 8 : 2;
            block.style.setProperty('--cbp-tab-width', next);
            localStorage.setItem('code-block-pro-tab-size', next);
            window.dispatchEvent(
                new CustomEvent('cbp::tab-size-update', { detail: { next } }),
            );
        };
        button.addEventListener('click', handle);
        button.addEventListener('keydown', (event) => {
            if (event.key === 'Enter') handle(event);
        });
        // Add a window listener to update the tab size if it changes on another block
        window.addEventListener('cbp::tab-size-update', (event) => {
            block.style.setProperty('--cbp-tab-width', event.detail.next);
        });
        // if in localstorage, set it
        const tabSize = localStorage.getItem('code-block-pro-tab-size');
        if (tabSize) {
            block.style.setProperty('--cbp-tab-width', tabSize);
        }
    });
};

// Adjust these as needed. The function will only ever run once, 
// but when it runs depends on your theme. This covers just about any edge case safely
handleTabSizeAdjustToggle();
window.codeBlockProHandleTabSizeAdjustToggle = handleTabSizeAdjustToggle;
window.addEventListener('DOMContentLoaded', handleTabSizeAdjustToggle);
window.addEventListener('load', handleTabSizeAdjustToggle);

You can swap the icon out with any. I picked one a bit randomly here: https://heroicons.com/

Just keep the style="width:24px;height:24px"