How to get the textarea element in the linter onUpdateLinting callback - codemirror

Question

TLDR: How can I get a reference to the textarea HTML element within the linting onUpdateLinting function.
Long version: CodeMirror has a lint option which allows the setting of a function to be called when linting is complete. I want to use this to update an HTML element to show the number of errors in the code in the codeMirror instance. Because my page might have multiple codeMirror instances - think of tabs with codeMirrors on them - my approach is to discover the textarea then from that get the appropriate display element to show the error count on the tab.
However, I cannot find how to get that textarea reference from within the onUpdateLinting function.
My onUpdateLinting function is:
lint: {
onUpdateLinting: function onUpdateLinting(annotationsNotSorted, annotations, cm) {
let errCnt = annotationsNotSorted.length;
console.log(errCnt + " errors");
let textArea = cm.getTextArea(); // << fails with cm.getTextArea is not a function
}
Which throws error 'cm.getTextArea is not a function'.
I note that if I use getTextArea when I am creating the codeMirror instance then that does not throw the error.
My conclusion is that the cm being passed into the onUpdateLinting callback is not the 'proper' codeMirror instance.
However, the codeMirror docs (screengrab below) days that the

Answer 1

I found that on the first callback of the onUpdateLinting the cm parameter is undefined. I guess what is happening is that the codeMirror instance is not yet defined to the linter when the linter fires up. The answer was then to check the cm reference before using it.
lint: {
onUpdateLinting: function onUpdateLinting(annotationsNotSorted, annotations, cm) {
let errCnt = annotationsNotSorted.length;
console.log(errCnt + " errors");
if (cm.getTextArea){
let textArea = cm.getTextArea();
// code to find and set the display element.
}
}
However, this left me with the situation that the error count was not updated when the codeMirror was first set up. The answer was to move the config of the lint option out of the config object and into a call to setOption, so the code became:
let myCodeMirror = CodeMirror.fromTextArea(myTextArea, {..setup options NOT including lint..})
myCodeMirror.setOption("lint", {
onUpdateLinting: function onUpdateLinting(annotationsNotSorted, annotations, cm) {
let errCnt = annotationsNotSorted.length;
console.log(errCnt + " errors");
if (cm.getTextArea){
let textArea = cm.getTextArea();
// code to find and set the display element.
}
},
esversion: 6,// use this instead of plain 'true' to allow ES6 code such as 'const' and 'let' to pass without erroneous complaints from linter.
undef: true, // linter config option
unused: true // linter config option
});
Summary - the codeMirror instance is instantiated without the lint option, then when the setOption() call is made for the lint, the linter runs causing the callback function to fire and I get the first-time-thru affect that I need to show any errors when the code is loaded.