Editor not displaying new text

v6
1

I have the following strange problem with a custom element running codemirror (6.0.1) hosted by an Elm app. If I open the editor (push a button in the app), codemirror displays the correct source text and behaves as it should. Now I close the editor (another button push) and open it again. This time the codemirror editor displays a blank screen. What is odd is that in both the good and the bad cases the function setEditorText listed below logs the same data to the console when it is called the first and second times.

See also the log of editor activity below.

Many thanks in advance for your help.

function setEditorText(editor, str) {
    const currentValue = editor.state.doc.toString();
    const endPosition = currentValue.length;
    console.log("@@(CM) function setEditorText (1), str.length ", str.length)
    console.log("@@(CM) function setEditorText (2), from, to ", 0, endPosition)

    editor.dispatch({
        changes: {
            from: 0,
            to: endPosition,
            insert: str
        }
    })
}

Log of editor activity
Lines F ... are events in the host Elm app
Lines @@(CM) ... come from console.log statements in codemirror

F   : OpenEditor
F   : ClearEditorContent
F   : SetInitialEditorContent
@@(CM) function setEditorText (1), str.length  31409
@@(CM) function setEditorText (2), from, to  0 31409
------------------------------------------------------
F   : CloseEditor
------------------------------------------------------
F   : OpenEditor
F   : ClearEditorContent
F   : SetInitialEditorContent
@@(CM) function setEditorText (1), str.length  31409
@@(CM) function setEditorText (2), from, to  0 31409
2

The editor may not notice it is being made visible. If you can set up a situation that demonstrates this in a simple HTML page (no Elm or libraries), I could try to debug it. As a workaround, calling requestMeasure on the editor as you show it probably helps.

3

Your suggestion about requestMeasure was the key. Once I realized that requestMeasure` has to do with the DOM, I realized that I had to give Elm’s virtual DOM manager some better info to force a re-render. This is usually not necessary, but in this case it was. A one line change of code and it works.

So the problem was mine — no bug in Codemirror.

Thanks so much for your help!

4

The editor has some visibility and resize observers set up that automatically notice situations like this, but I guess in some situations those somehow don’t trigger.