Add option to use plugin as a simple cursor replacement

[ronrdev]

Since obsidian switched to using the system cursor a plugin is needed to add back an optional styled cursor. I personally like the fat blue cursor of iAwriter.

Option to go back to a custom cursor in Obsidian. Option to turn off cursor movement effects. (As cool as they are :)

Adding an image from iAwriter just to show how the prominent cursor fits with the intention of this plugin.

[vrtmrz]

Thank you for asking me! Ninja-cursor can turn into as like that, by CSS-snippet.

Like this:

/* iAWriter-ish style. */
.cursorWrapper .x-cursor {
    opacity: 1;
    background: #00bbff;
    width: 3px;
    left: -1px;
    top: -6px;
    height: calc(12px + var(--cursor-height));
    transition: opacity;
}

/* Disable movement effect */
.cursorWrapper .x-cursor::after {
    display: none;
}

/* Blinking */
.cursorWrapper .x-cursor0,
.cursorWrapper .x-cursor1 {
    animation: blink1 1s 0s both infinite;
}

@keyframes blink1 {
    0% {
        opacity: 1;
    }

    45% {
        opacity: 1;
    }

    50% {
        opacity: 0.2;
    }

    95% {
        opacity: 0;
    }

    100% {
        opacity: 0.2;
    }
}

Could you please try this CSS snippet?

[ronrdev]

Hello. Thanks for sharing the snippet. It works well enough for me.

I don't know if there is a way to make it more responsive. Just want to report two issues. The custom cursor does not follow scroll position, and it is slower to respond than the system cursor after typing each letter. I will have to comment out the blink because the system cursor is still visible causing distraction.

https://user-images.githubusercontent.com/13022919/187514467-f621c180-67c9-4374-a159-7e6dc30a36ce.mp4

Also noticed this glitch. I understand this is just a fun plugin, so I can live with the issues.

https://user-images.githubusercontent.com/13022919/187516019-d4a656c0-2777-42e5-a8a7-6cd7527d9f87.mp4

Thanks again. Having a more prominent cursor helps me

[vrtmrz]

@ronrdev The scrolling issue is fixed at v0.0.5! And I am going to investigate the delay of cursor movement.

[ronrdev]

Awesome! Also would it be possible to have different settings/css for light and dark mode? I can create a new issue if this is something you would like to add to the plugin. I just want to change the color, but people might want a toggle/different effects for light and dark mode as well.

[ronrdev]

After the latest update the ninja cursor is showing below the system cursor. I'm using the css snippet to recreate the iAwriter like cursor.

[vrtmrz]

@ronrdev

So sorry for missing replies!

Also would it be possible to have different settings/css for light and dark mode?

Yes, we can! We can make different styles between both modes. as below:

/* The cursor colour in a light theme */
.theme-light .x-cursor {
    background: #00bbff;
}
/*The cursor colour in a dark theme */
.theme-dark .x-cursor {
    background: #ffbbff;
}

Just only make the scope narrow.

After the latest update the ninja cursor is showing below the system cursor. I'm using the css snippet to recreate the iAwriter like cursor.

Owing to the v1.0 upgrade, we have to ignore the area where tabs are shown, otherwise we could not move the window. So we have to offset the cursor also in custom CSS. Just as like below:

    top: calc( -6px - var(--header-height));

Could you please try this CSS again?

[ronrdev]

Thank you for sharing the css. It's working great and ninja cursor feels more responsive with the new release.

[PootieeTang]

Hello and thank you for suggesting these features @ronrdev, additionally because you're a fan of iA Writer you should check out the plugin called Stille as it focuses on the sentence you're struggling. But I do have a question for @vrtmrz, is there anyway you can help me with this issue? I am noot sure if its a css problem or something I need to disable on my end. Basically the IA cursor you provided above works great for me, but it slightly is a bit faster than the original cursor, when the IA cursor blinks you can faintly see the system cursor.

https://user-images.githubusercontent.com/121781912/210195606-a58bd0b0-4a41-49b1-8c39-914ff19eef09.mp4

[vrtmrz]

Oh my dear, I am really sorry for missing this!

If you feel noisy with the default cursor, we can make that invisible with this CSS:

.cm-editor * {
    caret-color: transparent !important;
}

[Anutim]

Oh my dear, I am really sorry for missing this!

If you feel noisy with the default cursor, we can make that invisible with this CSS:

.cm-editor * {
    caret-color: transparent !important;
}

Hey, this doesn't work when you have text selected. Any way to apply this for that too?

Also, the styling posted earlier in the thread (https://github.com/vrtmrz/ninja-cursor/issues/3#issuecomment-1231093506) doesn't play nice with selected text in general, especially when there's multiple rows selected. You got any ideas on how to fix that? (Or alternatively, disabling the custom cursor while text is selected)

EDIT: Another thing I thought I'd ask too, I'm using 'transition-duration: 100ms;' to smoothen the movement of the caret. It works great when I'm typing, but it's terrible for when I'm scrolling. Is there a way I could make it snappy again just for scrolling, but otherwise use the smooth transition-duration?

EDIT2: There also seems to be a bug where every 2nd scroll downwards or so, the cursors position doesn't update?

[dmalyuta]

@Anutim for hiding the cursor that appears when text is selected, I found that you can add:

.cm-cursorLayer {
    animation: none !important;
    visibility: hidden !important;
}

[Stakker]

Hello and thanks for making this excellent plugin :-)

I am also using it to have an iA Writer-style big and fat cursor that is easy to locate. (The "ninja swoosh" is a really cool idea that also serves a purpose, but perhaps a bit too wild for my taste :-)

Mostly this works great with the above snippets (thanks for sharing them!), but there are still two issues:

1. The cursor reacts correctly to headers moving to the right to show the "#" and other dynamic WYSIWYG elements of the Live Preview mode, when I move to cursor over them using the keyboard. If I move the cursor to (for example) a header using the mouse, the cursor doesn't react to the text jumping to the right. I need to move it using the keyboard for it to catch up with the text.

2. The smoothly fading opacity animation in the above snippet looks great, but uses three times more CPU than the normal CodeMirror cursor… It's a bit crazy IMO for just a cursor, so I disabled the animation completely. With the CodeMirror cursor hidden and no animation, Ninja Cursor uses three times LESS CPU than the default cursor, which is pretty awesome! However, I'm wondering if just blinking the cursor on/off would also be a CPU friendly option… But I don't know how to do that, or if it is even possible?

Cheers!

[Stakker]

A third issue: select multiple lines of text, and you can see a cursor for every line on the left. This is fine by me, but when I delete all the lines, the cursors on the left stay there until I move the cursor again.

There's also a minor issue when you fold/unfold a section. The cursor won't move until I let go of the modifier key. But this is not a biggie :-)

PS: I do understand that this is a bit of a hack, so not everything can be fixed… but hopefully some things can :-)

[ronrdev]

Hello

I had set an animation delay that is not working after updating today. I'm still looking for a solution. Not sure what changed that is affecting this.

/* Blinking */
.cursorWrapper .x-cursor0,
.cursorWrapper .x-cursor1 {
    animation: blink1 1s 0s both infinite;
    animation-delay: 2s;
}

[bramblebrain]

Here’s my updated snippet that incorporates all the fixes as well as solves the latest bug with the cursor blinking during typing as well as the cursor sometimes not blinking when idle. In the code I did reduce the animation delay to 1 second.

/* iAWriter-ish style. */
.cursorWrapper .x-cursor {
    background: rgba(49, 177, 235, 1);
    width: 3px;
    left: -1px;
    top: calc( -6px - var(--header-height));;
    height: calc(12px + var(--cursor-height));
    transition: opacity;
}
/* The cursor colour in a light theme */
.theme-light .x-cursor {
    background: rgba(49, 177, 235, 1);
}
/*The cursor colour in a dark theme */
.theme-dark .x-cursor {
    /* replace if you want purple cursor
    background: rgba(225,187, 225, 1); */
    background: rgba(49, 177, 235, 1);
}

/* remove normal cursor when ninjacursor is installed.
Alternative method: caret-color: rgba(0, 0, 0, 1);
*/
body:has(.x-cursor) .cm-editor * {
caret-color: transparent;
}

/* Disable movement effect */
.cursorWrapper .x-cursor::after {
    display: none;
}

/* Remove normal cursor on text selection */
.cm-cursorLayer {
    animation: none !important;
    visibility: hidden !important;
}

/* Blinking */
.cursorWrapper .x-cursor0 {
    animation: blink0 1s 1s both infinite;
}
.cursorWrapper .x-cursor1 {
    animation: blink1 1s 1s both infinite;
}

@keyframes blink1 {
    0%   { opacity: 1;   }
    45%  { opacity: 1;   }
    50%  { opacity: 0.3; }
    95%  { opacity: 0;   }
    100% { opacity: 0.3; }
}

@keyframes blink0 {
    0%   { opacity: 1;   }
    45%  { opacity: 1;   }
    50%  { opacity: 0.3; }
    95%  { opacity: 0;   }
    100% { opacity: 0.3; }
}