sandpack icon indicating copy to clipboard operation
sandpack copied to clipboard

`readOnly` hides line numbers in `SandpackCodeEditor`

Open Graquick opened this issue 5 months ago • 0 comments

Bug report

Packages affected

  • [ ] sandpack-client
  • [x] sandpack-react

Description of the problem

The following props in the SandpackCodeEditor component do not work together as expected:

  • showLineNumbers
  • readOnly

When the readOnly prop is set to true, the line numbers disappear, even if showLineNumbers is explicitly enabled.

This issue appears to have started after version 2.19.10.


✅ Working in v2.19.10

SandpackCodeEditor with line numbers visible and editable mode

Line numbers visible in editable mode


SandpackCodeEditor in read-only mode with line numbers visible

✅ In v2.19.10, readOnly works with showLineNumbers (note: no visual read-only indicator)


❌ Broken in v2.19.11 and later

SandpackCodeEditor in read-only mode with line numbers missing

❌ In read-only mode, line numbers disappear


SandpackCodeEditor in read-only mode from v2.19.11 onward with line numbers missing

From v2.19.11 onward, the readOnly indicator appears, but line numbers are hidden


🧪 Steps to Reproduce

  1. Use SandpackCodeEditor
  2. Set both readOnly={true} and showLineNumbers={true}
  3. Observe that line numbers are hidden in read-only mode

✅ Expected Behavior

Line numbers should remain visible when readOnly is true if showLineNumbers is also true.


📌 Version Affected

  • Works: v2.19.10
  • Broken: v2.19.11 and above

💡 Additional Notes

It seems that the bug was introduced in a refactor or update made in v2.19.11. Ideally, readOnly should not interfere with the showLineNumbers visibility toggle.

Graquick avatar Jul 27 '25 16:07 Graquick