Vue 3 and TipTap Editor pass in global scope

Question

I'm working in VueJS 3 and just added the TipTap Editor. I want to only show the editor menu when the user clicks on the content, firing the focus event. Then on blur the menu needs to be hidden. So I added a ref="myMenu" to the menu component and init the editor with opFocus nad onBlur event handlers.

Problem, "this" is referencing the scope of the Editor and not the "this" that knows about the $refs. Question, how do I pass in the global properties?

my template

        <div v-if="editor">
            <menu-bar class="editor__header" :editor="editor" ref="editMenu" />
            <editor-content :editor="editor" />
        </div>

my vue code

    mounted(){
    // this.store.methods.TextAreaAdjust(this.$refs.itemParagraph);
       
    this.editor = new Editor( {
        extensions: [ 
          StarterKit.configure({
           history:true,
          }),
          Highlight,
       ],
        content: this.modelValue.itemData.paragraph,
        onUpdate: () => {
          this.modelValue.itemData.paragraph=this.editor.getHTML()
        },

        onFocus(){
            console.log('focus fired')
            console.log(this) // editor scope
            this.$refs.editMenu.style.display="flex" // $refs undefined error
        },
        onBlur(){
            console.log('blur fired')
            this.$refs.editMenu.style.display="none"
        }

    })
},

Answer 1

Try to define the on functions with arrow functions:

onUpdate: () => {}
ononFocus: () => {}
onBlur: () => {}

This should keep the this scope.

Else you probably need to store this in a separate const, before you create the Editor instance and then use thisComponent in your handlers:

const thisComponent = this;