How to always display cursor

1

When the editor is blurred, the cursor is hidden. This is a good indicator of whether it is focused or not, but it is not ideal for every situation. Particularly when trying to use CodeMIrror in more of a movie setting than an editor setting. I would like an option for the cursor to always be displayed regardless of whether the editor has focus.

I couldn’t find anything in the docs, or in the onblur and onfocus events in the source code to indicate if this is possible. There are certainly some haxey ways of doing this, but I am here to ask if there’s anything official. If there isn’t I will go with haxey way and also log an issue.

2

The hiding is done with CSS, look for the CodeMirror-focused class in codemirror.css. You can override this to keep the cursor visible, but there is currently no way to avoid having the blinking stop when the editor is blurred (and it might stop at a point where the cursor is hidden).

3

Thanks for the tip, that sounds like a good compromise.

4

I would also like the cursor to be visible even when cm is not focused.
In codemirror.css I see just 2 uses of CodeMirror-focused:

.CodeMirror-focused div.CodeMirror-cursors {
visibility: visible;
}

.CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }

But I don’t understand how to use this to style the cursor when
cm is blurred. The string “blur” doesn’t occur in the css file.
(PS:thanks for a fantastic tool! )

5

When the editor is not focused, the CodeMirror-focused class is not present. There is no sepearte blur class.

6

After the loading of my codemiror code and styles, I added to the header of my web page:

div.CodeMirror-cursors {
visibility: visible;
}
When I click on another pane in my app, if I click while the cursor is shown,
then the cursor freezes (doesn’t blink) and stays shown with the codemirror
pane not focused. But, as you noted above, if you happen to click outside
of codemirror when the blink is ‘off’, you’re out of luck, no cursor shown.

Perhaps there’s some way to use a textmark (or bookmark) when cm is blurred?
I don’t literally need the cursor per se, just something to let me know where the
insertion point is.
My application uses cm for regular text entry but as an additional way to get text
inserted, I have a dialog box, and clicking on buttons in the dialog inserts
various text at the cursor. I want to see that cursor position while the
dialog has the focus, and also after I insert text (at the cursor) from clicking
a button in the dialog box, I want to see that the cursor has changed to
the end of the inserted text.
If textmarks were used for this , I could just mark the char after (or before) the
cursor with a “selection length” of 1 char, but there would be the edge cases of
what if the cursor is at the beginning or end of the text in the editor buffer?
(common cases).
As I have it now with the above css, the visible cursor does indeed follow to
the end of the insertion so it works great IFF the user happens to blur
cm while the cursor blink is visible.

I see in the codemirror.css file:
.cm-animate-fat-cursor {
animation: blink 1.06s steps(1) infinite;
-webkit-animation: blink 1.06s steps(1) infinite;
}
I played a bit with this but didn’t see it change anything.
BTW I am using the Chrome browser and only care about my app working in Chrome.
Thanks for the speedy response.

7

A bookmark could be used to do this. You can pass a widget to show at the given position, for which you could use an inline-block with a border and a negative margin (so that it doesn’t take up space).

8

This fixed the issue for me

editor.on('blur', function () { $(".CodeMirror-cursors").css('visibility', 'visible'); });
9

I am using the merge addon to compare 2 files.
I would like the cursor to move to the first difference when the editor starts.
Changing codemirror.css makes the cursor visible, but it is not blinking.
If I click in the text the cursor blinks.
How can I get the cursor to initially blink when moving to the first difference?

These are the changes:

div.CodeMirror-cursors {
  visibility: visible; 
  position: relative;
  z-index: 3;
}

editor.on('blur', function () { $(".CodeMirror-cursors").css('visibility', 'visible'); });
10

I also struggled with keeping the cursor (unblinking) when focus is lost.

Looking in devtools, the cursor is blinked by setting/unsetting style="visibility: hidden;" on the cursors wrapping div - that is the div with class="CodeMirror-cursors", this style then overrides any css rule visibility settings(ie. div.CodeMirror-cursors { visibility: visible; } )

I solved this by adding ‘!important’ like this:

// If newState is provided add/remove theClass accordingly, otherwise toggle theClass
function toggleClass(elem, theClass, newState) {
		var matchRegExp = new RegExp('(?:^|\\s)' + theClass + '(?!\\S)', 'g');
		var add=(arguments.length>2 ? newState : (elem.className.match(matchRegExp) == null));
		elem.className=elem.className.replace(matchRegExp, ''); // clear all
		if (add) elem.className += ' ' + theClass;
}

// toggle class on all cursors
function cmToggleCursorsClass(cm, theClass, newState) {
	toggleClass(cm.getWrapperElement().getElementsByClassName('CodeMirror-cursors')[0], theClass, newState);
}

// keep an unblinking cursor on when blurring
cm.on('blur', cm => { cmToggleCursorsClass(cm, 'CodeMirror-cursorsVisible', true); });
cm.on('focus', cm => { cmToggleCursorsClass(cm, 'CodeMirror-cursorsVisible', false); });

// css
div.CodeMirror-cursorsVisible {
	visibility: visible !important;
}

Hope this helps!

PS.

to change a cursor inner style you can do:

// toggle class on all individual cursors
function cmToggleCursorsInnerClass(cm, theClass, newState) {
	let cursors=Array.from(cm.getWrapperElement().getElementsByClassName('CodeMirror-cursor'));
	cursors.forEach(c => { toggleClass(c, theClass, newState); });
}

// blink the cursor as thick red once
function cmBlinkCursorRedOnce(cm) {
	cmToggleCursorsInnerClass(cm, 'redCursor', true);
	setTimeout(() => { cmToggleCursorsInnerClass(cm, 'redCursor', false); }, 500);
}

//css
div.redCursor {
	visibility: visible !important;
	border-color: red;
	border-left-width: 2px;
}

I call cmBlinkCursorRedOnce when a search match is not found

11

But considering how ugly the above solution is, maybe we can have a ‘keepCursorOnBlur’ CM option instead ?

12

Guys, there is no need for JavaScript to accomplish styling of cursors when editor loses .CodeMirror-focused at all.
Just make this:

.CodeMirror:not(.CodeMirror-focused) .CodeMirror-cursors {
  visibility: visible !important;
}
.CodeMirror:not(.CodeMirror-focused) .CodeMirror-cursor {
  /* Styles for cursor when editor is out of focus */
}
1 Like
14

Hi, Change in codemirror.css

.CodeMirror-measure{
overflow: visible;
visibility: visible;
}

15

This is what worked for me with version 6:

EditorView.theme({
    ".cm-cursor": {
        display: "block",
    },
    ".cm-cursorLayer": {
        animation: "steps(1) cm-blink 1.2s infinite",
    },
});