Force a layout pass programmatically

Hi @marijn recently I noticed a really minor layout problem with my app, the height of line number gutters is not initially correct:

It will eventually be corrected at some point (it’s an eye-blinking thing):

However, this brings a UI glitch to users. I noticed that if I fake a text edit with something like this:

editor.dispatch({ changes: { from: 0, insert: ' ' } }); // undo the change later

The editor will perform the layout earlier, and it “fixes” the issue. I know this is not the ideal way to trigger a layout, do you have any recommendations that I am not aware of?

P.S. requestMeasure won’t do the trick :frowning:


Could it be that your fonts or styles are loading after the editor initializes? A view.requestMeasure() should cause it to re-measure its layout. Sometimes it helps to do this on a "load" event.

Thanks for the quick reply. I was thinking about the same thing, but it seems I can repro even with plain styles.

I will try if moving requestMeasure to other places work, thanks.

Update: it doesn’t work, seems right now faking a text edit is the only way that works, lol.

If you can simplify the case where the editor loads up incorrectly to an HTML/JS page that uses no dependencies beyond CodeMirror, I’ll gladly debug it.

Thanks for being so kind. This is a good point, I don’t use other dependencies, but the project is getting a bit complicated now, I think a minimal repro would help me understand the issue better.

Will update this thread once I have one.

I just noticed one thing weird, it seems calling view.coordsAtPos() can also “fix” the issue.

I also need something like this. The layout (particularly the line number gutters) are a bit off, but in my case I hide and show the content at different points, so I can understand why it happens. I just need to be able to manually trigger the redraw of the layout again. In codemirror 5, I was able to call refresh().

None of the options specified in this thread so far helped.