uiwjs / uiwjs/react-codemirror

Bug - Line Number Alignment Bug (inside Modal)

Open
#446 4 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
2.3k
Forks
161
PR merge metrics
No merged PRs in 30d

Description

I am using a very basic CodeMirror component inside a modal (the modal is from Chakra UI). When I open the modal, initially the line numbers are slightly squished and do not line up correctly. When I click on the editor, the line numbers can be seen 'jumping' into place.

I found some related issues from v5 of CodeMirror that used the autoRefresh addon or editor.refresh() command in order to solve this, but couldn't find autoRefresh in the latest version of CodeMirror.

does anyone know how I can get it to have correct alignment when the modal first opens? or how I can get the autoRefresh addon now?

Code sandbox Demo of bug

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked CodeSandbox reproduction, focusing on the CodeMirror component inside the Chakra UI modal and the behavior when the modal first opens. Determine why the line numbers are initially misaligned and verify that the editor renders with correct alignment before and after clicking it.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.