JSON code interface: cursor jumps to top after paste (auto-format triggers full re-render)
- Dominant language
- TypeScript
- Stars
- 37.9k
- Forks
- 4.9k
- Avg merge
- 3d 21h
- Merged PRs (30d)
- 36
Description
### Describe the Bug
**Environment:**
- Directus version: 12.2.0
- Database: PostgreSQL
- Hosting: Self-hosted (CoreOS / AWS EC2)
- Browser: Chrome (latest)
- Describe the bug:
When editing a JSON field using the Code (input-code) interface, pasting content causes the cursor to jump to the top of the editor (line 1, column 0). It appears that the auto-format/re-serialize behavior triggers a full reactive value replacement of the CodeMirror editor content, which resets cursor state.
This makes editing large JSON documents painful — after every paste operation, the user must manually scroll and click back to where they were working.
Additional context:
- Content versioning is disabled on the affected collection
- The jump appears to be caused by the JSON parse → stringify round-trip that Directus performs after value changes. When the stringified output differs from the raw input (e.g. different indentation), the component replaces the full editor value, which resets CodeMirror's cursor/selection state.
- A related (now resolved) issue: when content versioning was enabled, the periodic delta sync also triggered this same cursor-reset behavior during typing (after ~2s idle), and additionally injected `_user`/`_date` revision metadata into nested JSON objects. Disabling versioning fixed that part.
- Affects usability significantly for users managing large config-style JSON payloads.
### To Reproduce
1. Create a collection with a JSON field using the "Code" interface
2. Add a large JSON object (50+ lines)
3. Place cursor somewhere in the middle of the document
4. Select and paste new JSON content (or paste to replace a section)
5. Observe: cursor jumps to line 1, position 0
Expected behavior:
After a paste + auto-format, the cursor should remain at the end of the pasted content (or at minimum, at the same approximate scroll position), not reset to the top of the document.
### Directus Version
12.2.0
### Hosting Strategy
Self-Hosted (Docker Image)
### Database
PostgreSQL 18.4
Contributor guide
Research direction
Start at the Code (input-code) interface and trace the JSON parse→stringify update path described in the report. Reproduce the issue with a large JSON document and a paste in the middle, then verify that auto-formatting preserves the pasted position or approximate scroll location instead of returning to line 1, column 0.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 66/100