feat(components-CopyButton): implement CopyButton component (#771)

issue #701 close #762
sabertazimi · May 2, 2022 · 7a1f49b · 7a1f49b · vercel · May 2, 2022
1 parent 09e9645
commit 7a1f49b
Show file tree

Hide file tree

Showing 17 changed files with 1,006 additions and 8 deletions.
diff --git a/__mocks__/utils.ts b/__mocks__/utils.ts
@@ -0,0 +1,18 @@
+let navigatorClipboardMocked = false;
+const writeTextMock = jest.fn();
+
+const mockNavigatorClipboard = () => {
+  if (!navigatorClipboardMocked) {
+    Object.defineProperty(global.navigator, 'clipboard', {
+      value: {
+        writeText: writeTextMock,
+      },
+    });
+
+    navigatorClipboardMocked = true;
+  }
+
+  return { writeTextMock };
+};
+
+export { mockNavigatorClipboard };
diff --git a/components/CodeBlocks/Code.module.css b/components/CodeBlocks/Code.module.css
@@ -12,6 +12,7 @@
 }
 
 .block {
+  @apply relative !important;
   @apply mb-0 p-5 !important;
 }
 

diff --git a/components/CodeBlocks/Code.tsx b/components/CodeBlocks/Code.tsx
@@ -1,3 +1,4 @@
+import CopyButton from '@components/CopyButton';
 import { classNames } from '@components/utils';
 import type { Language } from 'prism-react-renderer';
 import Highlight, { defaultProps } from 'prism-react-renderer';
@@ -38,6 +39,7 @@ const BlockCode = ({
         className={classNames(className, styles.block)}
         style={style}
       >
+        <CopyButton code={normalizeCode(children)} />
         {tokens.map((line, index) => (
           <div key={index} {...getLineProps({ line, key: index })}>
             <span className={styles['line-number']}>{index + 1}</span>