Make selected text translucent so the cursor is visible in vim mode #12520
Conversation
|
Thanks for making a pull request to jupyterlab! |
github-actions
bot
added
Design System CSS
pkg:themes
tag:CSS
|
The actual correct way to fix this would be to, instead of showing the cursor as a div that moves around the page and sits behind the text, to update the background-color on the selected character. This would give us more flexibility in terms of color. Rather than using a transparent background, we could have selected text and the cursor not overlay at all. We could also specify the color of the selected character (right now for example, if the green cursor is on a green character, it's mostly unreadable). However the cursor logic is inside of the CodeMirror package and would require changes to that directly. Additionally, changing the cursor from a div to a character background-color would be a very extensive change to their code. So this translucent background-color solution, while less than perfect, is much smaller and requires no changes to other codebases. |
|
|
||
| --jp-inverse-layout-color0: white; | ||
| /* Separated rbg values to allow passing into rgba. */ | ||
| --jp-inverse-layout-color0: 155, 155, 155; /* white */ |
There was a problem hiding this comment.
We should not touch those generic variables as they may impact extensions styling. We should aim at something specific for the vim mode.
Looking at the DOM, when the VIM mode is activated the cm-fat-cursor is added to CodeMirror cm-s-jupyter CodeMirror-wrap in the top container.
I tried to add that CSS rule and it works as expected - feel free to tune the styling change this is more to point out a good CSS selector to fix the issue:
.cm-fat-cursor .cm-overlay.cm-searching {
opacity: 0.5;
}
|
Thanks @Jessie-Newman I have a recommendation to fix this using a slightly different and more specific change. |
|
@meeseeksdev please backport to 3.4.x |
…ursor is visible in vim mode
Benchmark reportThe execution time (in milliseconds) are grouped by test file, test type and browser. The mean relative comparison is computed with 95% confidence. Results table
Changes are computed with expected as reference. |
…isible in vim mode (#12579) Co-authored-by: Jessie Newman <Jessie-Newman@users.noreply.github.com>
2 participants
References
Fixes #8207
Code changes
When text is highlighted in vim mode we set a background color to it. Because the cursor appears behind the background, the cursor is entirely hidden if it is on a highlighted character. This sets the background color to be slightly transparent so the cursor is still visible. Works in both light and dark mode.
User-facing changes
Light mode
Dark mode
Backwards-incompatible changes
N/A
Edited to link the associated issue