Merge pull request #170 from patelvivekdev/master

Add: Copy Code Feature in the Documentation

Author: mikecao

src/assets/clipboard.svg

@@ -1,6 +1,8 @@
 import { MDXRemote } from 'next-mdx-remote/rsc';
+import { useMDXComponents } from 'mdx-components';
 
 export default function Markdown({ children }) {
+  const mdxComponents = useMDXComponents({});
   // @ts-expect-error Server Component
-  return <MDXRemote source={children as any} />;
+  return <MDXRemote source={children as any} components={{ ...mdxComponents }} />;
 }

src/components/common/Markdown.tsx

@@ -0,0 +1,21 @@
+.container {
+    position: relative;
+}
+
+
+.button {
+    border:0px;
+    color: var(--base900);
+    background: var(--base100);
+    position: absolute;
+    right: 0.5rem;
+    top: 0.5rem;
+    height: 2rem;
+    width: 2rem;
+    cursor: pointer;
+    font-size: max(14px, min(2vw, 16px));
+}
+
+.clipboard {
+    color: var(--primary400)
+}

src/components/common/Pre.module.css

@@ -0,0 +1,38 @@
+'use client';
+import { useState, useRef } from 'react';
+import Clipboard from 'assets/clipboard.svg';
+import styles from './Pre.module.css';
+
+const Pre = (props: any) => {
+  const textInput = useRef<any>(null);
+  const [hovered, setHovered] = useState(false);
+  const [copied, setCopied] = useState(false);
+
+  const onEnter = () => {
+    setHovered(true);
+  };
+  const onExit = () => {
+    setHovered(false);
+    setCopied(false);
+  };
+  const onCopy = () => {
+    setCopied(true);
+    navigator.clipboard.writeText(textInput?.current?.textContent);
+    setTimeout(() => {
+      setCopied(false);
+    }, 2500);
+  };
+
+  return (
+    <div ref={textInput} onMouseEnter={onEnter} onMouseLeave={onExit} className={styles.container}>
+      {hovered && (
+        <button aria-label="Copy code" className={styles.button} onClick={onCopy}>
+          {copied ? <Clipboard className={styles.clipboard} /> : <Clipboard />}
+        </button>
+      )}
+      <pre>{props.children}</pre>
+    </div>
+  );
+};
+
+export default Pre;

src/components/common/Pre.tsx

@@ -1,5 +1,6 @@
 import type { MDXComponents } from 'mdx/types';
 import Link, { LinkProps } from 'next/link';
+import Pre from 'components/common/Pre';
 
 // This file allows you to provide custom React components
 // to be used in MDX files. You can import and use any
@@ -12,6 +13,7 @@ export function useMDXComponents(components: MDXComponents): MDXComponents {
     // Allows customizing built-in components, e.g. to add styling.
     // h1: ({ children }) => <h1 style={{ fontSize: "100px" }}>{children}</h1>,
     a: props => <Link {...(props as LinkProps)} />,
+    pre: Pre,
     ...components,
   };
 }