Allow custom remote cursor tooltips

[liamhess]

Checklist

[x] Are you reporting a bug? Use github issues for bug reports and feature requests. For general questions, please use https://discuss.yjs.dev/
[x] Try to report your issue in the correct repository. Yjs consists of many modules. When in doubt, report it to https://github.com/yjs/yjs/issues/

Is your feature request related to a problem? Please describe.
I would like to add user avatars to the collaborator cursor tooltips.

Describe the solution you'd like
An API to provide a custom dom element for the YRemoteCaretWidget.

Describe alternatives you've considered
Currently I just CSS style the remote cursor so that it matches the look of the rest of my app as good as it gets but I can only get so far with CSS styling, e.g. can't add the avatar/profile picture.

Additional context
Now I've seen that someone already proposed this 5 years ago and asked whether he could contribute so I want to ask again if your still open for contributions. If yes I might contribute the fix, if I can make it work.

• I'm a sponsor 💖
• This feature is critical for my project.

[dmonad]

Hi @liamhess, I'm open to a PR. However, it doesn't have to be a custom element. I would suggest implementing a similar approach to y-prosemirror, allowing users to define how the dom element is created.

I propose that you define the API first (how would a user of y-codemirror use custom carets?).

[liamhess]

I propose that you define the API first (how would a user of y-codemirror use custom carets?).

Hey @dmonad, thanks for the quick response.
Now after looking at y-prosemirror: I think we could just do something like:

yCollab(ytext, awareness, {
  createCaret: ({name, color}, clientId) => ({
    element: createCaretElement(name, color, clientId),
    theme: customCaretTheme,
  })
})

Where the element function looks like this (user: { name: string, color: string }, clientId: number) => HTMLElement and the theme is just a codemirror theme.
Then we pass the element function and the theme to wherever they are currently hard coded. And if they are not provided we just use the default caret.
What do you think? If that sounds good to you, I'll open a PR.

[dmonad]

Thanks @liamhess!
I like the createCaret property in yCollab-options. But why do you need to specify a theme every time a caret is created?

How would I use the theme in createCaret()?