Add copy button

Add dark mode

Add copy hooks
Add copy button on post

components/mdx/Pre.tsx

@@ -0,0 +1,45 @@
+import classNames from 'classnames';
+import useCopyToClipboard from 'lib/hooks/useCopyToClipboard';
+import {
+  DetailedHTMLProps,
+  HTMLAttributes,
+  lazy,
+  Suspense,
+  useRef,
+} from 'react';
+
+const CopyButton = lazy(() => import('components/post/CopyButton'));
+
+type Props = {} & DetailedHTMLProps<
+  HTMLAttributes<HTMLPreElement>,
+  HTMLPreElement
+>;
+
+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
+        ref={preRef}
+        className={classNames(className, 'relative group')}
+        {...props}
+      >
+        {children}
+        <Suspense fallback>
+          <CopyButton onCopy={handleCopy} />
+        </Suspense>
+      </pre>
+    </>
+  );
+};
+
+export default Pre;

components/mdx/components.ts

@@ -1,13 +1,15 @@
-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';
 
 const components = {
   RUASandpack,
   a: Anchor,
+  pre: Pre,
   Image,
   Tab,
   TabItem,

components/post/CopyButton.tsx

@@ -0,0 +1,67 @@
+import classNames from 'classnames';
+import { useState } from 'react';
+import styles from './CopytButton.module.css';
+
+export type CopyButtonProps = {
+  onCopy?: () => void;
+};
+
+const CopyButton = ({ onCopy: onClick }: CopyButtonProps) => {
+  const [copied, setCopied] = useState(false);
+  const handleClick = () => {
+    onClick?.();
+    setCopied(true);
+    setTimeout(() => {
+      setCopied(false);
+    }, 1000);
+  };
+
+  return (
+    <>
+      <button
+        className={classNames(
+          'flex items-center justify-center',
+          'border rounded-md absolute',
+          'top-4 right-4 p-[6px] opacity-0',
+          'group-hover:opacity-100',
+          'transition-opacity dark:border-gray-700',
+          'duration-300',
+          styles.btn
+        )}
+        onClick={handleClick}
+      >
+        <span
+          className={classNames(
+            'relative w-5 h-5 text-gray-400 child',
+            'transition-all duration-300',
+            styles.child
+          )}
+        >
+          <svg
+            className={classNames(
+              'absolute top-0 left-0 fill-current',
+              'opacity-100 transition-all duration-300',
+              copied && styles['on_copy']
+            )}
+            viewBox="0 0 24 24"
+          >
+            <path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path>
+          </svg>
+          <svg
+            className={classNames(
+              'absolute top-0 left-0 fill-green-400',
+              'scale-[0.33] transition-all duration-300',
+              'opacity-0',
+              copied && styles['on_ok']
+            )}
+            viewBox="0 0 24 24"
+          >
+            <path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path>
+          </svg>
+        </span>
+      </button>
+    </>
+  );
+};
+
+export default CopyButton;

components/post/CopytButton.module.css

@@ -0,0 +1,12 @@
+.btn:hover .child {
+  @apply text-gray-600;
+}
+
+.on_copy {
+  transform: scale(0.33);
+  @apply opacity-0;
+}
+.on_ok {
+  transform: scale(1);
+  @apply opacity-100;
+}

lib/hooks/useCopyToClipboard.ts

@@ -0,0 +1,57 @@
+import { useCallback, useState } from 'react';
+
+type CopiedValue = string | null;
+type CopyFn = (text: string) => Promise<boolean>; // Return success
+
+/**
+ * 使用 clipboard API writeText 写入字符到剪贴板
+ * copy 方法为 memoized
+ * @returns
+ */
+function useCopyToClipboard() {
+  const [copiedText, setCopiedText] = useState<CopiedValue>(null);
+
+  const copy: CopyFn = useCallback(async (text) => {
+    const copyWithOldWay = () => {
+      try {
+        const el = document.createElement('textarea');
+        el.value = text;
+        el.setAttribute('readonly', '');
+        el.style.position = 'absolute';
+        el.style.left = '-9999px';
+        document.body.appendChild(el);
+        el.select();
+        document.execCommand('copy');
+        document.body.removeChild(el);
+        return true;
+      } catch (e) {
+        console.warn('Copy failed', e);
+        return false;
+      }
+    };
+
+    const copyWithClipboardAPI = async () => {
+      // Try to save to clipboard then save it in the state if worked
+      try {
+        await navigator.clipboard.writeText(text);
+        setCopiedText(text);
+        return true;
+      } catch (error) {
+        console.warn('Copy failed', error);
+        setCopiedText(null);
+        return false;
+      }
+    };
+
+    if (!navigator?.clipboard) {
+      console.warn('Clipboard not supported');
+      return copyWithOldWay();
+    } else {
+      return await copyWithClipboardAPI();
+    }
+  }, []);
+
+  return { copiedText, copy };
+}
+
+export default useCopyToClipboard;