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

Merged
merged 7 commits into from
Dec 28, 2024

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 27, 2024 3:58pm
nextui-storybook-v2 ✅ Ready (Inspect) Visit Preview 💬 Add feedback Dec 27, 2024 3:58pm

Copy link

changeset-bot bot commented Dec 18, 2024

🦋 Changeset detected

Latest commit: f535734

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 package to address an issue with handling non-breaking spaces during clipboard operations. A new utility function transformValue is added to the useClipboard hook, which replaces occurrences of non-breaking spaces with regular spaces. Additionally, the MultiLine export in the snippet.stories.tsx file is updated to provide installation commands for the @nextui-org/react package instead of a multiline JSON object.

Changes

File Change Summary
packages/hooks/use-clipboard/src/index.ts Added transformValue utility function to replace non-breaking spaces with regular spaces 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.

Suggested labels

👀 Status: To Review

Suggested reviewers

  • wingkwong
  • jrgarciadev

📜 Recent review details

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

📥 Commits

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

📒 Files selected for processing (2)
  • .changeset/rich-moles-compare.md (1 hunks)
  • packages/hooks/use-clipboard/src/index.ts (2 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
  • packages/hooks/use-clipboard/src/index.ts
  • .changeset/rich-moles-compare.md

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);

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)

@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
@winchesHe
Copy link
Member Author

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

Updated

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
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