uiwjs / react-codemirror

CodeMirror 6 component for React. @codemirror https://uiwjs.github.io/react-codemirror/
https://uiwjs.github.io/react-codemirror/
MIT License
1.67k stars 132 forks source link

selection on currently line is not visible #609

Open trusktr opened 11 months ago

trusktr commented 11 months ago

Hello! I get the same problem with these themes as here:

https://github.com/vadimdemedes/thememirror/issues/8#issuecomment-1826283539

I cannot see the selection on the current line.

Is it related to that update that @marijnh mentioned there?

Here's what I see:

https://github.com/uiwjs/react-codemirror/assets/297678/101cbacb-7456-408f-89da-36f64e5fc036

(That's the Noctis Lilac theme)

jaywcjlove commented 11 months ago

@trusktr upgrade v4.21.21, I fixed this bug.

Danish-Dsouza commented 11 months ago

I am still running into this issue when using bbeditInit or githubLightInit and customizing the lineHighlight property.

here is the relevant output of npm list :

├── @uiw/codemirror-theme-bbedit@4.21.21 ├── @uiw/codemirror-theme-github@4.21.21 ├── @uiw/codemirror-theme-material@4.21.21 ├── @uiw/react-codemirror@4.21.21

jaywcjlove commented 11 months ago

@Danish-Dsouza It looks like the problem has been solved.

image image image image
Danish-Dsouza commented 11 months ago

@jaywcjlove Maybe I am doing something wrong. Here is a screenshot of my editor. I have the first instance of single_employee selected, and you can see the match highlights.

Screenshot 2023-12-08 at 2 08 50 PM

Here is my code.


<CodeMirror
      height="auto"
      minHeight="50px"
      theme={bbeditInit({
        settings: {
          fontFamily: 'IBM Plex Mono',
          selection: '#CDE2F2',
          lineHighlight: '#FCFCFC',
          background: '#FFFFFF',
          gutterBackground: '#FFFFFF',
          caret: '#000000',
          gutterActiveForeground: '#000000',
          gutterForeground: '#8D8D8E',
          selectionMatch: '#CDE2F2',
        },
      })} 
// and more stuff unrelated to styling
/>
jaywcjlove commented 11 months ago

@trusktr lineHighlight must be a semi-transparent color value

https://codesandbox.io/p/sandbox/react-codemirror-example-codemirror-6-forked-cdfh7y?file=%2Fsrc%2FApp.js%3A9%2C29

jaywcjlove commented 11 months ago
- lineHighlight: '#FCFCFC',
+ lineHighlight: "#c7c7c76e",
Danish-Dsouza commented 11 months ago

- lineHighlight: '#FCFCFC',

+ lineHighlight: "#c7c7c76e",

D'oh, I will fix it! Thanks for the help and maintaining the library!