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, {
yUndoManager,
});
Could anyone guide me on where or how to look to fix this?
TIA
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.
Unfortunately it’s a college project that already has some years so it’s a little bit of a mess, I’m continuing the work of other people by adding the collaboration capabilities to the editor, but the editor was already there. I will try to find what css could be causing this, just have to find a way to leave the cursor focused in the editor while inspecting the code, for some reason I can’t get ngrok to work for me on sockets to try connecting another coputer to my localhost in this one to easily leave the cursor and inspect the css on this one.
Hey! Found the problem, it was not the css per se, but my lack of understanding of Angular. I have a component where I have the editor, so as I understood it I could put the css that was required inside that fileName.component.scss file, but for some reason that didn’t work, I put it in app.scss and it looks beautiful now ^^.
