[Bug]: Bubble Menu Not Working with Collaboration Extension

[jh-lee985]

Affected Packages

Bubble menu

Version(s)

2.4.0

Bug Description

We encountered an issue where the Bubble Menu extension, which previously worked fine alongside the Collaboration extension, is no longer functioning after updating all dependencies. The Bubble Menu works correctly when the Collaboration extension is not included, but fails to work when Collaboration is enabled. No errors are indicated.

We discovered that the Bubble Menu plugin gets removed during the execution of the updatePluginViews function in prosemirror-view/dist/index.js. Specifically, in the y-prosemirror/src/plugins/sync phase, the length of this.state.plugins decreases from 76 (including Bubble Menu) to 75, effectively removing the Bubble Menu plugin.

Below is the basic code from the Tiptap example, which replicates the issue:

<template>
  <div class="container">
    <div class="control-group">
      <label>
        <input type="checkbox" :checked="isEditable" @change="() => (isEditable = !isEditable)" />
        Editable
      </label>
    </div>
    <bubble-menu :editor="editor" :tippy-options="{ duration: 100 }" v-if="editor">
      <div class="bubble-menu">
        <button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }">
          Bold
        </button>
        <button
          @click="editor.chain().focus().toggleItalic().run()"
          :class="{ 'is-active': editor.isActive('italic') }"
        >
          Italic
        </button>
        <button
          @click="editor.chain().focus().toggleStrike().run()"
          :class="{ 'is-active': editor.isActive('strike') }"
        >
          Strike
        </button>
      </div>
    </bubble-menu>
    <editor-content :editor="editor" />
  </div>
</template>
<script>
import StarterKit from '@tiptap/starter-kit';
import { BubbleMenu, Editor, EditorContent } from '@tiptap/vue-3';
import Collaboration from '@tiptap/extension-collaboration';
import * as Y from 'yjs';
export default {
  components: {
    EditorContent,
    BubbleMenu
  },
  data() {
    return {
      editor: null,
      isEditable: true
    };
  },
  watch: {
    isEditable(value) {
      this.editor.setEditable(value);
    }
  },
  mounted() {
    this.editor = new Editor({
      extensions: [
        StarterKit,
        Collaboration.configure({
          document: new Y.Doc()
        })
      ],
      content: `
        <p>
          Hey, try to select some text here. There will popup a menu for selecting some inline styles. Remember: you have full control about content and styling of this menu.
        </p>
      `
    });
  },
  beforeUnmount() {
    this.editor.destroy();
  }
};
</script>

Browser Used

Chrome

Code Example URL

No response

Expected Behavior

Bubble menu working with collaboration extension

Additional Context (Optional)

No response

Dependency Updates

• [X] Yes, I've updated all my dependencies.

[exinnocommon]

I'm struggling with the same issue.

[neaumusic]

Having a similar issue where the BubbleMenu is breaking hot reload with create-react-app 5 (the latest). We do have collab, but I've mostly disabled it for my own local development, so I'm not sure that's the root cause. bubble-menu-hot-reload-stack-trace.txt

[jh-lee985]

We solved the problem by wrapping the bubble menu in a div tag with a specific class. This class is then assigned as an element property in the BubbleMenu extension.

Something like this

Component = 
<div class="bubble-menu">
 <bubble-menu
      :editor="editor"
      :tippy-options="{ duration: 100 }"
      v-if="editor"
    >
        <button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }">
          Bold
        </button>
    </bubble-menu>
 </div>

extension = 
 BubbleMenu.configure({
      element: document.querySelector('.bubble-menu'),
    }),

[nperez0111]

Could this be because it is vue and related to this https://github.com/ueberdosis/tiptap/pull/5252 🤔