Code Snippet Code to Clipboard button functionality on code snippet.

CopyToClipbaord.js

// it is written for below structure
<pre>
  <code>
  ----some----code----
  </code>
<pre>



function CopyToClipboard(params) {
  const codeContainer = document.getElementsByTagName('pre');
  // debugger
  for (const item of codeContainer) {
    const button = document.createElement('button');
    button.innerText = 'Copy';
    button.style.position = 'absolute';
    button.style.top = "0";
    button.style.right = "0";
    button.style.fontSize = "10px";
    button.style.border = "none";
    button.style.background = "gainsboro";
    button.style.borderRadius = "0px 3px 0px 3px";
    button.className = 'copy-btn';
    button.onclick = function () {
      let x = item.firstChild.textContent
      console.log('iiner', x)
      const el = document.createElement('textarea');
      el.value = x;
      document.body.appendChild(el);
      el.select();
      document.execCommand('copy');
      document.body.removeChild(el);
      button.innerText = 'Copied';
      setTimeout(() => {
        button.innerText = 'Copy';
      }, 1000);
    };
    item.append(button);
  }
}

export default CopyToClipboard;