I know that if we want to get multiple remote cursors then we can simply target the y-RemoteSelectionHead className and get multiple cursor.But the problem is all the remote cursors have the same color. Now in order to get live cursors with different colors we have to t change the styling of yRemoteSelectionHead-${clientId} className. But I am not able to understand how can i select this dynamic className and change the styling.
currently what i am doing is I am generating a stylesheet everytime when the change eventlistener of the awareness is called but that would lead to multiple stylesheets being generated and added
awareness.on("change", (changes) => {
const statesArray = Array.from(awareness.getStates());
statesArray.forEach((state) => {
// console.log("the user is" + state[1].user.color);
const clientId = state[0];
console.log(state[1]);
if (state[1].user) {
const styleSheet = document.createElement("style");
styleSheet.innerText = `
.yRemoteSelectionHead-${clientId}{
border-left: 2px solid ${state[1].user.color} ;
position:relative;
}
.yRemoteSelectionHead-${clientId}::before {
content: '${state[1].user.name}';
color: white;
top: -15px;
position:absolute;
left: -2px;
background-color:${state[1].user.color};
opacity:0.8;
font-size:10px;
padding-left:1px;
margin-bottom:8px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-top-left-radius:5px;
}
`;
document.head.appendChild(styleSheet);
// console.log("the color is" + state[1].user.color);
}
});
});