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

[GautamPatoliya]

NextUI Version

2.2.9

Describe the bug

The Snippet component from @nextui-org/snippet adds invisible characters (e.g., non-breaking spaces) when using the built-in copy functionality. This results in formatting issues and errors when the copied code is pasted into a code editor. For instance, JSON code becomes invalid with errors like "Property keys must be doublequoted" due to extra hidden characters.

Actual Behavior

The copied code includes extra invisible characters, likely non-breaking spaces (\u00A0), which result in:

• Errors in JSON files such as "Property keys must be doublequoted".
• Code editors displaying red squiggly lines or warnings.

For example, the pasted code looks like this (with invisible characters causing issues):

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

Notice how some spaces are incorrectly formatted (non-breaking spaces).

Technical Analysis

The issue appears to be related to how the Snippet component processes and renders the code internally. During the copy operation:

1. Non-breaking spaces (\u00A0) or other hidden formatting characters are added.
2. These characters are pasted into editors, causing JSON parsing and validation errors.

---

Proposed Solution

1. Sanitize the Copied Content:

   • Strip non-breaking spaces or hidden formatting characters before copying to the clipboard.
   • Use .replace(/\u00A0/g, " ") or equivalent sanitization.

2. Allow Customization:

   • Provide a prop (e.g., onCopy) that lets users customize the copy functionality or sanitize the copied content.

3. Update Documentation:

   • Warn users about potential formatting issues in JSON or code snippets when using the Snippet component.

---

Environment

• Next.js: Version 14.4.0
• Browser: Chrome Version 119.0.0
• Operating System: Windows 11

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

1. Set up a Next.js project:

   npx create-next-app@latest my-next-app
   cd my-next-app
   npm install @nextui-org/react

2. Use the Snippet component as shown in the example below:

   import { Snippet } from "@nextui-org/snippet";
   
   const codeSnippet = `
   {
     "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"
       }
     ]
   }
   `;
   
   export default function App() {
     return <Snippet showCopyButton>{codeSnippet}</Snippet>;
   }

3. Run the app locally:

   npm run dev

4. Copy the code using the copy button in the Snippet component.
5. Paste the copied code into any code editor (e.g., VS Code).

Expected behavior

The copied code should match the original snippet exactly, with no additional characters or formatting artifacts.

Screenshots or Videos

Operating System Version

• OS: Windows 11

Browser

Chrome

[linear]

ENG-1646 [BUG] - `@nextui-org/snippet` Component Adds Extra Characters When Copying Code Snippets

[wingkwong]

Not able to reproduce on my local (canary branch). Can you try it in latest version?

[GautamPatoliya]

Not able to reproduce on my local (canary branch). Can you try it in latest version?

Why are you trying in canary? try this in latest and tell me status

[wingkwong]

Couldn't reproduce in latest version as well as canary branch. You may try on different editor.

[GautamPatoliya]

Couldn't reproduce in latest version as well as canary branch. You may try on different editor.

What editor? Do you know what this issue is about?

Check here and copy code snippet and paste it in vs code: https://ithoughtspace.site/blog/how-to-build-a-progressive-web-app-pwa-with-nextjs-and-react-step-by-step-guide

[GautamPatoliya]

Issue is still there

[wingkwong]

What I meant was asking you to test with other IDE other than VSCode just to see if it is a VSCode issue or not. Now with your updated example, I could reproduce the issue. However, I couldn't reproduce the issue using either latest / canary version, therefore I'd suggest you to upgrade to see if it's reproducible. If so, then probably it's related to other code. In this case, we will need a minimal reproducible sandbox for further investigation.

[GautamPatoliya]

Just do this:

Check here and copy the code snippet and paste it into vs code: https://ithoughtspace.site/blog/how-to-build-a-progressive-web-app-pwa-with-nextjs-and-react-step-by-step-guide

• And you'll able to reproduce the issue ok?

[GautamPatoliya]

@wingkwong Answer?

[wingkwong]

@GautamPatoliya I've mentioned in previous reply already. I could reproduce the issue from your site. We need a minimal reproducible sandbox for further investigation since I couldn't reproduce the issue on my local which means it could be caused by external libraries.

From inspecting the element, it seems like you're using highlight.js. Could you please try a snippet without using that to see if the problem still exists? I doubt those characters are added by this library.

[Dhananjay-JSR]

Hello @GautamPatoliya I can Replicate your issue if I copy snippet from your website but I cannot replicate it on my end if I copy the following and run my app

import { Snippet } from "@nextui-org/snippet";

const codeSnippet = `
{
  "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"
    }
  ]
}
`;

export default function App() {
  return <Snippet showCopyButton>{codeSnippet}</Snippet>;
}

This Issue also persists on other snippets that I copied from your site

Can you make sure that the template string you have used in your app is not having invisible character

[GautamPatoliya]

@Dhananjay-JSR Could the issue be related to my use of Quill Editor and highlight.js?

[Dhananjay-JSR]

@Dhananjay-JSR Could the issue be related to my use of Quill Editor and highlight.js?

yes , it could be reason since highlight.js does inject it's own styling causing nextui snippet to act differently for text encoding

I would say to switch to https://shiki.style/ and check if it fixes the issue

Do Not Combine Highlighter + NextUI

[wingkwong]

@GautamPatoliya I've already pointed out that it may be related to highlight.js. You are the only one who can check that since you haven't provided a reproducible environment. Please don't randomly tag people. Most of them are not from NextUI team.

[GautamPatoliya]

@wingkwong I have not just randomly tagged people, they're the collaborators.

[GautamPatoliya]

@Dhananjay-JSR Thank you sir