From 403718c53ea56d40bfc83af3d8bc86d444d05190 Mon Sep 17 00:00:00 2001
From: jakecastelli <959672929@qq.com>
Date: Fri, 3 Mar 2023 18:55:16 +1030
Subject: [PATCH 1/6] tools: add button to copy code example to clipboard

---
 doc/api_assets/api.js | 26 ++++++++++++++++++++++++++
 tools/doc/html.mjs    |  8 ++++++--
 2 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/doc/api_assets/api.js b/doc/api_assets/api.js
index 49906b1a2abab5..770200f93e8204 100644
--- a/doc/api_assets/api.js
+++ b/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') {
diff --git a/tools/doc/html.mjs b/tools/doc/html.mjs
index 86df5162f58000..8f6d4a88613507 100644
--- a/tools/doc/html.mjs
+++ b/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);

From d8ea97b5fc607299c938d7cef2be66923da8321f Mon Sep 17 00:00:00 2001
From: jakecastelli <959672929@qq.com>
Date: Fri, 3 Mar 2023 22:51:30 +1030
Subject: [PATCH 2/6] fix: keep setup function naming consistent

---
 doc/api_assets/api.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/doc/api_assets/api.js b/doc/api_assets/api.js
index 770200f93e8204..21ba049be36a7a 100644
--- a/doc/api_assets/api.js
+++ b/doc/api_assets/api.js
@@ -136,7 +136,7 @@
     updateHashes();
   }
 
-  function setCopyButton() {
+  function setupCopyButton() {
     const buttons = document.querySelectorAll('.copy-button');
     buttons.forEach((button) => {
       button.addEventListener('click', (el) => {
@@ -176,7 +176,7 @@
     // Make link to other versions of the doc open to the same hash target (if it exists).
     setupAltDocsLink();
 
-    setCopyButton();
+    setupCopyButton();
   }
 
   if (document.readyState === 'loading') {

From e3bd6f2f715a9aaf40dac43039d399f79190ac66 Mon Sep 17 00:00:00 2001
From: jakecastelli <959672929@qq.com>
Date: Fri, 3 Mar 2023 22:54:25 +1030
Subject: [PATCH 3/6] fix: improve copy button naming

---
 tools/doc/html.mjs | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/tools/doc/html.mjs b/tools/doc/html.mjs
index 8f6d4a88613507..d5dd7973e206ac 100644
--- a/tools/doc/html.mjs
+++ b/tools/doc/html.mjs
@@ -231,7 +231,7 @@ export function preprocessElements({ filename }) {
           `<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>';
+        const copyButton = '<button class="copy-button">copy</button>';
 
         if (isJSFlavorSnippet(node)) {
           const previousNode = parent.children[index - 1] || {};
@@ -256,17 +256,17 @@ export function preprocessElements({ filename }) {
               ' aria-label="Show modern ES modules syntax">' +
               previousNode.value +
               highlighted +
-              button +
+              copyButton +
               '</pre>';
             node.lang = null;
             previousNode.value = '';
             previousNode.lang = null;
           } else {
             // Isolated JS snippet, no need to add the checkbox.
-            node.value = `<pre>${highlighted} ${button}</pre>`;
+            node.value = `<pre>${highlighted} ${copyButton}</pre>`;
           }
         } else {
-          node.value = `<pre>${highlighted} ${button}</pre>`;
+          node.value = `<pre>${highlighted} ${copyButton}</pre>`;
         }
       } else if (node.type === 'html' && common.isYAMLBlock(node.value)) {
         node.value = parseYAML(node.value);

From 847f064121dd387438998ef70f3947ac2adb3bf7 Mon Sep 17 00:00:00 2001
From: jakecastelli <959672929@qq.com>
Date: Sat, 4 Mar 2023 22:49:10 +1030
Subject: [PATCH 4/6] fix: move copy button to the right

---
 doc/api_assets/style.css | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/doc/api_assets/style.css b/doc/api_assets/style.css
index 42126949d55d5c..53bda01ac5a520 100644
--- a/doc/api_assets/style.css
+++ b/doc/api_assets/style.css
@@ -973,6 +973,11 @@ kbd {
 .dark-mode .js-flavor-selector {
   filter: invert(1);
 }
+
+.copy-button {
+  float: right;
+}
+
 @supports (aspect-ratio: 1 / 1) {
   .js-flavor-selector {
     height: 1.5em;

From 8b1fde0e64838221b8c1afb54a964f76dc94b113 Mon Sep 17 00:00:00 2001
From: jakecastelli <959672929@qq.com>
Date: Sun, 5 Mar 2023 23:30:41 +1030
Subject: [PATCH 5/6] fix: improve button style

---
 doc/api_assets/style.css | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/doc/api_assets/style.css b/doc/api_assets/style.css
index 53bda01ac5a520..6b27fa1fb71b94 100644
--- a/doc/api_assets/style.css
+++ b/doc/api_assets/style.css
@@ -976,6 +976,28 @@ kbd {
 
 .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) {

From bb8bb125f177b6926403816f018e09f1b28a63e6 Mon Sep 17 00:00:00 2001
From: jakecastelli <959672929@qq.com>
Date: Sun, 5 Mar 2023 23:31:00 +1030
Subject: [PATCH 6/6] fix: add indicator for copied

---
 doc/api_assets/api.js | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/doc/api_assets/api.js b/doc/api_assets/api.js
index 21ba049be36a7a..c1151ae493e8da 100644
--- a/doc/api_assets/api.js
+++ b/doc/api_assets/api.js
@@ -155,7 +155,13 @@
         } else {
           code = parentNode.querySelector('code').textContent;
         }
+
+        button.textContent = 'Copied';
         navigator.clipboard.writeText(code);
+
+        setTimeout(() => {
+          button.textContent = 'Copy';
+        }, 2500);
       });
     });
   }