Codemirror: Syntax highlighting not working after initializing

[droidenator]

When I initialize a new instance of CodeMirror, it does not include syntax highlighting. I'm able to get the syntax highlighting to work by calling swapDoc at least 300ms after initializing. However that solution won't always work because the page can have larger amounts of JavaScript on it leading to a need for a longer timeout.

Here's an example of how I'm initializing CM:

let editorContent = CodeMirror.Doc("<div></div>", "htmlmixed");

let editor = CodeMirror(element, {
    smartIndent: true,
    gutters: ['CodeMirror-lint-markers'],
    keyMap: 'sublime',
    value: editorContent,
    lineNumbers: true,
    lint: true,
    indentWithTabs: false,
    tabSize: 2,
    indentUnit: 2,
    autoCloseBrackets: true,
    autoCloseTags: true,
    matchTags: {
        bothTags: true
    },
    autoRefresh: false
});

I am using CodeMirror 5.19 on the latest version of Chrome.

Since swapDoc does work as a way to get the syntax highlighting to work, I just need to know when to call it so I'm not reliant on a fixed timeout length. I was hoping there was an editorReady event or callback I could use to trigger swapDoc but that doesn't appear to be the case. Is there a better way to go about detecting when the editor is ready so I can call swapDoc?

[marijnh]

Maybe your mode scripts haven't finished loading when you initialize the editor? That would have this effect.

[droidenator]

@marijnh thanks! I'll start looking into that.

[droidenator]

I managed to resolve this issue and just wanted to post a quick update to help anyone else who may be struggling with something similar.

Like @marijnh suggested, it was a result of my mode scripts not being fully loaded. I was able to find out what modes had loaded by inspecting CodeMirror.modes. In my case, htmlmixed had three dependencies which had not finished loading.

My solution was to get a list of dependencies for htmlmixed and then use setInterval to check for their presence in CodeMirror.modes.