tools: add button to copy code example to clipboard

PR-URL: #46928
Refs: #46894
Reviewed-By: Debadree Chatterjee <debadree333@gmail.com>

Author: jakecastelli

doc/api_assets/api.js

@@ -136,6 +136,36 @@
 updateHashes();
 }
 
+functionsetupCopyButton(){
+constbuttons=document.querySelectorAll('.copy-button');
+buttons.forEach((button)=>{
+button.addEventListener('click',(el)=>{
+constparentNode=el.target.parentNode;
+
+constflavorSelector=parentNode.querySelector('.js-flavor-selector');
+
+letcode='';
+
+if(flavorSelector){
+if(flavorSelector.checked){
+code=parentNode.querySelector('.mjs').textContent;
+}else{
+code=parentNode.querySelector('.cjs').textContent;
+}
+}else{
+code=parentNode.querySelector('code').textContent;
+}
+
+button.textContent='Copied';
+navigator.clipboard.writeText(code);
+
+setTimeout(()=>{
+button.textContent='Copy';
+},2500);
+});
+});
+}
+
 functionbootstrap(){
 // Check if we have JavaScript support.
 document.documentElement.classList.add('has-js');
@@ -151,6 +181,8 @@
 
 // Make link to other versions of the doc open to the same hash target (if it exists).
 setupAltDocsLink();
+
+setupCopyButton();
 }
 
 if(document.readyState==='loading'){

doc/api_assets/style.css

@@ -973,6 +973,33 @@ kbd {
 .dark-mode .js-flavor-selector {
 filter:invert(1);
 }
+
+.copy-button {
+float: right;
+
+outline: none;
+font-size:10px;
+color:#fff;
+background-color:var(--green1);
+line-height:1;
+border-radius:500px;
+border:1px solid transparent;
+letter-spacing:2px;
+min-width:7.5rem;
+text-transform: uppercase;
+font-weight:700;
+padding:0.5rem;
+margin-right:.2rem;
+height:1.5rem;
+transition-property: background-color,border-color,color,box-shadow,filter;
+transition-duration:.3s;
+cursor: pointer;
+}
+
+.copy-button:hover {
+background-color:var(--green2);
+}
+
 @supports (aspect-ratio:1/1) {
  .js-flavor-selector {
 height:1.5em;

tools/doc/html.mjs

@@ -226,10 +226,13 @@ export function preprocessElements({ filename }) {
 constclassName=isJSFlavorSnippet(node) ?
 `language-js ${node.lang}` :
 `language-${node.lang}`;
+
 consthighlighted=
 `<code class='${className}'>${(getLanguage(node.lang||'') ? highlight(node.value,{language: node.lang}) : node).value}</code>`;
 node.type='html';
 
+constcopyButton='<button class="copy-button">copy</button>';
+
 if(isJSFlavorSnippet(node)){
 constpreviousNode=parent.children[index-1]||{};
 constnextNode=parent.children[index+1]||{};
@@ -253,16 +256,17 @@ export function preprocessElements({ filename }) {
 ' aria-label="Show modern ES modules syntax">'+
 previousNode.value+
 highlighted+
+copyButton+
 '</pre>';
 node.lang=null;
 previousNode.value='';
 previousNode.lang=null;
 }else{
 // Isolated JS snippet, no need to add the checkbox.
-node.value=`<pre>${highlighted}</pre>`;
+node.value=`<pre>${highlighted}${copyButton}</pre>`;
 }
 }else{
-node.value=`<pre>${highlighted}</pre>`;
+node.value=`<pre>${highlighted}${copyButton}</pre>`;
 }
 }elseif(node.type==='html'&&common.isYAMLBlock(node.value)){
 node.value=parseYAML(node.value);