CodeMirror editor Code Display Goes Wrong After Setting Document Content

[HTGAzureX1212]

I am using CodeMirror version 5.58.3, alongside with Vue 3.0.4. Before upgrading to Vue 3, nothing wrong happened when I set the document content of codemirror. But after upgrading to Vue 3, this happened:

As you can see in the picture, the cursor is in the absolutely wrong position.

However, this issue does not exist when the content I am setting the document to is empty:

I am using Google Chrome.

[marijnh]

This sounds like the editor is initialized without being part of the document yet, or while its parent element is hidden. That will cause it to fail to measure its text geometry correctly. You either have to arrange for refresh() to be called when the editor becomes visible, or enable the autorefresh addon.

[HTGAzureX1212]

"autorefresh"...?

[HTGAzureX1212]

How do I enable it

[HTGAzureX1212]

Hmm that doesn't seem to fix it

[HTGAzureX1212]

Let me try manually calling refresh()

[HTGAzureX1212]

Wait, I already refreshed it

[HTGAzureX1212]

So now the situation is refreshing doesn't work

[marijnh]

Then I'm out of ideas, except to ensure that the editor really is visible, and has its final geometry (i.e. no further CSS or font loading changes it afterwards) when the refresh call is made.

[HTGAzureX1212]

But umm... the editor is in a tab in which when the component is loaded, it is not visible yet. Only when the user switch to the tab with the editor, the editor then comes visible.

[marijnh]

Well, there's your problem.

[HTGAzureX1212]

How should I correct it?

[HTGAzureX1212]

I have this:

In which the GuildConfigurationSubComponent is the component holding the editor. It is only visible when the activeTab is 2, which, by default, when the tabs are loaded, is 1.

[marijnh]

I don't know Vue, so I can't help you there.

[HTGAzureX1212]

Ahhh