Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: clipboard get the different unicode whitespace #4392

Open
wants to merge 3 commits into
base: canary
Choose a base branch
from
+19 −28
Open

fix: clipboard get the different unicode whitespace #4392

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1d445bb
fix: clipboard get the different unicode whitespace
winchesHe Dec 18, 2024
ad5cd06
fix: clipboard get the different unicode whitespace
winchesHe Dec 18, 2024
f11aebe
fix(snippet): incorrect MultiLine story
wingkwong Dec 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .changeset/rich-moles-compare.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"@nextui-org/use-clipboard": patch
"@nextui-org/snippet": patch
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

not required (?)

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

if the use-clipboard upgrade to 2.1.2 then the latest @nextui-org/snippet is using 2.1.1 will it upgrades too? or we can delete it

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@nextui-org/snippet has a dependency on use-clipboard. When use-clipboard got bumped, @nextui-org/snippet will be also bumped automatically by changeset.

---

Fix clipboard get different unicode whitespace (#4225)
29 changes: 3 additions & 26 deletions packages/components/snippet/stories/snippet.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Comment on lines +95 to +97
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

Installation commands are consistent with documentation but missing framer-motion dependency

The current snippet shows only @nextui-org/react installation commands, but the documentation consistently shows that framer-motion is a required peer dependency that should be installed alongside it. Consider updating the snippet to include the peer dependency:

      "npm install @nextui-org/react framer-motion",
      "yarn add @nextui-org/react framer-motion",
      "pnpm add @nextui-org/react framer-motion",
🔗 Analysis chain

LGTM! Installation commands are clear and follow standard format.

The installation commands are correctly formatted for all three package managers (npm, yarn, pnpm) and provide a good example for the MultiLine snippet variant.

Let's verify the package name consistency across the repository:

Let me analyze the package name consistency across the repository with another search to specifically look for installation commands:

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Verify package name consistency in documentation and configuration files
# Expected: All installation commands should use "@nextui-org/react"

# Search for package installation commands in markdown and documentation files
rg -g '*.{md,mdx}' '@nextui-org/react'

# Check package.json for the correct package name
fd 'package.json' --exec jq -r '.name' {}

Length of output: 66661

Script:

#!/bin/bash
# Search for package installation commands in markdown and documentation files
rg -g '*.{md,mdx}' -A 1 -B 1 'npm (i|install|add) @nextui-org/react|yarn add @nextui-org/react|pnpm add @nextui-org/react'

Length of output: 4707

],
},
};
12 changes: 10 additions & 2 deletions packages/hooks/use-clipboard/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,18 +33,26 @@ export function useClipboard({timeout = 2000}: UseClipboardProps = {}) {
[onClearTimeout, timeout],
);

const transformWhitespace = useCallback((text: string) => {
// Manually replace all whitespace to avoid get different unicode characters;
return text.replace(/\s/g, " ");
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's say if my input is a json format (says it got 20 lines), I copy it and paste to my editor. The pasted value will be just one line, which is not expected. Current behaviour is the paste value is same as how it looks as input.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can you send me the issue input, i will handle it

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Retrieved from the reported issue

{
  "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"
    }
  ]
}

}, []);

const copy = useCallback(
(valueToCopy: any) => {
if ("clipboard" in navigator) {
const decodedValue =
typeof valueToCopy === "string" ? transformWhitespace(valueToCopy) : valueToCopy;

navigator.clipboard
.writeText(valueToCopy)
.writeText(decodedValue)
.then(() => handleCopyResult(true))
.catch((err) => setError(err));
} else {
setError(new Error("useClipboard: navigator.clipboard is not supported"));
}
},
[handleCopyResult],
[handleCopyResult, transformWhitespace],
);

const reset = useCallback(() => {
Expand Down
Loading