Codemirror instances sometimes format weirdly

I can´t really explain in it detail, which is why I added this example image, of what my problem is:

This issue seems to appear randomly (can be up to 20 or more instances of these codemirror-elements).

Is this a known bug and is there a certain solution for it?

Working with React v18 and these Codemirroreditors are created out of an array, which is getting mapped over and returns these React components with a codemirror view (each) in it.

Could it be that styles or fonts are getting loaded after the editor has initialized, changing the size of the text inside it?

@marijn
I found the issue!


As you can see the style attributes don´t get added consistently on the gutter elements, which causes the layout to be unproportional.
But I don´t know how I am supposed to fix this though…
Any idea maybe?

Sometimes the eelements are missing the right hight style, or the right margins.

Yes, CodeMirror measures the size of its content and sets up the gutter heights to match, and if the content changes size in some undetectable way (JavaScript can’t generally see when styling changes), the gutter size will be incorrect. You can call view.requestMeasure() if you are sure all your CSS and fonts are loaded and stable to make the editor re-measure itself.

1 Like