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.

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

Conversation

winchesHe
Copy link
Member

@winchesHe winchesHe commented Dec 18, 2024

Closes #4225

📝 Description

⛳️ Current behavior (updates)

🚀 New behavior

💣 Is this a breaking change (Yes/No):

📝 Additional Information

Summary by CodeRabbit

Summary by CodeRabbit

  • New Features
    • Introduced a utility function to normalize whitespace in clipboard operations.
    • Updated the snippet component to provide installation commands for the @nextui-org/react package.
  • Bug Fixes
    • Resolved issues with clipboard handling of different Unicode whitespace characters.

Copy link

vercel bot commented Dec 18, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
nextui-docs-v2 ✅ Ready (Inspect) Visit Preview 💬 Add feedback Dec 18, 2024 11:45am
nextui-storybook-v2 ✅ Ready (Inspect) Visit Preview 💬 Add feedback Dec 18, 2024 11:45am

Copy link

changeset-bot bot commented Dec 18, 2024

🦋 Changeset detected

Latest commit: f11aebe

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages
Name Type
@nextui-org/use-clipboard Patch
@nextui-org/snippet Patch
@nextui-org/react Patch

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

Copy link
Contributor

coderabbitai bot commented Dec 18, 2024

Walkthrough

The pull request introduces changes to the @nextui-org/use-clipboard and @nextui-org/snippet packages to address an issue with handling Unicode whitespace characters during clipboard operations. A new utility function transformWhitespace is added to the useClipboard hook, which normalizes whitespace by replacing all whitespace characters with a single space. Additionally, the MultiLine export in the snippet.stories.tsx file is updated to provide installation commands for the @nextui-org/react package.

Changes

File Change Summary
packages/hooks/use-clipboard/src/index.ts Added transformWhitespace utility function to normalize whitespace characters in clipboard operations.
packages/components/snippet/stories/snippet.stories.tsx Updated MultiLine export to include installation commands instead of a multiline JSON object.
.changeset/rich-moles-compare.md Changelog entry for the clipboard functionality patch.

Assessment against linked issues

Objective Addressed Explanation
Sanitize copied content to remove non-breaking spaces (issue #4225)
Update documentation regarding potential formatting issues (issue #4225) Documentation updates are not included in this PR.
Allow customization of the copy functionality (issue #4225) No new props or customization options for the copy functionality were introduced.

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?

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Generate unit testing code for this file.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai generate unit testing code for this file.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and generate unit testing code.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

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)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR. (Beta)
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

@winchesHe winchesHe changed the title Fix/eng-1646-clipboard-white-space fix: clipboard get the different unicode whitespace Dec 18, 2024
Copy link
Contributor

@coderabbitai coderabbitai bot left a 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 clarity

While 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 configurable

The 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

📥 Commits

Reviewing files that changed from the base of the PR and between e15ef62 and ad5cd06.

📒 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
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.

Copy link
Contributor

@coderabbitai coderabbitai bot left a 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.

📜 Review details

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between ad5cd06 and f11aebe.

📒 Files selected for processing (1)
  • packages/components/snippet/stories/snippet.stories.tsx (1 hunks)

Comment on lines +95 to +97
"npm install @nextui-org/react",
"yarn add @nextui-org/react",
"pnpm add @nextui-org/react",
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

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

@jrgarciadev
Copy link
Member

@winchesHe @wingkwong is this PR ready to merge?

@wingkwong
Copy link
Member

wingkwong commented Dec 22, 2024

@jrgarciadev I think not. There is a case that need to handle.

@jrgarciadev jrgarciadev modified the milestones: v2.6.9, v2.7.0 Dec 23, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[BUG] - @nextui-org/snippet Component Adds Extra Characters When Copying Code Snippets
3 participants