-
-
Notifications
You must be signed in to change notification settings - Fork 1.6k
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.
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
base: canary
Are you sure you want to change the base?
Conversation
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
🦋 Changeset detectedLatest commit: f11aebe The changes in this PR will be included in the next version bump. This PR includes changesets to release 3 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
WalkthroughThe pull request introduces changes to the Changes
Assessment against linked issues
Possibly related PRs
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 0
🧹 Nitpick comments (2)
packages/hooks/use-clipboard/src/index.ts (2)
36-39
: Enhance the function documentation for clarityWhile the implementation is correct, the comment could be more specific about which Unicode whitespace characters are being normalized (e.g., non-breaking spaces, zero-width spaces, em spaces, etc.).
Consider updating the comment like this:
- // Manually replace all whitespace to avoid get different unicode characters; + // Normalize all Unicode whitespace characters (e.g., \u00A0, \u2003, \u200B) to a standard space + // to ensure consistent clipboard behavior across different text sources
Line range hint
3-14
: Consider making whitespace transformation configurableThe current implementation always normalizes whitespace, but some use cases might need to preserve the original formatting. Consider adding an option to disable this behavior.
Add a new prop to the interface:
export interface UseClipboardProps { /** * The time in milliseconds to wait before resetting the clipboard. * @default 2000 */ timeout?: number; + /** + * Whether to normalize whitespace characters when copying text. + * @default true + */ + normalizeWhitespace?: boolean; }
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
.changeset/rich-moles-compare.md
(1 hunks)packages/hooks/use-clipboard/src/index.ts
(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- .changeset/rich-moles-compare.md
🔇 Additional comments (2)
packages/hooks/use-clipboard/src/index.ts (2)
55-55
: LGTM!
The dependency array is correctly updated to include the new transformWhitespace
function.
44-48
: Consider adding type validation for non-string values
While the code handles strings correctly, non-string values are passed directly to writeText
without validation. This could lead to runtime errors if the value cannot be converted to a string.
Let's check if there are any existing error cases in the codebase:
Consider adding type validation:
- const decodedValue =
- typeof valueToCopy === "string" ? transformWhitespace(valueToCopy) : valueToCopy;
+ const decodedValue =
+ typeof valueToCopy === "string"
+ ? transformWhitespace(valueToCopy)
+ : String(valueToCopy);
@@ -0,0 +1,6 @@ | |||
--- | |||
"@nextui-org/use-clipboard": patch | |||
"@nextui-org/snippet": patch |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
not required (?)
There was a problem hiding this comment.
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
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 1
🧹 Nitpick comments (1)
packages/components/snippet/stories/snippet.stories.tsx (1)
95-97
: Good test case for clipboard functionality.The switch to package installation commands provides a practical example that will help test the improved clipboard whitespace handling, as these commands are frequently copied by users.
Consider adding more test cases in the stories that specifically demonstrate proper handling of various Unicode whitespace characters, since that's the main focus of the PR.
"npm install @nextui-org/react", | ||
"yarn add @nextui-org/react", | ||
"pnpm add @nextui-org/react", |
There was a problem hiding this comment.
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
@@ -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, " "); |
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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
There was a problem hiding this comment.
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"
}
]
}
@winchesHe @wingkwong is this PR ready to merge? |
@jrgarciadev I think not. There is a case that need to handle. |
Closes #4225
📝 Description
⛳️ Current behavior (updates)
🚀 New behavior
💣 Is this a breaking change (Yes/No):
📝 Additional Information
Summary by CodeRabbit
Summary by CodeRabbit
@nextui-org/react
package.