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

[Mirwaisse]

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:

If I activate Blockman, it looks like this:

When I try to select text anywhere:

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]

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]

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]

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.