Add copy hooks

Add copy button on post

components/mdx/Pre.tsx

@@ -1,5 +1,12 @@
 import classNames from 'classnames';
-import { DetailedHTMLProps, HTMLAttributes, lazy, Suspense } from 'react';
+import useCopyToClipboard from 'lib/hooks/useCopyToClipboard';
+import {
+  DetailedHTMLProps,
+  HTMLAttributes,
+  lazy,
+  Suspense,
+  useRef,
+} from 'react';
 
 const CopyButton = lazy(() => import('components/post/CopyButton'));
 
@@ -11,12 +18,24 @@ type Props = {} & DetailedHTMLProps<
 const Pre = ({ ...rest }: Props) => {
   const { children, className, ...props } = rest;
 
+  const preRef = useRef<HTMLPreElement>(null);
+  const { copy } = useCopyToClipboard();
+  const handleCopy = () => {
+    if (!preRef.current) throw new Error('Can not access pre element.');
+    if (preRef.current.textContent == null) return;
+    copy(preRef.current.textContent);
+  };
+
   return (
     <>
-      <pre className={classNames(className, 'relative group')} {...props}>
+      <pre
+        ref={preRef}
+        className={classNames(className, 'relative group')}
+        {...props}
+      >
         {children}
         <Suspense fallback>
-          <CopyButton />
+          <CopyButton onCopy={handleCopy} />
         </Suspense>
       </pre>
     </>

components/mdx/components.ts

@@ -1,10 +1,10 @@
-import RUASandpack from 'components/RUA/RUASandpack';
 import Anchor from 'components/mdx/Anchor';
 import Image from 'components/mdx/Image';
+import Pre from 'components/mdx/Pre';
+import RUACodeSandbox from 'components/RUA/RUACodeSandbox';
+import RUASandpack from 'components/RUA/RUASandpack';
 import Tab from 'components/RUA/tab';
 import TabItem from 'components/RUA/tab/TabItem';
-import RUACodeSandbox from 'components/RUA/RUACodeSandbox';
-import Pre from 'components/mdx/Pre';
 
 const components = {
   RUASandpack,