search

uiwjs / react-codemirror

CodeMirror 6 component for React. @codemirror https://uiwjs.github.io/react-codemirror/
https://uiwjs.github.io/react-codemirror/
MIT License
1.62k stars 129 forks source link

Bug - Line Number Alignment Bug (inside Modal) #446

Open connordear opened 1 year ago

connordear commented 1 year ago

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 commented 1 year ago

This is a similar question? @connordear

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

tonymaa commented 1 year ago

I also met this problem, have you solved it?

connordear commented 1 year ago

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 commented 1 year ago

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

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