Bug - Line Number Alignment Bug (inside Modal)

[connordear]

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

[jaywcjlove]

This is a similar question? @connordear

https://discuss.codemirror.net/t/how-to-refresh-gutters/4315/5

[tonymaa]

I also met this problem, have you solved it?

[connordear]

Not really - I wait to load in the codemirror component until the modal has finished its opening animation :/ it does stop the numbers from jumping around.

[jaywcjlove]

@connordear I don't see what's wrong with the example.

https://codesandbox.io/s/interesting-sun-rllxre?file=/src/App.js