Line numbers are rendered incorrectly

[EnigmaJJ]

Hi, I used vanilla-jsoneditor in React. I found line numbers are rendered incorrectly when the editor was rendered firstly, and once the editor has the focus, line numbers are rendered correctly. I try to use refresh when I set content, but it doesn't help.

[josdejong]

Can it be that your editor is first rendered inside a div with height 0, or a div that is not yet attached to the dom, or with a different font size or so? Best would be to figure out the cause of that and initialize the editor right in one go. Alternatively, you can force the editor to re-render by calling jsoneditor.refresh().

[EnigmaJJ]

Thanks for your reply.

I guess it may be related to the initialization order of components, because sometimes it was rendered as follows:

The editor was used in the Modal of antd, and I created the editor in the componentDidMount. But like I mentioned, I try to call refresh when I set content, but it doesn't help, it is strange. :(

[josdejong]

Is it possible to to create a minimal example demonstrating the issue?

[EnigmaJJ]

https://codesandbox.io/s/modest-jones-ii99yu I created a demo. If you click Open button, you will see:

I call refresh in: am i doing it right? :)

[josdejong]

I see the model you use from Ant Design uses animation when opening the modal, changing the size or zoom level or so from 0 to the actual size in something like 200ms. You have to call .refresh() after the animation has finished. Or alternatively, disable the animation. Ideal would be if the modal has a callback when animation finished but I didn't see that.

[EnigmaJJ]

I understand, thank you for your patient reply :)