seeing two independent selections

1

Hi! I am confused about the different notions of selection in CodeMirror. Consider the following CSS:

.CodeMirror-selected {
    background-color: blue;
}

.CodeMirror-selectedtext {
    background-color: red;
}

.CodeMirror-line::selection,
.CodeMirror-line > span::selection,
.CodeMirror-line > span > span::selection {
    background: pink;
}

Can you explain the significance of these three different ways of styling “the selection”?

I am seeing the following behavior, which I don’t understand.

  • I never see a red selection (so I’m not sure what the
    CodeMirror-selectedtext class is about).

  • If I start a selection outside of the editor, it is pink.

  • If I start a selection inside of the editor, it is blue.

  • I can have both types of selection at the same time, though starting
    a selection inside the editor clears the selection outside the editor
    unless I set readOnly: 'nocursor'.

  • The pink reference doesn’t seem to be recognized by codemirror’s
    getHighlight method. (By the way, is there a semantic distinction
    between “selection” and “highlight”?)

The behavior I would like to see is that there would only ever be one selection, and that you could start it from outside codemirror (since I believe this is how most applications work, and I don’t want to surprise users).

By the way, I have seen in the docs that CodeMirror supports multiple selections. My suspicion is that this concept doesn’t have anything to do with my problem though.

2

CodeMirror-selection is CodeMirror’s standard selection, a layer behind the text. CodeMirror-selectedtext is only used when the mark-selection addon is enabled, and is applied to the text that’s selected itself.

The pink selection you’re seeing is, I assume, the native DOM selection.

3

Yes, the pink selection is the native DOM selection. But is there a way for it to be better integrated with CodeMirror’s selection so there do not appear to the user to be two independent selections?

4

Not really. CodeMirror manages its own selection, and if you start a selection outside of it, it cannot (and should not) interfere with that.

5

I don’t need for CodeMirror to interfere with the creation of native selections or (I think) to do anything that would be impossible.

I am using CodeMirror in an application that is similar to Medium in that most users just read content, and it should seem to them they are just viewing a normal static web page. But privileged users can enable editing mode.

It is more important that the content reading experience is unsurprising than it is that the editing experience is.

But currently, even in read-only mode, you see two independent selections. The browser selection doesn’t clear when you click in CodeMirror, and the CodeMirror selection doesn’t clear when you click outside of CodeMirror. And the CodeMirror selection doesn’t work with cut and paste. This is likely to confuse and frustrate users.

Perhaps I could fix the problems by adding adding event handlers that would respond to changes in the two selections. But that seems like it would take some work, and it would be bug-prone because I would basically be trying to maintain an elaborate illusion.

I have been extremely happy CodeMirror on the whole, and I don’t want to switch to something else, so I am hoping that there is a better way with selections.

6

Making read-only editors not capture the selection is indeed something that would be useful, and which I will implement at some point. But I haven’t gotten around to that yet.

7

Great to hear this is on your radar; I would love to see it in CodeMirror!