tools: add button to copy code example to clipboard

Author: jakecastelli

doc/api_assets/api.js

@@ -136,6 +136,30 @@
     updateHashes();
   }
 
+  function setCopyButton() {
+    const buttons = document.querySelectorAll('.copy-button');
+    buttons.forEach((button) => {
+      button.addEventListener('click', (el) => {
+        const parentNode = el.target.parentNode;
+
+        const flavorSelector = parentNode.querySelector('.js-flavor-selector');
+
+        let code = '';
+
+        if (flavorSelector) {
+          if (flavorSelector.checked) {
+            code = parentNode.querySelector('.mjs').textContent;
+          } else {
+            code = parentNode.querySelector('.cjs').textContent;
+          }
+        } else {
+          code = parentNode.querySelector('code').textContent;
+        }
+        navigator.clipboard.writeText(code);
+      });
+    });
+  }
+
   function bootstrap() {
     // Check if we have JavaScript support.
     document.documentElement.classList.add('has-js');
@@ -151,6 +175,8 @@
 
     // Make link to other versions of the doc open to the same hash target (if it exists).
     setupAltDocsLink();
+
+    setCopyButton();
   }
 
   if (document.readyState === 'loading') {

tools/doc/html.mjs

@@ -226,10 +226,13 @@ export function preprocessElements({ filename }) {
         const className = isJSFlavorSnippet(node) ?
           `language-js ${node.lang}` :
           `language-${node.lang}`;
+
         const highlighted =
           `<code class='${className}'>${(getLanguage(node.lang || '') ? highlight(node.value, { language: node.lang }) : node).value}</code>`;
         node.type = 'html';
 
+        const button = '<button class="copy-button">copy</button>';
+
         if (isJSFlavorSnippet(node)) {
           const previousNode = parent.children[index - 1] || {};
           const nextNode = parent.children[index + 1] || {};
@@ -253,16 +256,17 @@ export function preprocessElements({ filename }) {
               ' aria-label="Show modern ES modules syntax">' +
               previousNode.value +
               highlighted +
+              button +
               '</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} ${button}</pre>`;
           }
         } else {
-          node.value = `<pre>${highlighted}</pre>`;
+          node.value = `<pre>${highlighted} ${button}</pre>`;
         }
       } else if (node.type === 'html' && common.isYAMLBlock(node.value)) {
         node.value = parseYAML(node.value);