[Bug]: Tiptap CollaborationCursor flickering issue

[bahadiraraz]

Which packages did you experience the bug in?

@tiptap/extension-collaboration-cursor

What Tiptap version are you using?

^2.1.16

What’s the bug you are facing?

I'll use HocuspocusProvider, TiptapCollabProvider, and WebsocketProvider regardless, but the CollaborationCursor is flickering. In some browsers, it's less noticeable, but the problem still exists in all browsers.

What browser are you using?

Chrome

Code example

No response

What did you expect to happen?

There should be no flickering

Anything to add? (optional)

No response

Did you update your dependencies?

• Yes, I’ve updated my dependencies to use the latest version of all packages.

Are you sponsoring us?

• Yes, I’m a sponsor. 💖

[bahadiraraz]

@nikgraf @bdbch can you please take a look ?

[bdbch]

Are you using the strict mode on react?

[bahadiraraz]

Are you using the strict mode on react?

No

[bahadiraraz]

In the build version of Next.js, the problem gets resolved, but there is a flickering issue when running in Next.js dev mode.
@bdbch

[Bajena]

👋 We're experiencing the same issue in react. I've recorded a loom here (sorry for my baby crying in the background 🙈):
https://www.loom.com/share/251f3281d0ce4df491d9db0913479bd5

We're using the TipTapCollabProvider with YDoc:

const doc = new Y.Doc();
const provider = new TiptapCollabProvider({
  name: 'test-product-doc', // any identifier - all connections sharing the same identifier will be synced
  appId: 'app-id', // replace with YOUR_APP_ID
  token: 'TOKEN', // replace with your JWT
  document: doc,
});

Do you have any idea what could be causing that?

[ThisDavidRichard]

Hey @Bajena @bahadiraraz , can you review this comment and check if the suggested code works for you?
#4482 (comment)

[Bajena]

Thanks @ThisDavidRichard, I just verified that it fixed the bug for us 👍

Btw, the double wrapping of requestAnimationFrame seems to be unnecessary, might be worth checking that :)

[svenadlung]

Should be fixed in 2.2.2 :)