How to customize cursor style ?

[timeswind]

When doing experiment with the sample code from stories the cursor style is a little bit off from the demo. Wonder how to customize the cursor style with custom render functions.

[raymonddaikon]

You want to pass a function that looks like this to the createCursor option

((user) => {
      const awarenessData = awareness.getAllStates();
      const cursorUserData = awarenessData[user];
      const cursor = document.createElement("span");
      cursor.classList.add("ProseMirror-loro-cursor");
      cursor.setAttribute(
        "style",
        `border-color: ${cursorUserData.user?.color ?? user.slice(0, 6)}`,
      );
      const userDiv = document.createElement("div");
      userDiv.setAttribute(
        "style",
        `background-color: ${cursorUserData.user?.color ?? user.slice(0, 6)}`,
      );
      userDiv.insertBefore(
        document.createTextNode(cursorUserData.user?.name ?? user.slice(0, 6)),
        null,
      );
      const nonbreakingSpace1 = document.createTextNode("\u2060");
      const nonbreakingSpace2 = document.createTextNode("\u2060");
      cursor.insertBefore(nonbreakingSpace1, null);
      cursor.insertBefore(userDiv, null);
      cursor.insertBefore(nonbreakingSpace2, null);
      return cursor;
    })