Copy Button Issue with Multiple Syntax Signatures in Reference Page

[SableRaf]

Most appropriate sections of the p5.js website?

Reference

What is your operating system?

Windows

Web browser and version

132.0.6834.160 (Official Build) (64-bit) (cohort: Stable)

Actual Behavior

When clicking the copy button for functions with multiple syntax signatures (for example: createCanvas), the content includes both signatures merged together in the clipboard:

createCanvas([width], [height], [renderer], [canvas],[width], [height], [canvas])

This issue occurs for any method that has multiple syntax signatures.

Expected Behavior

Each copy button should copy only the corresponding syntax signature. For example:

createCanvas([width], [height], [renderer], [canvas])

or

createCanvas([width], [height], [canvas])

depending on which copy button is clicked.

Steps to reproduce

1. Visit the createCanvas reference page.
2. Click the copy button next to either of the syntax examples.
3. Paste the copied content somewhere (e.g., a text editor).
4. Notice that both syntax signatures are copied together.

Would you like to work on the issue?

This might make a good first issue. I'm happy to leave it to a new contributor.

[akkarn1689]

Hi @SableRaf,

I would like to contribute to this issue. Would you please assign me this issue?

[davepagurek]

Thanks @akkarn1689!

[akkarn1689]

Thanks @davepagurek
I am working on the issue. Will update ASAP.

[akkarn1689]

Hi @davepagurek,
I have been trying to work on the issue. But while trying to run the application, I am getting following error:

UnhandledRejection: Astro detected an unhandled rejection. Here's the stack trace: Error: Build failed with 1 error: node_modules/@swc/html/binding.js:101:31: ERROR: No loader is configured for ".node" files: node_modules/@swc/html-win32-x64-msvc/swc-html.win32-x64-msvc.node

Tried to resolve this error by updating packages and modifying the astro config files.

Could you please help me resolve this issue?

Thanks!

[davepagurek]

I'm guessing based on the error that you're on Windows? @limzykenneth have you run into this on Windows before?

It might be worth trying to run this project under WSL: https://learn.microsoft.com/en-us/windows/wsl/install

[limzykenneth]

For me Windows install and dev for website works as expected with no problem. @akkarn1689 What version of node.js and npm are you using? Also what shell are you using?

[akkarn1689]

@limzykenneth I am using node v20.11.0 and npm 10.2.4 vesrions. And I am using Window Powershell.

[limzykenneth]

@akkarn1689 Can you try cmd instead and also if you are using VSCode, make sure it is not auto importing anything, or even better, use cmd directly and not via VSCode.

[akkarn1689]

Hi @limzykenneth & @davepagurek,

I wanted to provide an update on the issues I encountered earlier:

1. Regarding the @swc/html build error:

   • I temporarily bypassed the issue by commenting out the code that was using the @swc/html library. This allowed me to proceed with the build without further issues.
   • Should I raise an issue regarding this build error, or is this a known issue?

2. Fix for the Copy Button Issue:

   • Previously, clicking the copy button for functions with multiple syntax signatures (e.g., createCanvas) resulted in all signatures being merged together in the clipboard.
   • I have resolved this by ensuring that each copy button copies only its corresponding syntax signature. Now, depending on which button is clicked, the clipboard receives only the relevant function signature.
   • Should I push the fix for this issue? Let me know if any refinements are needed.

Here’s a video demonstration of the bug fix in action:

20250216-1733-23.5287537.mp4

Looking forward to your feedback!

[akkarn1689]

I have tried using cmd, and tried running the application under 'wsl: Ubuntu' also. Still getting the similar issue that I have mentioned earlier about '@swc/html'.

[limzykenneth]

@akkarn1689 Are you running the build or the dev server? ie. Are you using npm run dev instead of running npm run build? swc/html should only be used when running the build and the build is not really meant to be run locally, you should be using npm run dev instead.

[akkarn1689]

@limzykenneth I am using npm run dev only. Didn't run build command.

[limzykenneth]

Hmm...swc/html is a bit of a newer package overall and I'm not sure what could be the issue exactly, if you have a way to work around it for now that should be fine. I'll try to see if I can find more information and a fix eventually.

[davepagurek]

I have resolved this by ensuring that each copy button copies only its corresponding syntax signature. Now, depending on which button is clicked, the clipboard receives only the relevant function signature.

Awesome, thanks @akkarn1689! If you're able to make a PR just with those changes, excluding any other workarounds you had to do to get it to run locally, that would be great!

[akkarn1689]

Hi @davepagurek,

I have raised PR #704 to address this issue. Please have a look.

Thank you!