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"
}
})
},
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;