fix: avoid including line numbers when copying the code

[donotlb]

Issue: #18629

What I did

Removed the onCopyCapture event listener from the container element of ReactSyntaxHighlighter.

How to test

Start the html-kitchen-sink example, then open the Story addon panel of Button.Primary story, after that, select and copy (ctrl+c) the source code, and finally paste it somewhere.

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit f711a09. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch

---

✅ Successfully ran 1 target

• nx run-many --target=prepare --all --parallel=2 --max-parallel=15 -- --optimized

---

Sent with 💌 from NxCloud.

[yannbf]

Hey @donotlb thank you so much for your contribution!

@ndelangen could you take a quick look at this? Thanks!

[donotlb]

I did more tests, and found that react-syntax-highlighter itself has a few problems, the copy-paste behavior is different in different browsers when showLineNumbers is turned on.

We can visit here and test it with different browsers (remember to tick the “Show line numbers” checkbox)

I found a simple workaround to make the copy-paste behavior more consistent across browsers: use a custom renderer to process span.linenumber element in each line of code, and use a pseudo element to display line numbers.

How to test

1. yarn start
2. open the Basics / SyntaxHighlighter / showlinenumbers story
3. test the copy-paste behavior in Chrome/Safari/Firefox

[donotlb]

Hi @ndelangen, thanks for your review, are there plans to merge this PR ?

[wangshijun]

When will this feature be included in the new release? It's really annoying to have line numbers copied.