Selections in CodeMirror vs. selections "known" by browser's document/window

First of all I would like to express my admiration for CodeMirror and the people behind it! I am extremely impressed by the many smart approaches CodeMirror is using to perfectly “fake an editable control”.

Out of curiosity, I have one questions to which I could not find an answer in the documents I have read (including Marijn Haverbeke’s blog on CodeMirror’s “internals”).

How does CodeMirror manages and highlights selections in the editor? document.getSelection() only returns the selection in the hidden <textarea> within the hidden <div> at the “fake” cursor’s position (all of which can found in the DOM). However, there seems to be no element in the DOM that “marks” the visible selection in the editor. Therefore, I assume that the visible selection is an “actual” selection of the text (using the browser’s “mechanisms”) in the different <spans> and the characters between them. But than again, if that is true, why is that selection “unknown” to the browser (hence, document.getSelection() does not return the visible selection)?

I would be grateful for any hint. Thank you very much in advance!

It’s not, it’s drawn using absolutely positioned elements laid behind the text (see the .CodeMirror-selected elements). Though in the upcoming CodeMirror 6 the DOM selection is synced with the editor selection (which helps a lot with accessibility).