Awareness codemirror cursor filling whole row


I’m trying to use the y-codemirror library, and use awareness, but for some reason the cursor fills the whole row, and even splits lines, also if I mark multiple characters it doesn’t show it. I imagine this must be css related. I did copy and paste the css found at the bottom of the repository but it didn’t change anything.

I am initializing it like so, if it helps

    awareness.setLocalStateField("user", { name: name, color: "green" });

    // We bind the editor to the Y.Doc instance, this is what will sync it do the ydoc we have
    const binding = new CodeMirrorBinding(yText, editor, provider.awareness, {

Could anyone guide me on where or how to look to fix this?

This issue is most likely due to custom CSS or because you didn’t insert the required CSS correctly.

It works in the demo project. You could start from there and slowly migrate the code to your repository until you find the culprit. Make sure that the “basic” stuff works before you add your custom CSS that you have in your existing application.