add copy functionality

Author: avivkeller

src/generators/jsx-ast/utils/buildBarProps.mjs

@@ -42,6 +42,7 @@ export const buildMetaBarProps = (head, entries) => {
     .map(entry => ({
       depth: entry.heading.depth,
       value: entry.heading.data.name,
+      data: { id: entry.heading.data.slug },
     }));
 
   return {

src/generators/web/components/CodeBox.jsx

@@ -1,18 +1,28 @@
+import { useState } from 'react';
 import { getLanguageDisplayName } from '@node-core/rehype-shiki';
 import BaseCodeBox from '@node-core/ui-components/Common/BaseCodeBox';
 
 const MDXCodeBox = ({ className, ...props }) => {
   const matches = className?.match(/language-(?<language>[a-zA-Z]+)/);
   const language = matches?.groups?.language ?? '';
+  const [copyText, setCopyText] = useState('Copy to clipboard');
+
+  const handleCopy = async (text) => {
+    await navigator.clipboard.writeText(text);
+
+    setCopyText('Copied to clipboard!');
+    setTimeout(() => {
+      setCopyText('Copy to clipboard');
+    }, 500);
+  };
 
   return (
     <BaseCodeBox
       as={'a'}
-      onCopy={() => {}}
+      onCopy={handleCopy}
       language={getLanguageDisplayName(language)}
       {...props}
-      copyText={'Copy to clipboard'}
-      copiedText={'Copied to clipboard'}
+      copyText={copyText}
     />
   );
 };