click-to-copy.js

let codeListings = document.querySelectorAll('.highlight > pre');

for (let index = 0; index < codeListings.length; index++) {
  const codeSample = codeListings[index].querySelector('code');
  
  if (!codeSample) {
    continue; 
  }

  const copyButton = document.createElement('button');
  const buttonAttributes = {
    type: 'button',
    title: 'Copy to clipboard',
    'data-bs-toggle': 'tooltip',
    'data-bs-placement': 'top',
    'data-bs-container': 'body',
  };

  Object.keys(buttonAttributes).forEach((key) => {
    copyButton.setAttribute(key, buttonAttributes[key]);
  });

  copyButton.classList.add(
    'fas',
    'fa-copy',
    'btn',
    'btn-sm',
    'td-click-to-copy'
  );
  const tooltip = new bootstrap.Tooltip(copyButton);

  let revertTimeout;

  copyButton.onclick = () => {
  copyCode(codeSample)
    .then(() => {
      copyButton.setAttribute('data-bs-original-title', 'Copied!');
      tooltip.show();
      copyButton.classList.remove('fa-copy');
      copyButton.classList.add('fa-check', 'td-click-to-copy--copied');
      clearTimeout(revertTimeout);
      revertTimeout = setTimeout(() => {
        copyButton.classList.remove('fa-check', 'td-click-to-copy--copied');
        copyButton.classList.add('fa-copy');
        copyButton.setAttribute('data-bs-original-title', 'Copy to clipboard');
        tooltip.hide();
      }, 2500);
    })
    .catch((err) => {
      console.warn('Failed to copy code to clipboard:', err);
      copyButton.setAttribute('data-bs-original-title', 'Failed to copy');
      tooltip.show();
      clearTimeout(revertTimeout);
      revertTimeout = setTimeout(() => {
        copyButton.setAttribute('data-bs-original-title', 'Copy to clipboard');
        tooltip.hide();
      }, 2500);
    });
};

  copyButton.onmouseout = () => {
    if (!copyButton.classList.contains('td-click-to-copy--copied')) {
      copyButton.setAttribute('data-bs-original-title', 'Copy to clipboard');
      tooltip.hide();
    }
  };

  const buttonDiv = document.createElement('div');
  buttonDiv.classList.add('click-to-copy');
  buttonDiv.append(copyButton);
  codeListings[index].insertBefore(buttonDiv, codeSample);
}

const copyCode = (codeSample) => {
  const isConsoleBlock = codeSample.matches(
    "code[data-lang='console'], code.language-console"
  );
  let text;

  if (isConsoleBlock) {
    const clone = codeSample.cloneNode(true);
    pruneUnselectableElements(codeSample, clone);
    text = clone.textContent;
    text = text.replace(/^ /gm, '');
  } else {
    text = codeSample.textContent;
  }
  text = text ? text.trim() : '';
  if (navigator.clipboard) {
    return navigator.clipboard.writeText(text + '\n');
  }
  console.warn('Clipboard API is not supported in this environment.');
  return Promise.reject(new Error('Clipboard API is not supported in this environment.'));
};

const pruneUnselectableElements = (sourceNode, cloneNode) => {
  const sourceChildren = sourceNode.children;
  const cloneChildren = cloneNode.children;

  for (let i = sourceChildren.length - 1; i >= 0; i--) {
    const sourceChild = sourceChildren[i];
    const cloneChild = cloneChildren[i];
   const style = window.getComputedStyle(sourceChild);
    const unselectable =
      style && (style.userSelect === 'none' || style.webkitUserSelect === 'none');
    if (unselectable) {
      cloneChild.remove();
      continue;
    }

    pruneUnselectableElements(sourceChild, cloneChild);
  }
};