Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Selected text is invisible on Cursor (an editor based on VS Code) #141

Open
Mirwaisse opened this issue Aug 19, 2024 · 3 comments
Open

Selected text is invisible on Cursor (an editor based on VS Code) #141

Mirwaisse opened this issue Aug 19, 2024 · 3 comments

Comments

@Mirwaisse
Copy link

When using Blockman on Cursor, which is a fork of VS Code, we can't see the box containing the text selection.

For example, here is Cursor with Blockman turned off. While I'm not selecting anything, the editor looks like this:
image
If I activate Blockman, it looks like this:
image
When I try to select text anywhere:
image

I know that this is an extension for VS Code, but I thought that maybe you knew a simple solution/setting value for Blockman to also work on Cursor.
Thank you for this great extension!

@leodevbro
Copy link
Owner

Thanks for the lovely feedback. Well, it is super strange, because blockman boxes have z-index about -9000 and even less. I tried to investigate it now but so far I could not find any difference between classic vs code and Cursor. Classic VS Code does not seem to have such issue.

I inspected the elements with F1 then Toggle Developer Tools in both IDEs. Blockman renders blocks with the vs code api method vscode.window.createTextEditorDecorationType and vs code renders them as css before and css after boxes. VS Code renders the selected text rectangle as regular div box with class selected-text. I tried to play with z-index values with many elements, but I could not find what causes the issue. Maybe you could also help me investigate it?

@Mirwaisse
Copy link
Author

Mirwaisse commented Aug 20, 2024

Honestly, I wouldn't know how to modify your extension to make it work on Cursor (I don't know how to code extensions!)

But I somewhat randomly found a workaround, I don't know exactly why it works 😅 It was thanks to this comment microsoft/vscode#21898 (comment)

  1. I installed Custom CSS and JS Loader and followed the instructions.
  2. In the custom CSS file, I put the rules from the Github comment, but I changed the z-index value at line 31 from 1 to 5 (the problem is still there at 4 and below)
/*###  Selection.Common  ###*/
/* prevents border overlap */
/* `height` value might need to be changed to suit your font settings. */
.cdr.selectionHighlight,
.cslr.selected-text{
  height: 17px !important;
}
/* hides extraneous leading/trailing selection edges. */
/* `width` value might need to be changed to suit your font settings. */
/* potentially could require additional workarounds if additional artifacts show up in specific contexts, or if it unintendedly affects selections that should be visible (single characters, etc.). */
:is(
  .cdr.selectionHighlight,
  .cslr.selected-text
)[style*="width:10px"]{
  display: none !important;
}

/*###  Selection.Matches  ###*/
.cdr.selectionHighlight{
  border:        1px solid hsla(334, 100%, 60%, 45%) !important;
  border-radius: 4px !important;
}

/*###  Selection.Active  ###*/
/* inactive pane. */
.cslr.selected-text{
  background-color: hsla(217, 50%, 58%, 20%)           !important;
  border:           1px solid hsla(217, 60%, 70%, 50%) !important;
  border-radius:    4px                                !important;
  pointer-events:   none                               !important;
  z-index:          5;
}
/* active pane. */
.monaco-editor.focused .cslr.selected-text{
  background-color: hsla(217, 76%, 63%, 50%)            !important;
  border:           1px solid hsla(217, 100%, 60%, 78%) !important;
  border-radius:    4px                                 !important;
  opacity:          0.65                                !important;
  mix-blend-mode:   plus-lighter                        !important;
}

@leodevbro
Copy link
Owner

leodevbro commented Aug 20, 2024

I guess, we are not able to fix this issue by modifying the extension itself, because vscode extension api is very limited and does not give us much permissions.

your workaround seems good, well, maybe it's not the best thing to modify vscode styles forcefully (unofficial way) like that, but I guess it's fine temporarily. Actually I think we should inform this issue to the Cursor team as a bug and hope that they will fix it on their own.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants