docs: bug fixes for copy and color mode (#8626)

* docs: bug fixes for copy and color mode

* remove unused dependency

www/packages/docs-ui/package.json

@@ -67,7 +67,6 @@
     "@segment/analytics-next": "^1.55.0",
     "@uidotdev/usehooks": "^2.4.1",
     "algoliasearch": "^4.20.0",
-    "copy-text-to-clipboard": "^3.2.0",
     "framer-motion": "^11.3.21",
     "mermaid": "^10.9.0",
     "npm-to-yarn": "^2.1.0",

www/packages/docs-ui/src/components/Sidebar/index.tsx

@@ -46,7 +46,7 @@ export const Sidebar = ({
   })
   useKeyboardShortcut({
     metakey: true,
-    shortcutKeys: ["."],
+    shortcutKeys: ["\\"],
     action: () => {
       setDesktopSidebarOpen((prev) => !prev)
     },

www/packages/docs-ui/src/hooks/use-copy/index.tsx

@@ -1,7 +1,6 @@
 "use client"
 
 import { useCallback, useEffect, useRef, useState } from "react"
-import copy from "copy-text-to-clipboard"
 
 type useCopyReturnType = {
   isCopied: boolean
@@ -13,11 +12,15 @@ export const useCopy = (text: string): useCopyReturnType => {
   const copyTimeout = useRef<number>(0)
 
   const handleCopy = useCallback(() => {
-    copy(text)
-    setIsCopied(true)
-    copyTimeout.current = window.setTimeout(() => {
-      setIsCopied(false)
-    }, 1000)
+    navigator.clipboard
+      .writeText(text.trim())
+      .then(() => {
+        setIsCopied(true)
+        copyTimeout.current = window.setTimeout(() => {
+          setIsCopied(false)
+        }, 1000)
+      })
+      .catch(console.error)
   }, [text])
 
   useEffect(() => () => window.clearTimeout(copyTimeout.current), [])

www/packages/docs-ui/src/providers/ColorMode/index.tsx

@@ -31,8 +31,8 @@ export const ColorModeProvider = ({ children }: ColorModeProviderProps) => {
     const theme = localStorage.getItem("theme")
     if (theme && (theme === "light" || theme === "dark")) {
       setColorMode(theme)
-      setLoaded(true)
     }
+    setLoaded(true)
   }, [])
 
   useEffect(() => {