Menu bar buttons don't get their active state properly

Describe the bug We created a component which embeds the tiptap editor, something like:

<template>
    <div>
        <form method="post" class="form-grid">
                <div class="row">
                    <div class="col-12 col-md-12 col-lg-12">
                        <div class="form-group">
                            <label>Editor</label>
                            <div class="sg-editor">
                                <editor-menu-bar :editor="descriptionEditor" v-slot="{ commands, isActive }">
                                    <div class="sg-editor-menubar">
                                        <a
                                                href="javascript:;"
                                                :class="{ 'sg-btn-bold ': true, 'is-active': isActive.bold() }"
                                                @click.prevent="commands.bold">
                                            <i class="fas fa-bold"></i>
                                        </a>

                                        <a
                                                href="javascript:;"
                                                :class="{ 'sg-btn-italic': true, 'is-active': isActive.italic() }"
                                                @click="commands.italic">
                                            <i class="fas fa-italic"></i>
                                        </a>
                                    </div>
                                </editor-menu-bar>
                                <editor-content
                                        :class="{ 'sg-editor-area': true}"
                                        :editor="descriptionEditor" />
                            </div>
                        </div>
                        <div class="spacer"></div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</template>

<script lang="ts">
    import Vue from "vue";
    import { Editor, EditorContent, EditorMenuBar } from "tiptap"
    import { Bold, Italic } from "tiptap-extensions"
    export default Vue.extend({
        props: {},
        data() {
            return <{
                descriptionEditor?: Editor;
            }>{
            }
        },
        components: {
            EditorContent,
            EditorMenuBar,
        },
        created(): void {
            this.descriptionEditor = new Editor({
                extensions: [
                    new Bold(),
                    new Italic(),
                ],
                onFocus: () => {},
                onUpdate: (state) => {
                    this.fields.description = state.getHTML();
                    if (this.fields.description === "<p></p>") {
                        this.fields.description = "";
                    }
                },
                content: ""
            });
        },
        beforeDestroy(): void {
            this.descriptionEditor.destroy();
        },
        methods: {},
        computed: {},
    });
</script>

<style lang="scss" scoped>

</style>

And we’re observing a weird behavior.
When we select text from the editor and then press the bold button for instance, the text is transformed in bold, as expected, but the bold button isn’t getting it’s active class.
Then, if we click anywhere outside the editor, then the button will get it’s active class. If we then click on an already bolded text, we expect the button to get the active class, instead it does not, but it does when we click outside the editor. Se below video which shows this behavior.

Steps to Reproduce / Codesandbox Example We simply followed the examples from the examples page.

Expected behavior We expect for the buttons to get the correct active class name when they are pressed or when a text is selected that matches the button functionality.

Screenshots Here’s a short video: https://www.dropbox.com/s/okzxiqkzuzl80da/vuejs-editor-bug.mov?dl=0

Environment

• OS: MacOS
• Browser chrome
• Version 81.0.4044.138 (Official Build) (64-bit)
• Mobile / Desktop: Desktop

[vincentdesmares]

@philippkuehn Sure! We will try that this week.

[madebycaliper]

I’m having the same issue. There’s a workaround presented by someone in another duplicate thread that I can confirm works. Just replace editor-menu-bar with editor-menu-bubble and it should work.