Add support for custom cursor components

This introduces a new prop on the Renderer component that allows users integrating with @tldraw/core to provide custom components to override parts of the default UI.

At this point, the only thing you can override is the component that's rendered for multiplayer cursors.

The only change to the default behavior here for users who don't provide a custom cursor component is that the default multiplayer cursors are now wrapped in a <div>. I don't love adding an extra level of depth to the HTML like that, so I'd love suggestions for other ways to implement this that keep the API simple without introducing breaking changes or extra HTML elements.

Please let me know if there are any code style or general structural issues with this implementation that I can clean up or fix.

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
core	✅ Ready (Inspect)	Visit Preview	Sep 24, 2022 at 7:32PM (UTC)
tldraw	✅ Ready (Inspect)	Visit Preview	Sep 24, 2022 at 7:32PM (UTC)

I've added test cases for Renderer and Canvas to make sure that they render without crashing when they're given custom cursors, but I see that most props on those components have not been giving their own tests. If it's not desirable to have this kind of additional test case for simple component props, let me know and I'll remove them.

I've added test cases for Renderer and Canvas to make sure that they render without crashing when they're given custom cursors, but I see that most props on those components have not been giving their own tests. If it's not desirable to have this kind of additional test case for simple component props, let me know and I'll remove them.

it's all good IMO anyway great work! just one thing tho, could you also let the tldraw package receive a prop for custom cursor components? like this one https://github.com/tldraw/tldraw/blob/31f0f02adf58b909f59764f62de09e97542eb2b1/packages/tldraw/src/Tldraw.tsx#L94-L96, and just pass it to the renderer https://github.com/tldraw/tldraw/blob/31f0f02adf58b909f59764f62de09e97542eb2b1/packages/tldraw/src/Tldraw.tsx#L478-L480

let me know if you need with that

closes https://github.com/tldraw/tldraw-v1/issues/358

well done! thank you for taking time to do this

No problem, thanks for making it easy to do.

How soon should I expect to have this in an official release?

How soon should I expect to have this in an official release?

maybe this friday PS: we love deploying on friday 😆

Closes https://github.com/tldraw/tldraw-v1/issues/200

Looks great @jamesbvaughan! I'm updating the PR to include the user's id in the props of the cursor. This should let certain applications pull related data using the ID (e.g. the user's name, etc).