smooth-cursorify for Obsidian (Changelog: Ver 0.03)
Re: Issues / Bugs:
- I’m sorry that I don’t really have the skills or knowledge to be able to help you guys out. From what I know, my best guess is that these operations (Chinese input, VIM, etc) are expecting the default cursor.
- Ver 0.02’s CSS constantly hides the default cursor, no matter the context, so that it doesn’t overlap with the custom Ninja Cursor, leading to having the Ninja Cursor sitting at the beginning of the line whilst you can’t see the default cursor.
- Unfortunately, as we cannot style the default cursor, and Ninja doesn’t have the ability to recognise these operations, we can’t use this method to style its movement at all.
- But by using the CSS made by Fred_V, this version of the CSS will hide Ninja and show the default cursor in certain situations, which hopefully will redress this issue somewhat.
Changelog:
- Rewrite / Retooling: This version makes use of CSS by Fred_V, changed slightly to be more similar to the former version of smooth-cursorify. Incorporating the fixes that their version also includes. (Note: Fred_V’s CSS also includes the smooth-effect, just hidden as a comment, so if you prefer their styling and know how to edit the CSS, I suggest using their version.)
Addendum:
- A prototype plugin, inspired by this thread has been started, its still in its early development but you can find out more details and try it out yourself here. (Disclaimer: I’m not involved with the project, but as I know basically nothing about code, that’s probably for the best.)
CSS / Install Instructions:
- You will need the Ninja Cursor plugin enabled. It can found in Community Plugins.
- You will need to create a CSS Snippet for Obsidian and copy/paste the following CSS.
/* Hides Ninja Cursor during selection to avoid Spanning Across Lines */
body:has(.cm-cursor-primary) .x-cursor {
display: none;
}
/* If the Workspace is active and in source mode, Ninja Cursor is applied. */
body:has(.x-cursor):has(.workspace-leaf.mod-active > [data-mode="source"]) {
--my-cursor-color: var(--caret-color); /* Sets color of your cursors. */
--ninja-cursor-width: 1px; /* Sets the width of your cursors.
/* Removes normal cursor animation if multi cursors. */
.cm-cursorLayer:has(.cm-cursor-secondary) {
animation: none !important;
}
/* Styles the Regular Cursor Caret. */
.cm-s-obsidian .cm-cursor,
.cm-s-obsidian .cm-dropCursor {
border-left-color: var(--my-cursor-color); /* Sets Caret Color. */
border-left-width: var(--ninja-cursor-width) /* Sets Caret Width. */
}
/* Styles Ninja Cursor Caret. */
.x-cursor {
background: var(--my-cursor-color); /* Sets Caret Color. */
opacity: 1; /* Makes Caret Visible. */
width: var(--ninja-cursor-width); /* Sets Caret Width. */
--cursor-height: calc(var(font-size) - 2px); /* Sets Caret Height. */
max-height: calc(var(--font-ui-large) * 2); /* Caps Caret Height at 2x font size. */
top: calc(0px - var(--header-height)); /* Ensures Caret is inline with selected line. */
transition: all 80ms !important; /* Sets the animation delay of the Ninja Cursor. Fast typers should use a higher delay to maintain the effect. */
}
/* Hides the Default Ninja Cursor Dashing Effect. */
.cursorWrapper .x-cursor::after {
display: none;
}
/* Hides Regular Cursor when Ninja Cursor Installed. */
.cm-editor * {
caret-color: transparent;
}
}
/* Applies the Caret Blinking Effect. */
.cursorWrapper .x-cursor0 {
animation: blink0 1s 1s both infinite;
}
.cursorWrapper .x-cursor1 {
animation: blink1 1s 1s both infinite;
}
/* Keyframes for the Caret Blinking Effect. */
@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; }
}
As always, If you find any better alternatives, be sure to share it here!
(Last post deleted due to the blinking effect being broken, my bad.)