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 <[email protected]>
nextui-org · Dec 28, 2024 · 4f0ef58 · 4f0ef58
1 parent a83388a
commit 4f0ef58
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 27 deletions.
diff --git a/.changeset/rich-moles-compare.md 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
@@ -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
@@ -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 {