From 66c39ef87674224931abcb8178e23bf964b766f5 Mon Sep 17 00:00:00 2001
From: Shahed Nasser <shahednasser@gmail.com>
Date: Sun, 18 Aug 2024 18:01:15 +0300
Subject: [PATCH] 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                 |  1 -
 .../docs-ui/src/components/Sidebar/index.tsx      |  2 +-
 www/packages/docs-ui/src/hooks/use-copy/index.tsx | 15 +++++++++------
 .../docs-ui/src/providers/ColorMode/index.tsx     |  2 +-
 www/yarn.lock                                     |  8 --------
 5 files changed, 11 insertions(+), 17 deletions(-)

diff --git a/www/packages/docs-ui/package.json b/www/packages/docs-ui/package.json
index 57a1e236f8..016bfd5202 100644
--- a/www/packages/docs-ui/package.json
+++ b/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",
diff --git a/www/packages/docs-ui/src/components/Sidebar/index.tsx b/www/packages/docs-ui/src/components/Sidebar/index.tsx
index dab63f0724..e6f2332455 100644
--- a/www/packages/docs-ui/src/components/Sidebar/index.tsx
+++ b/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)
     },
diff --git a/www/packages/docs-ui/src/hooks/use-copy/index.tsx b/www/packages/docs-ui/src/hooks/use-copy/index.tsx
index 7dfac0cf42..f5e35114f1 100644
--- a/www/packages/docs-ui/src/hooks/use-copy/index.tsx
+++ b/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), [])
diff --git a/www/packages/docs-ui/src/providers/ColorMode/index.tsx b/www/packages/docs-ui/src/providers/ColorMode/index.tsx
index df1fb6b7b2..b9ab406009 100644
--- a/www/packages/docs-ui/src/providers/ColorMode/index.tsx
+++ b/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(() => {
diff --git a/www/yarn.lock b/www/yarn.lock
index 75350b9430..38fc738606 100644
--- a/www/yarn.lock
+++ b/www/yarn.lock
@@ -6510,13 +6510,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"copy-text-to-clipboard@npm:^3.2.0":
-  version: 3.2.0
-  resolution: "copy-text-to-clipboard@npm:3.2.0"
-  checksum: d60fdadc59d526e19d56ad23cec2b292d33c771a5091621bd322d138804edd3c10eb2367d46ec71b39f5f7f7116a2910b332281aeb36a5b679199d746a8a5381
-  languageName: node
-  linkType: hard
-
 "copy-to-clipboard@npm:^3.3.3":
   version: 3.3.3
   resolution: "copy-to-clipboard@npm:3.3.3"
@@ -7264,7 +7257,6 @@ __metadata:
     "@uidotdev/usehooks": ^2.4.1
     algoliasearch: ^4.20.0
     clsx: ^2.0.0
-    copy-text-to-clipboard: ^3.2.0
     cpy-cli: ^5.0.0
     eslint: ^8
     eslint-config-docs: "*"