Firefox: Triple click + Ctrl+c in code block copies two lines instead of one

[matevz]

Have you read the Contributing Guidelines on issues?

• [X] I have read the Contributing Guidelines on issues.

Prerequisites

• [X] I'm using the latest version of Docusaurus.
• [X] I have tried the npm run clear or yarn clear command.
• [X] I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• [ ] I have tried creating a repro with https://new.docusaurus.io.
• [ ] I have read the console error message carefully (if applicable).

Description

On Mozilla Firefox when selecting a line in the code block using a triple click, it selects it fine. But if you copy it, it copies both the line you selected and one line above. This is really annoying when copy&pasting specific lines for example in bash scripts or config files. Using triple click in normal text paragraphs works fine.

Reproducible demo

No response

Steps to reproduce

1. Open a docusaurus website containing code blocks with multiple lines, e.g. https://docs.oasis.io/rofl/app#app-definition or simply https://docusaurus.io/docs/next/cli
2. Select a line of code using triple-click
3. Copy it
4. Paste it somewhere

Expected behavior

The copied line is pasted.

Actual behavior

Two lines are pasted: The copied line and one before.

Your environment

• Public source code: https://github.com/oasisprotocol/docs
• Public site URL: https://docs.oasis.io/rofl/app#app-definition
• Docusaurus version used: 3.5.2
• Environment name and version (e.g. Chrome 89, Node.js 16.4): Mozilla Firefox 130.0
• Operating system and version (e.g. Ubuntu 20.04.2 LTS): Ubuntu 24.04

Self-service

• [ ] I'd be willing to fix this bug myself.

[slorber]

Thanks for reporting

Indeed this is really surprising. I can only reproduce it in Firefox.

And I can't reproduce it using prism-react-renderer demo https://stackblitz.com/~/github.com/FormidableLabs/prism-react-renderer (Run pnpm build && pnpm start:demo)

It looks like a Firefox bug that only affects Docusaurus sites 🤷‍♂️ Even though it's probably not our fault, we could investigate to find a workaround.

[lukaw3d]

Quickly scanning the code I would guess the cause is span here, instead of div https://github.com/facebook/docusaurus/blob/611842af914fcdde5530082154a2c3b6b0a9e66c/packages/docusaurus-theme-classic/src/theme/CodeBlock/Line/index.tsx#L35

[matevz]

I can confirm the issue still exists on Firefox 131.0.3 and Docusaurus 3.6.1.

Was https://github.com/facebook/docusaurus/pull/10621 spam?

[slorber]

The code of that PR is not even working, probably AI-generated

[mwestphal]

We are impacted over at https://f3d.app

[slorber]

A span (or display: inline) should work; I've seen plenty of code blocks in other documentation systems that do not lead to this weird Firefox-only problem, and couldn't really figure out why it only seems to affect us.

But since using a <div> doesn't seem to produce any weird side-effect, let's make the change: https://github.com/facebook/docusaurus/pull/11565

This is also what the underlying lib recommends apparently: https://github.com/FormidableLabs/prism-react-renderer