feat: implement copy button UI (#7698)

Author: Rajankannaujiya

src/components/CodeBlockWithCopy/CodeBlockWithCopy.jsx

@@ -0,0 +1,72 @@
+import { useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import './CodeBlockWithCopy.scss';
+
+export default function CodeBlockWithCopy({ children }) {
+  const preRef = useRef(null);
+  const [copyStatus, setCopyStatus] = useState('copy');
+
+  const handleCopy = async () => {
+    if (!preRef.current) return;
+
+    const codeElement = preRef.current.querySelector('code');
+    if (!codeElement) return;
+
+    const codeText = codeElement.textContent;
+    let successfulCopy = false;
+
+    // Try modern API (navigator.clipboard) -> as document.execCommand() deprecated
+    try {
+      if (navigator.clipboard && window.isSecureContext) {
+        await navigator.clipboard.writeText(codeText);
+        successfulCopy = true;
+      }
+    } catch (err) {
+      console.log(err);
+    }
+
+    // If modern API failed, fall back to deprecated document.execCommand('copy')
+    if (!successfulCopy) {
+      const textarea = document.createElement('textarea');
+      textarea.value = codeText;
+      textarea.style.position = 'fixed';
+      textarea.style.opacity = '0';
+
+      document.body.appendChild(textarea);
+      textarea.select();
+
+      try {
+        // This deprecated method is kept as a fallback for compatibility/iframe environments.
+        successfulCopy = document.execCommand('copy');
+      } catch (err) {
+        successfulCopy = false;
+        console.log(err);
+      }
+
+      document.body.removeChild(textarea);
+    }
+
+    setCopyStatus(successfulCopy ? 'copied' : 'error');
+    setTimeout(() => setCopyStatus('copy'), 2000);
+  };
+
+  return (
+    <div className="code-block-wrapper">
+      <button onClick={handleCopy} className={`copy-button ${copyStatus}`}>
+        {copyStatus === 'copied'
+          ? 'Copied!'
+          : copyStatus === 'error'
+            ? 'Error'
+            : 'Copy'}
+      </button>
+
+      <pre ref={preRef} className="code-block">
+        {children}
+      </pre>
+    </div>
+  );
+}
+
+CodeBlockWithCopy.propTypes = {
+  children: PropTypes.node.isRequired,
+};

src/components/CodeBlockWithCopy/CodeBlockWithCopy.scss

@@ -0,0 +1,74 @@
+.code-block-wrapper {
+  position: relative;
+  margin-bottom: 1.5rem;
+}
+
+.code-block {
+  background-color: #2d3748;
+  color: #e2e8f0;
+  padding: 1rem;
+  padding-right: 3.5rem;
+  border-radius: 0.5rem;
+  overflow-x: auto;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
+
+  code {
+    font-family: monospace;
+  }
+}
+
+.copy-button {
+  position: absolute;
+  top: 0.32rem;
+  right: 0.5rem;
+  z-index: 10;
+
+  padding: 0.4rem 0.7rem;
+  border-radius: 0.35rem;
+
+  border: none;
+  cursor: pointer;
+
+  font-size: 0.75rem;
+  font-weight: 500;
+
+  /* Always visible */
+  opacity: 1;
+
+  background-color: #7c3aed;
+  color: #e2e8f0;
+
+  transition:
+    background-color 0.2s,
+    transform 0.1s;
+
+  &:hover {
+    background-color: #6d28d9;
+  }
+
+  /* Success */
+  &.copied {
+    background-color: #38a169;
+  }
+  &.copied:hover {
+    background-color: #2f855a;
+  }
+
+  /* Error */
+  &.error {
+    background-color: #e53e3e;
+  }
+  &.error:hover {
+    background-color: #c53030;
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:active {
+    transform: scale(0.95);
+  }
+}

src/mdx-components.js

@@ -1,12 +1,14 @@
 import Badge from './components/Badge/Badge';
 import LinkComponent from './components/mdxComponents/Link';
 import StackBlitzPreview from './components/StackBlitzPreview/StackBlitzPreview';
+import CodeBlockWithCopy from './components/CodeBlockWithCopy/CodeBlockWithCopy';
 
 /** @returns {import('mdx/types.js').MDXComponents} */
 export function useMDXComponents() {
   return {
     a: LinkComponent,
     Badge: Badge,
     StackBlitzPreview: StackBlitzPreview,
+    pre: CodeBlockWithCopy,
   };
 }