Hi,
I’m managing a gamepedia wiki with CodeMirror installed.
With syntax highlighting enabled in the edit box when editing a page, the selected text highlight color is invisible/transparent. Text is selected and you can copy/cut/move it etc., but you can’t see what is selected. The problem is absent when CodeMirror is turned off. This only happens on firefox 84 (tested chrome and opera where things work (almost*) fine).
After some research I tried adding the following to the wiki’s common.css, with little hope:
.CodeMirror-selected::-moz-selection {
background: rgba(30, 50, 50, 0.1);
}
.CodeMirror-focused .CodeMirror-selected::-moz-selection {
background: rgba(30, 50, 50, 0.2);
}
…which didn’t work, as you can probably guess.
During my research the closest I could find to my problem was this issue from another software using CodeMirror, where Nilk says:
Seems like setting an explicit background color on the codemirror diff view prevents the text selection layer from rendering. The text will still get selected but you won’t be able to see exactly what you select.
and later says that this fixed it.
I’m having trouble figuring out what to make of it exactly, but I still tried to find out what background color the wiki’s edit box is using when CodeMirror is on; it’s 2f0e0f, which is used in 4 instances in Hydradark.css on the wiki, none of which are related to the edit box. With CodeMirror off, the edit box’s background is black.
You can reproduce this by using firefox and opening any of this wiki’s main pages and click edit; or go there directly: Editing Officers - Crying Suns Wiki then switch CodeMirror on if it isn’t already, (the toggle is in the edit box top bar, to the left of the “Advanced” collapsible) then try to select text.
What am I missing?
Apologies, for my limited notions of css may largely explain why I’m stuck on this one. Any hints much appreciated.
(*almost fine, because the selected line background doesn’t show, which is slightly less problematic but still unexpected)
FF 84.0.2, Windows 10