[Bug]: Collaboration Cursor Flicker

[amnesca]

Which packages did you experience the bug in?

@tiptap/extension-collaboration-cursor

What Tiptap version are you using?

2.2.4

What’s the bug you are facing?

I installed tiptap using Laravel Livewire instructions and set up a temporary server using - npx @hocuspocus/cli --port 1234 --sqlite. Regardless of the browser I'm using the collaboration cursors flicker like crazy (see below).

What browser are you using?

Firefox

Code example

https://github.com/amnesca/tiptap-collaboration-cursor.git

What did you expect to happen?

I expect the cursors not to flicker.

Anything to add? (optional)

No response

Did you update your dependencies?

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

Are you sponsoring us?

• [x] Yes, I’m a sponsor. 💖

[RenovationIGuess]

I'm facing the same issues and don't know how to resolve @@. I tried their template using next but it has no problem @@.

[nperez0111]

I've found that this happens when the plugin is instantiated twice & not destroyed. The cursor flickers sending awareness updates back & forth between the editor instance that is active & the editor instance that is created but not destroyed in the background.

I believe that their might be an issue where the editor instance is not being destroyed, but I don't fully understand the livewire integration.

[amnesca]

Well, I think I may have solved the issue of the duplicated editor instances. I haven't tested it on my original collaboration cursor code yet, however it seems the x-data and x-init are both calling an instance of the editor, which is most likely the cause of the cursor flicker. So instead, just pass the element with the content (see code below). Or better yet, you could just use element: this.$refs.editor like the Alpine.js example along with the preferred x-modelable method to entangle the content. Perhaps this should be updated in the Livewire instructions or a note added accordingly?

<div
  x-data="setupEditor($wire.entangle('{{ $attributes->wire('model')->value() }}'), $refs.editor)"
  wire:ignore
  {{ $attributes->whereDoesntStartWith('wire:model') }}
>
  <div x-ref="editor"></div>
</div>

window.setupEditor = function (content, element) {
  let editor

    return {
      content: content,

      init() {
        editor = new Editor({
          element: element,
  ...}