From d1b645ec306307069e347674286dcb9574307512 Mon Sep 17 00:00:00 2001
From: Rajan <139620395+Rajankannaujiya@users.noreply.github.com>
Date: Tue, 25 Nov 2025 07:51:58 +0000
Subject: [PATCH 1/5] feat: implement copy button UI (#7698)
---
.../CodeBlockWithCopy/CodeBlockWithCopy.jsx | 72 ++++++++++++++++++
.../CodeBlockWithCopy/CodeBlockWithCopy.scss | 74 +++++++++++++++++++
src/mdx-components.js | 2 +
3 files changed, 148 insertions(+)
create mode 100644 src/components/CodeBlockWithCopy/CodeBlockWithCopy.jsx
create mode 100644 src/components/CodeBlockWithCopy/CodeBlockWithCopy.scss
diff --git a/src/components/CodeBlockWithCopy/CodeBlockWithCopy.jsx b/src/components/CodeBlockWithCopy/CodeBlockWithCopy.jsx
new file mode 100644
index 000000000000..07dd90a377f4
--- /dev/null
+++ b/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 (
+
+
+
+
+ {children}
+
+