feat: Add support for copy button (#314)

* Add support for copy button

* Minor fixes

* Clean up global styles

* Update CopyButton components

* Update rehypeCopyButton helper

* Update CopyButton entrypoint

* Minor changes

* Code

---------

Co-authored-by: Antoine BERNIER <antoine.bernier@gmail.com>

src/app/globals.css

@@ -45,7 +45,6 @@ body {
 
 code[class*='language-'],
 pre[class*='language-'] {
- background: none;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
@@ -70,13 +69,6 @@ pre[class*='language-'] {
  --falsy: #f087bd;
  --linenumber-border-width: theme('space.1');
  --pad: theme('space.6');
-
- @apply my-5 overflow-auto rounded-lg p-[--pad] font-mono text-sm;
-}
-
-:not(pre) > code[class*='language-'],
-pre[class*='language-'] {
- @apply bg-inverse-surface-light;
 }
 
 /* Inline code */

src/components/mdx/Code/Code.tsx

@@ -0,0 +1,59 @@
+'use client'
+
+import cn from '@/lib/cn'
+import { ComponentProps, ReactNode, useEffect, useState } from 'react'
+import { TbClipboard, TbClipboardCheck } from 'react-icons/tb'
+
+export const Code = ({ children, className, ...props }: ComponentProps<'pre'>) => {
+ const [copied, setCopied] = useState(false)
+
+ const handleClick = async () => {
+ const textToCopy = extractTextFromChildren(children)
+
+ await navigator.clipboard.writeText(textToCopy)
+ setCopied(true)
+ }
+
+ useEffect(() => {
+ if (!copied) return
+ const int = setTimeout(() => setCopied(false), 2000)
+ return () => clearTimeout(int)
+ }, [copied])
+
+ return (
+ <div className={cn('relative')}>
+ <pre
+ {...props}
+ className={cn(
+ className,
+ 'bg-inverse-surface-light my-5 overflow-auto rounded-lg p-[--pad] font-mono text-sm',
+ )}
+ >
+ {children}
+ </pre>
+ <button
+ className="absolute right-0 top-0 m-4 flex size-8 items-center justify-center rounded-md text-outline-variant transition-colors hover:text-outline"
+ onClick={handleClick}
+ >
+ {copied ? <TbClipboardCheck className="size-6" /> : <TbClipboard className="size-6" />}
+ </button>
+ </div>
+ )
+}
+
+// Recursive function to extract text content from React nodes
+const extractTextFromChildren = (children: ReactNode): string => {
+ if (typeof children === 'string') {
+ return children
+ }
+
+ if (Array.isArray(children)) {
+ return children.map(extractTextFromChildren).join('')
+ }
+
+ if (typeof children === 'object' && children !== null && 'props' in children) {
+ return extractTextFromChildren(children.props.children)
+ }
+
+ return ''
+}

src/components/mdx/Code/index.ts

@@ -0,0 +1 @@
+export * from './Code'

src/components/mdx/Code/rehypeCode.ts

@@ -0,0 +1,19 @@
+import type { Root } from 'hast'
+import { visit } from 'unist-util-visit'
+
+export function rehypeCode() {
+ return () => (tree: Root) => {
+ visit(tree, null, function (node) {
+ // console.log('node', node)
+
+ const isMDPre =
+ 'tagName' in node &&
+ node.tagName === 'pre' &&
+ node.properties?.className?.toString()?.includes('language-')
+
+ if (isMDPre) {
+ node.tagName = 'Code' // map to <Code> React component
+ }
+ })
+ }
+}

src/components/mdx/index.tsx

@@ -1,3 +1,4 @@
+export * from './Code'
 export * from './Codesandbox'
 export * from './Details'
 export * from './Gha'

src/utils/docs.tsx

@@ -1,5 +1,6 @@
 import type { Doc, DocToC } from '@/app/[...slug]/DocsContext'
 import * as components from '@/components/mdx'
+import { rehypeCode } from '@/components/mdx/Code/rehypeCode'
 import { Codesandbox } from '@/components/mdx/Codesandbox'
 import { fetchCSB } from '@/components/mdx/Codesandbox/fetchCSB'
 import { rehypeCodesandbox } from '@/components/mdx/Codesandbox/rehypeCodesandbox'
@@ -156,6 +157,7 @@ async function _getDocs(
  rehypeSummary,
  rehypeGha,
  rehypePrismPlus,
+ rehypeCode(),
  rehypeCodesandbox(boxes), // 1. put all Codesandbox[id] into `doc.boxes`
  rehypeToc(tableOfContents, url, title), // 2. will populate `doc.tableOfContents`
  ],