Custom cursor like in Monaco Editor

v6
1

Hey, I trying to build a code editor using CodeMirror and Electron. So far the editor works fine. But I noticed that the default cursor looked a bit shabby. I previously used Monaco and in that the cursor looks really good.
cmCursorRequest

I tried to style the cm-cursor element in css but it doesn’t work. Here is my current code:

.cm-cursor {
  width: 2px !important;
  height: 18px !important;
  background-color: blue;
  border-left: 2px solid black;
  animation: caretAnim 1s infinite forwards !important;
}

@keyframes caretAnim {
  0%, 100% {
    scale: 1;
    opacity: 1;
  }
  50% {
    scale: 0.8;
    opacity: 0;
  }
}

@marijn it would be very helpful if you could look into this and point me in the right directions.
Thanks.

2

Your styles are probably not specific enough to override our shabby default styling. Add a parent selector like .cm-editor in front of them, maybe.

1 Like
4

I tried that and I could successfully change the background color (which is actually the left border) but I couldn’t change the animation. The default animation seems to be conflicting with my custom one. I tried to set animation: none on all the elements using the * selector but it still does not seem to work. It would be great if you could tell me how to disable the default animation, @marijn thanks :slight_smile:

5

I’m not very knowledgeable about CSS animations. Is it possible redefine a named animation? The editor will flip animation-name between cm-blink and cm-blink2 in order to restart blinking (there’s no direct way to do that in CSS, as far as I’m aware).

6

UPDATE

I actually found a way to disable the default animation. You have to set animation: none !important using the * selector like this,

* {
  animation: none !important;
}

The !important part is well, important (pun intended or not) because without it the default animation is retained. Also you have to use !important when you set your custom animation. Hope this helps.

Update 2

I found the element which you have to style for the autocomplete dropdown. Its called .cm-tooltip-autocomplete. I could change the background color. But I could not change the color of the selected option and the icon. The autocomplete dropdown closes when I click on the div in the Chrome DevTools so I have to do some more digging. :slight_smile:

I haven’t found a way to to that yet, but it looks fine without the animation. I also want to ask another question. I don’t know if I need to create another topic but here’s the question anyway. I want to customize the autocomplete dropdown, like for example change the background color and especially the icons. I checked the styling example page, but nothing about this was mentioned. So please tell me how I can customize it. Thanks @marijn, and also sorry for the slew of questions :slight_smile:

7

One way around this is to run something like setTimeout(() => {breakpoint}, 1000) in the console and then open the completion tooltip. When the page is paused by the debugger you can inspect everything at your leisure.

8

Here is an example of redefining a CSS animation using JavaScript: jquery - Changing css animation in javascript - Stack Overflow

9

I think it might work, but I already found a solution (see my reply above). I will try it when I get some free time.

10

I followed your instructions and found this question on StackOverflow. I ran the setTimeout(function(){debugger;}, 5000) command in the DevTools and then quickly opened the autocomplete dropdown. Then I was able to browse the HTML layout. I was actually looking to change the background color of the selected option. And for any future contributors, it is

.Codemirror .cm-tooltip-autocomplete ul li[aria-selected]

where .Codemirror is the classname of your div you’re attaching the Codemirror instance to. Hope this helps :slightly_smiling_face:

About the icons next to the labels, I still haven’t found a way to change them. From what I can see in the DevTools, the icons have been created using CSS, am i right @marijn ?

11

Yes. The library will add a class based on a completion’s type property to each completion, and the CSS renders that as icons.

12

Okay, so how can I add custom icons? Do I have to use something like IcoMoon to generate a font with my icons? I’m also trying to mod the default One Dark theme. I want some words like the imported libraries and function keywords to be emphasized. I tried to edit the index.js file in the theme folder but it made no changes. How can I do this, @marijn ? One more thing is that the cursor is still blinking when I’m typing in the editor. Is there a way to stop the animation when the user is typing and then after some time resume it?