feat(theme-doc): add copy-to-clipboard to CodeBlock (#86)

* feat(theme-doc): add copy-to-clipboard

* fix: use css module

* simplify copy button styles

* fix copy button background

* improve code block style

* chore: rename copy

* border style

Co-authored-by: csr632 <[email protected]>

Author: cijiugechu

packages/theme-doc/package.json

@@ -46,6 +46,7 @@
     "babel-plugin-import": "^1.13.3",
     "chokidar": "^3.5.1",
     "concurrently": "^7.3.0",
+    "copy-to-clipboard": "^3.3.2",
     "fs-extra": "^10.1.0",
     "github-markdown-css": "^4.0.0",
     "github-slugger": "^1.3.0",

packages/theme-doc/src/Layout/Demo/index.module.css

@@ -58,6 +58,5 @@
 }
 
 .code .codeInner {
-  padding: 16px 32px;
-  display: inline-block;
+  padding: 0px 8px;
 }

packages/theme-doc/src/Layout/MDX/CodeBlock.module.less

@@ -0,0 +1,47 @@
+.pre {
+  position: relative;
+
+  .copy {
+    opacity: 0;
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    z-index: 3;
+    display: block;
+    border-radius: 4px;
+    border: 2px solid #c3c5c6;
+    width: 40px;
+    height: 40px;
+    cursor: pointer;
+    background-position: 50%;
+    background-size: 20px;
+    background-repeat: no-repeat;
+    background-color: rgba(255, 255, 255, 0.05);
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2'/%3E%3C/svg%3E");
+    transition: opacity 0.4s;
+  }
+
+  .copied {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2m-6 9 2 2 4-4'/%3E%3C/svg%3E");
+
+    &::before {
+      position: absolute;
+      display: inline-block;
+      right: 120%;
+      top: 50%;
+      transform: translate(0, -50%);
+      color: #999988;
+      font-size: 12px;
+      font-weight: 500;
+      font-family: consolas;
+      white-space: nowrap;
+      content: 'Copied';
+    }
+  }
+
+  &:hover {
+    .copy {
+      opacity: 1;
+    }
+  }
+}

packages/theme-doc/src/Layout/MDX/CodeBlock.tsx

@@ -2,6 +2,8 @@ import React from 'react'
 import Highlight, { defaultProps } from 'prism-react-renderer'
 import theme from 'prism-react-renderer/themes/github'
 import type { Language } from 'prism-react-renderer'
+import { useCopyToClipBoard } from './useCopyToClipBoard'
+import s from './CodeBlock.module.less'
 
 // copied from https://mdxjs.com/guides/syntax-highlighting
 
@@ -18,6 +20,9 @@ const CodeBlock = ({
 }: Props) => {
   // with ```language\n``` md syntax, mdx will pass language in className
   const language = className?.replace(/language-/, '') as Language
+
+  const { hasCopied, copyToClipBoard } = useCopyToClipBoard()
+
   return (
     <Highlight
       {...defaultProps}
@@ -27,9 +32,14 @@ const CodeBlock = ({
     >
       {({ className, style, tokens, getLineProps, getTokenProps }) => (
         <pre
-          className={className}
+          className={`${className} ${s.pre}`}
           style={propStyle ? { ...style, ...propStyle } : style}
         >
+          <button
+            className={`${s.copy} ${hasCopied ? s.copied : ''}`}
+            onClick={() => copyToClipBoard(children)}
+          ></button>
+
           {tokens.map((line, i) => (
             <div key={i} {...getLineProps({ line, key: i })}>
               {line.map((token, key) => (

packages/theme-doc/src/Layout/MDX/useCopyToClipBoard.ts

@@ -0,0 +1,25 @@
+import { useState, useRef } from 'react'
+import writeText from 'copy-to-clipboard'
+
+const useCopyToClipBoard = () => {
+  const timer = useRef<any>()
+  const [hasCopied, setHasCopied] = useState(false)
+
+  // allow users to copy multiple times
+  // in a short interval of time.
+  const copyToClipBoard = (value: string) => {
+    setHasCopied(true)
+    clearTimeout(timer.current)
+    writeText(value)
+    timer.current = setTimeout(() => {
+      setHasCopied(false)
+    }, 2 * 1000)
+  }
+
+  return {
+    hasCopied,
+    copyToClipBoard,
+  }
+}
+
+export { useCopyToClipBoard }