Add copy icon to code examples

Fixes nightwatchjs#4350

Add a copy icon to code usage examples for better user experience.

* Modify `api/README.md` to include a copy icon for each code example box.
* Add a JavaScript function in `api/README.md` to handle the copy action.
* Add a CSS class in `api/README.md` for the copy icon styling.
* Modify `examples/test-app/index.html` to include a copy icon for each code example box.
* Add a JavaScript function in `examples/test-app/index.html` to handle the copy action.
* Add a CSS class in `examples/test-app/index.html` for the copy icon styling.

api/README.md

@@ -3,7 +3,9 @@ Public commands api exported by Nightwatch in order to be extended upon from out
 
 **Example:**
 
-```js
+<div class="code-example">
+  <button class="copy-button" onclick="copyToClipboard(this)">Copy</button>
+  <pre><code>
 const {Quit: quit} = require('nightwatch/api');
 
 module.exports = CustomQuit extends Quit {
@@ -13,7 +15,8 @@ module.exports = CustomQuit extends Quit {
     await super.command(cb);
   }
 }
-```
+  </code></pre>
+</div>
 
 **This is a work in progress.** 
 
@@ -56,5 +59,34 @@ module.exports = CustomQuit extends Quit {
 
 ## Utilities & Debugging:
 
+<script>
+  function copyToClipboard(button) {
+    const code = button.nextElementSibling.innerText;
+    navigator.clipboard.writeText(code).then(() => {
+      button.innerText = 'Copied!';
+      setTimeout(() => {
+        button.innerText = 'Copy';
+      }, 2000);
+    });
+  }
+</script>
 
+<style>
+  .code-example {
+    position: relative;
+  }
 
+  .copy-button {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    background-color: #f5f5f5;
+    border: 1px solid #ccc;
+    padding: 5px 10px;
+    cursor: pointer;
+  }
+
+  .copy-button:hover {
+    background-color: #e0e0e0;
+  }
+</style>

examples/test-app/index.html

@@ -17,6 +17,24 @@
     section {
       padding: 10px;
     }
+
+    .code-example {
+      position: relative;
+    }
+
+    .copy-button {
+      position: absolute;
+      top: 10px;
+      right: 10px;
+      background-color: #f5f5f5;
+      border: 1px solid #ccc;
+      padding: 5px 10px;
+      cursor: pointer;
+    }
+
+    .copy-button:hover {
+      background-color: #e0e0e0;
+    }
   </style>
 
 </head>
@@ -74,11 +92,29 @@ <h2>navigate</h2>
     <a href="page2.html">Go to Page 2</a>
   </section>
 
+  <section class="code-example">
+    <button class="copy-button" onclick="copyToClipboard(this)">Copy</button>
+    <pre><code>
+const exampleCode = 'This is an example code snippet.';
+console.log(exampleCode);
+    </code></pre>
+  </section>
+
   <script>
     document
       .querySelector('[data-testid="image-with-random-alt-tag"]')
       .setAttribute("alt", "Image Random Alt Text " + Math.random());
+
+    function copyToClipboard(button) {
+      const code = button.nextElementSibling.innerText;
+      navigator.clipboard.writeText(code).then(() => {
+        button.innerText = 'Copied!';
+        setTimeout(() => {
+          button.innerText = 'Copy';
+        }, 2000);
+      });
+    }
   </script>
 </body>
 
-</html>
+</html>