Merge pull request #15759 from vedansha07/add-copy-button

Add copy-to-clipboard feature for code blocks in docs

Author: vkarpov15

docs/css/copy-code.css

@@ -0,0 +1,43 @@
+/* Base button placement & visibility */
+.copy-btn {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  background: transparent;
+  border: none;
+  padding: 4px;
+  cursor: pointer;
+
+  opacity: 0;
+  transform: translateY(-3px);
+  transition: opacity 0.18s ease, transform 0.18s ease, color 0.2s ease;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  color: #666; /* default icon color */
+}
+
+/* Show button only when the code block is hovered */
+pre:hover .copy-btn {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* Hover state always forces black — applies to both icons */
+.copy-btn:hover {
+  color: #000 !important;
+}
+
+/* Tick icon uses the same neutral grey so hover can override cleanly */
+.copy-btn.copied {
+  color: #666;
+}
+
+/* Icon sizing + smooth color transition */
+.copy-btn svg {
+  width: 20px;
+  height: 20px;
+  transition: color 0.2s ease;
+}

docs/js/copy-code.js

@@ -0,0 +1,51 @@
+'use strict';
+
+// Attach copy-button logic only after the full DOM is loaded
+document.addEventListener('DOMContentLoaded', () => {
+  // Inline SVG icons so no external asset load is required
+  const copyIcon = `
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+      <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
+      <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
+    </svg>
+  `;
+
+  const checkIcon = `
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+      <path d="M20 6L9 17l-5-5"></path>
+    </svg>
+  `;
+
+  // Inject a copy button into each <pre><code> block used in docs
+  document.querySelectorAll('pre code').forEach(block => {
+    const wrapper = block.parentElement;
+    wrapper.style.position = 'relative'; // ensures button can be positioned correctly
+
+    const btn = document.createElement('button');
+    btn.className = 'copy-btn';
+    btn.setAttribute('aria-label', 'Copy code to clipboard'); // accessibility support
+    btn.innerHTML = copyIcon; // initial icon state
+
+    // Handle the copy-to-clipboard action
+    btn.onclick = async() => {
+      if (btn.dataset.locked) return; // prevents multiple fast clicks
+      btn.dataset.locked = '1';
+
+      // Uses Clipboard API to copy code block text
+      await navigator.clipboard.writeText(block.textContent);
+
+      // Show success tick briefly
+      btn.innerHTML = checkIcon;
+      btn.classList.add('copied');
+
+      // Restore original icon after delay
+      setTimeout(() => {
+        btn.innerHTML = copyIcon;
+        btn.classList.remove('copied');
+        btn.dataset.locked = '';
+      }, 1200);
+    };
+
+    wrapper.appendChild(btn); // attach button to code block
+  });
+});

docs/layout.pug

@@ -13,6 +13,8 @@ html(lang='en')
       link(rel="stylesheet", href=`${versions.versionedPath}/docs/css/github.css`)
       link(rel="stylesheet", href=`${versions.versionedPath}/docs/css/mongoose5.css`)
       link(rel="stylesheet", href=`${versions.versionedPath}/docs/css/carbonads.css`)
+      link(rel="stylesheet", href=`${versions.versionedPath}/docs/css/copy-code.css`)
+
 
       meta(name='msapplication-TileColor', content='#ffffff')
       meta(name='msapplication-TileImage', content=`${versions.versionedPath}/docs/images/favicon/ms-icon-144x144.png`)
@@ -172,3 +174,6 @@ html(lang='en')
 
         script(type="text/javascript" src=`${versions.versionedPath}/docs/js/navbar-search.js`)
         script(type="text/javascript" src=`${versions.versionedPath}/docs/js/mobile-navbar-toggle.js`)
+
+        script(type="text/javascript" src=`${versions.versionedPath}/docs/js/copy-code.js`)
+