[Bug]: BubbleMenu not showing correctly (AlpineJS)

Affected Packages

extension-bubble-menu

Version(s)

2.8.0

Bug Description

The menu sort of appears, but it's broken and I don't know why. I should note that I already use Tippy on my website, but even after removing it, the broken menu remains. Clicking on it doesn't do a thing either. There are not errors in the console.

I added the extension like this:

BubbleMenu.configure({
    element: document.getElementById('bubblemenu'),
}),

The frontend shows this:

My template looks like this:

<div x-data="editor({{ $content }})">
    <template id="bubblemenu">
        <div>
            <button type="button" data-value="bold" @click="toggleBold()" :class="{'active' : isActive('bold', updatedAt)}">
                <svg class="size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">...</svg>
            </button>
        </div>
    </template>

    <template class="relative" x-if="isLoaded()">
        <div id="editorMenu" class="menu flex items-center space-x-2 z-20 py-5 sticky top-0 bg-stone-50 dark:bg-stone-900">
            <button data-tippy-content="Headline 2" class="toolbar__choice" type="button" data-value="h2" @click="toggleHeading({ level: 2 })" :class="{'active' : isActive('heading', { level: 2 }, updatedAt)}">
                <svg class="size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">...</svg>
            </button>
            ...

Browser Used

Safari

Code Example URL

No response

Expected Behavior

I expect it to show the bold svg. The svg itself works fine, as I already use it in the main menu. But I also tried using simple text, same issue.

Additional Context (Optional)

No response

Dependency Updates

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

I got it working now like this:

<div x-data="editor({{ $content }})">
    <div id="bubblemenu" class="flex items-center space-x-3">
        <button type="button" @click="toggleBold()" :class="{'active' : isActive('bold')}">
            <svg class="size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">...</svg>
        </button>
        <button type="button" @click="toggleItalic()" :class="{'active' : isActive('italic')}">
            <svg class="size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">...</svg>
        </button>
    </div>

    <template class="relative" x-if="isLoaded()">
    ...

But using :class="{'active' : isActive('bold', updatedAt)}" does not work within the BubbleMenu. It would be great if there was an extended example of the BubbleMenu built with AlpineJS.

ueberdosis / tiptap