The text selection in code blocks is verry clunky, in particular for firefox / zen

[tpoisseau]

URL:

https://nodejs.org/en

Browser Name:

Zen

Browser Version:

1.16.4b (Firefox 143.0.4) (aarch64)

Operating System:

MacOS 26.0.1 (25A362)

How to reproduce the issue:

For Firefox 144.0b9 (aarch64) / Zen

1. On homepage, on any code example. I try to select text.
2. I expect it select the text I selected.
3. What I got: The text selection is partial, all symbols with typescript tooltip are ignored. When I copy paste, new line replace text not selected.
4. 

copy paste:

const 

 = 

((

, 

) => {

If I double click on words with no ts tooltip, it select the word, If I triple click, it select the line without symbols with ts tooltips.
If I do the same on words with ts tooltip, no selection.

For chrome and safari, I can select the text by draging the mouse. and copy paste works:
const server = createServer((req, res) => {

But if I double or triple click on words with ts annotation. Nothing is selected.

For all browser, it is not possible to start the selection on words with typescript tooltip.

This issue seems to be everywhere in nodejs.org, except docs part (it does not use this component to display code).

Tested on :

• Safari 26.0.1 (21622.1.22.11.15)
• Chrome 141.0.7390.123 (Build officiel) (arm64)
• Firefox 145.0b8 (aarch64)
• Zen 1.16.4b (Firefox 143.0.4) (aarch64)

[AugustinMauroy]

It's look like a Firefox issue because surprisingly it's work fine on safari 😅

[tpoisseau]

Not so fine, you cannot start selection in words with ts tooltips.

[canerakdas]

Sorry about this experience, but after looking into it, it seems the problem comes from the package(twoslash) we’re using.

When I tested it on this page of documentation site, I ran into a similar issue in Firefox when copying a code block

It also looks like there’s already an open issue about this problem, you can track it here;
twoslashes/twoslash#73

[tpoisseau]

On https://twoslash.netlify.app/guide/highlight page,
the text selection works better than on nodejs.org with Firefox / Zen.

✅ Double / Triple click on symbols with tooltip
✅ Start selection into symbol with tooltip
✅ Symbols with tooltip can be selected
❌ Copy paste add line feed

So it may related but I think the lib issue doesn't explain all, The way it is used seems also introduce issue.

[AugustinMauroy]

Maybe something from codeTabs component ? This unexpected behavior can come from combination of radix and twoslash

[canerakdas]

@tpoisseau I’ve prepared a PR (#8301) to address this issue. When you have a time, it would be great if you could test it in the preview for a double check;
https://nodejs-m1cu61fwo-openjs.vercel.app/en

Thanks for reporting!