I’m looking into how to set the color of the caret. It looks like it’s set at the ‘cm-line’ level with ‘!important;’ added. If I try to set it on anything more general (like ‘cm-content’) then obviously it won’t override this. I could hack the codemirror css with javascript to remove this style, but it seems like there’d be a better way. Not sure what that is, though.
By the way, the css rule that is locking this includes “.ͼ4”. Not sure what that’s for, and it’s kind of hard to google for it. Also, I’m using ‘basicSetup’ as I’m a noob.
The core library doesn’t use !important for caret color. Maybe you’re loading a 3rd-party theme that does this?
The class names with ͼ in them are autogenerated at run-time (and thus not stable, and not something you should target). You can replace them with .cm-editor in your rules if you need to get the same precedence.
I don’t think I’m doing anything too fancy. This is my codemirror.mjs file:
import {EditorView, basicSetup} from “codemirror”
import {EditorState} from “@codemirror/state”
codeMirror.editor = new EditorView({
extensions: basicSetup,
parent: inkEditorContainer
})
codeMirror.getDoc = function() {
return codeMirror.editor.state.doc.text.join(‘\n’);
};
codeMirror.setDoc = function(text) {
codeMirror.editor.setState(EditorState.create({
doc: text,
extensions: [
basicSetup,
EditorView.updateListener.of(v => {
if (v.docChanged) {
codeMirror.onTextChanged();
}
})
]
}));
};
and here’s where the “!important” is coming in (in case it helps):
drawSelection, which is part of basicSetup, hides the native selection and draws its own. So if you managed to override that you’d just end up with two interfering cursors. Style
.cm-editor.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground
instead.
Yeah, that’s what I saw when I tried overriding it: two carets. When I set ‘caret-color: white’ on parent ‘.cm-content’ (based on what I saw here), there was no change (still black), but when I tried disabling the “!important” rule, one of the carets was white and one was black.
I’m starting to think I need to spend some time learning how themes work, instead of setting the css directly through a style element. That page I linked above seemed to suggest I could use css to do it, but maybe I misinterpreted.
I just realized that your prior comment was suggesting to setup a different style rule for caret color.
I tried adding this:
.cm-editor.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground {
caret-color: white;
}
The caret was still black. Is that what you were suggesting, or did I mis-understand you?
Don’t style caret-color. As I said, the native caret isn’t visible, and the editor uses its own elements to show the selection. The selector I gave is for the selection background. For the caret, style .cm-editor .cm-cursor { border-left-color: orange }.
Oh, I understand now. Sorry it took a few explanations. It’s working now, thanks!