fix: Text selection in code blocks

[canerakdas]

Description

With this PR aim to resolve the issue with code selection mentioned in #8292

Validation

Double / Triple click on symbols with tooltip should work
Start selection into symbol with tooltip should work
Symbols with tooltip should be selected

Related Issues

Fixes #8292

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Updated (UTC)
nodejs-org	Ready	Preview	Nov 1, 2025 9:02am

[Copilot]

Pull Request Overview

This PR adds text selection capability to twoslash hover elements by introducing the user-select: text CSS property.

Key Changes:

• Added user-select: text property to .twoslash-hover class to enable text selection in hover elements

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 76.62%. Comparing base (a2bd7da) to head (1b24613).
⚠️ Report is 8 commits behind head on main.
✅ All tests successful. No failed tests found.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #8301      +/-   ##
==========================================
+ Coverage   76.60%   76.62%   +0.02%     
==========================================
  Files         117      117              
  Lines        9746     9751       +5     
  Branches      328      328              
==========================================
+ Hits         7466     7472       +6     
+ Misses       2278     2277       -1     
  Partials        2        2              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[AugustinMauroy]

On safari it's still work as expect i didn't have Firefox to test but LGTM !

[tpoisseau]

#8292 (comment)

On the URL you gave me, it seems works perfectly on Zen.

I'll try to push further my tests this weekend or Monday.

[bjohansebas]

LGTM, tested on Firefox.

[tpoisseau]

Here it is safari:

During selection, when we hover a symbol with tooltip a bit too long, we are able to continue text selection in tooltip (and select lot of text outside the code block), just by moving the mouse in bottom direction.

Same issue with chrome.

On Firefox / zen, it is more complex to select into the tooltip (so it's better). We have to move the mouse outside the code block to expand the text selection into the tooltip:

Once the mouse is in the codeblock, it's impossible expand text selection in the tooltip.

When we select text inside the code block, we should not be able to select text in the tooltips. Ideally, the tooltips should not display during text selection.

Otherwise, the issue seems solved:

✅ Double / Triple click on symbols with tooltip should work
✅ Start selection into symbol with tooltip should work
✅ Symbols with tooltip should be selected

For all browsers.

NB: It's not new with this fix but I discover it with my tests on this PR.

I tested across multiple pages (home, blog post) I did not detect behavior inconsistencies between pages, about text selection in this component.

[canerakdas]

Here it is safari:

During selection, when we hover a symbol with tooltip a bit too long, we are able to continue text selection in tooltip (and select lot of text outside the code block), just by moving the mouse in bottom direction.

Same issue with chrome.

On Firefox / zen, it is more complex to select into the tooltip (so it's better). We have to move the mouse outside the code block to expand the text selection into the tooltip: Once the mouse is in the codeblock, it's impossible expand text selection in the tooltip.

When we select text inside the code block, we should not be able to select text in the tooltips. Ideally, the tooltips should not display during text selection.

Otherwise, the issue seems solved:

✅ Double / Triple click on symbols with tooltip should work ✅ Start selection into symbol with tooltip should work ✅ Symbols with tooltip should be selected

For all browsers.

NB: It's not new with this fix but I discover it with my tests on this PR.

I tested across multiple pages (home, blog post) I did not detect behavior inconsistencies between pages, about text selection in this component.

Since the areas displayed as tooltips are informational, I’ve disabled text selection within them. IMO this seems to be the most appropriate approach 🤔

[tpoisseau]

I can't say whether it's the right thing to do (preventing selection in tooltips), but it works.