Block cursor possible?


#1

Any way to get a block cursor similar to the image below, I tried setting the width in the css, but it didn’t seem to work for me… Any ideas?


Blinking Cursor
Some CSS styles not honored by decorations
How to color brackets?
#2
.editor .cursor {
   position: absolute; 
   border: 1px solid;
   background-color: rgba(244,100,122,0.6);
}

Put that in your style sheet and it should do it.


Making the cursor a block
#3

Thank you! that is exactly what I was looking for. I was missing the position attribute.


#4

I haven’t tried your solution yet (not near my Mac now), but I wonder if there’s any way to specify the background-color relative to the current theme. Even if not, this is a huge improvement! Thanks.


#5

I hacked together block-cursor.patch for anyone who works with CJK files (where there are characters wider than a single  ) and wants a block cursor that covers fully the character behind it.

I use this in combination with the vim-mode package.

  • CJK Characters
    • Before: image
    • After: image
  • Tabs
    • Before: image
    • After: image

#6

Ideally you would be able to position the cursor behind the character and have control over the character it selects (so you can change colours for example). For now, I find the following to work quite nicely:

.editor .cursor {
  margin-left: -1px;
  border-radius: 2px;
  padding: 0 1px;
  border-left: none;
  background: rgba(255,255,255,.3);
  -webkit-transition: -webkit-transform, .06s;
}
.editor.is-focused .cursor.blink-off {
  visibility: visible;
}

#7

What am I doing wrong if atom isn’t parsing my styles.css file? I’d tried some of the above and nothing is happening, even after restarting atom.


#8

There have been some major changes to Atom since March of last year :smile: Check out some of the topics about the Shadow DOM changes for tips on how to update the above styles to work better with the latest versions of Atom.


#9

Shameless plug for my own block-cursor package :smile: . Although it is named block-cursor, it supports multiple cursor types and other cursor customization.


#10

Olmo, I’ve just tried your plugin, but the blinkOn isn’t transparent, so you can’t see what’s underneath your cursor half of the time …


#11

The built-in color picker doesn’t do enough and the package has no opinion about what the opacity of the cursor should be. Here’s something you can do to fix it:

  1. Make sure the block-cursor package is set to a custom color. Any color.
  2. Open your config.cson. You’ll see a block that resembles the data below. None of the color numbers matter.
  3. Change alpha to a value between 0.1 and 0.9, save the file, and you’ll see a more translucent cursor. Adjust to your preferences.
  "block-cursor":
    global:
      blinkOn:
        backgroundColor:
          red: 0
          green: 128
          blue: 64
          alpha: 1

#12

I added following in styles.less to get block cursor

atom-text-editor::shadow .cursor {
  background-color: white;
}

which covers the character under cursor when cursor is on. I can set the opacity to 0.5 but is it possible to get reverse color effect like in the picture at the original question above?


#13

to make Atom cursor to a block, write in ~/.atom/style.less:

atom-text-editor .cursor
  { border-width: 1vh }

optionally, to stop it from blinking:

atom-text-editor .cursor
  { opacity: 1 !important }

#14

Works as desired !!


#15

A few years late but to get a reverse color effect, you can use mix-blend-mode on the .cursors parent class along with the styling of .cursor.

cursor

atom-text-editor .cursor {
    border: 1px solid white;
    border-radius: 3px;
    background: white;
    opacity: 1 !important;
}

atom-text-editor .cursors {
    mix-blend-mode: difference;
}