fix: clipboard get the different unicode whitespace (#4392)

* fix: clipboard get the different unicode whitespace

* fix: clipboard get the different unicode whitespace

* fix(snippet): incorrect MultiLine story

* fix: nbsp in editor

* fix: rename

* fix: md

* feat: optimization

---------

Co-authored-by: WK Wong <wingkwong.code@gmail.com>

Author: winchesHe

.changeset/rich-moles-compare.md

@@ -0,0 +1,5 @@
+---
+"@nextui-org/use-clipboard": patch
+---
+
+Fix clipboard get different unicode whitespace (#4225)

packages/components/snippet/stories/snippet.stories.tsx

@@ -92,32 +92,9 @@ export const MultiLine = {
   args: {
     ...defaultProps,
     children: [
-      // "npm install @nextui-org/react",
-      // "yarn add @nextui-org/react",
-      // "pnpm add @nextui-org/react",
-      `
-{
-  "name": "Next.js PWA",
-  "short_name": "NextPWA",
-  "description": "A Progressive Web App built with Next.js and React",
-  "start_url": "/",
-  "display": "standalone",
-  "background_color": "#ffffff",
-  "theme_color": "#000000",
-  "icons": [
-    {
-      "src": "/icon-192x192.png",
-      "sizes": "192x192",
-      "type": "image/png"
-    },
-    {
-      "src": "/icon-512x512.png",
-      "sizes": "512x512",
-      "type": "image/png"
-    }
-  ]
-}
-`,
+      "npm install @nextui-org/react",
+      "yarn add @nextui-org/react",
+      "pnpm add @nextui-org/react",
     ],
   },
 };

packages/hooks/use-clipboard/src/index.ts

@@ -8,6 +8,11 @@ export interface UseClipboardProps {
   timeout?: number;
 }
 
+const transformValue = (text: string) => {
+  // Manually replace all   to avoid get different unicode characters;
+  return text.replace(/[\u00A0]/g, " ");
+};
+
 /**
  * Copies the given text to the clipboard.
  * @param {number} timeout - timeout in ms, default 2000
@@ -36,8 +41,11 @@ export function useClipboard({timeout = 2000}: UseClipboardProps = {}) {
   const copy = useCallback(
     (valueToCopy: any) => {
       if ("clipboard" in navigator) {
+        const transformedValue =
+          typeof valueToCopy === "string" ? transformValue(valueToCopy) : valueToCopy;
+
         navigator.clipboard
-          .writeText(valueToCopy)
+          .writeText(transformedValue)
           .then(() => handleCopyResult(true))
           .catch((err) => setError(err));
       } else {