From 4f0ef5818be83071d6c2032080251b41039656f1 Mon Sep 17 00:00:00 2001
From: winches <329487092@qq.com>
Date: Sat, 28 Dec 2024 11:01:59 +0800
Subject: [PATCH] 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>
---
 .changeset/rich-moles-compare.md              |  5 ++++
 .../snippet/stories/snippet.stories.tsx       | 29 ++-----------------
 packages/hooks/use-clipboard/src/index.ts     | 10 ++++++-
 3 files changed, 17 insertions(+), 27 deletions(-)
 create mode 100644 .changeset/rich-moles-compare.md

diff --git a/.changeset/rich-moles-compare.md b/.changeset/rich-moles-compare.md
new file mode 100644
index 0000000000..c9b0dda54c
--- /dev/null
+++ b/.changeset/rich-moles-compare.md
@@ -0,0 +1,5 @@
+---
+"@nextui-org/use-clipboard": patch
+---
+
+Fix clipboard get different unicode whitespace (#4225)
diff --git a/packages/components/snippet/stories/snippet.stories.tsx b/packages/components/snippet/stories/snippet.stories.tsx
index 7f8b1011cf..00c5f9b0fc 100644
--- a/packages/components/snippet/stories/snippet.stories.tsx
+++ b/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",
     ],
   },
 };
diff --git a/packages/hooks/use-clipboard/src/index.ts b/packages/hooks/use-clipboard/src/index.ts
index 0063a4ca0b..f521bdd091 100644
--- a/packages/hooks/use-clipboard/src/index.ts
+++ b/packages/hooks/use-clipboard/src/index.ts
@@ -8,6 +8,11 @@ export interface UseClipboardProps {
   timeout?: number;
 }
 
+const transformValue = (text: string) => {
+  // Manually replace all &nbsp; 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 {