Tiptap: Access the the Vue component instance inside an Editor event

[Jakob-Maudience]

I'm trying to find a way to mutate a data property in my vue component so I can display what a highlighted mark's attribute contains ( in the editor menu bar).

I have a custom font mark extension with a color attribute, and in the menu bar I have a color selector button with a color indicator. My desired behavior would be on the event when the user is selecting text or otherwise moving their cursor in the editor, if a mark is selected and has the color attribute, the indicator would change color accordingly

So far, I've been able to determine that the onTransaction gets fired when I need, but I'm trying to figure out how I can access the Editor's parent vue component from within the onTransaction event which is defined in the Editor instance is created. Is is possible to save a reference to the current component instance inside the Editor instance, or maybe is there a way to propagate this event up to the component?

[akirarika]

You can

export default {
  data() {
    return { editor: null, name: 'world' }
  },
  mounted() {
    this.$nextTick(() => {
        const onTransaction = () => {
            console.log('hello' + this.name)
        }
        this.editor = new Editor({
            onTransaction
        })
    })
  }
}

or

export default {
  data() {
    return { editor: null, name: 'world' }
  },
  mounted() {
    this.$nextTick(() => {
        const that = this
        this.editor = new Editor({
            onTransaction() => {
                console.log('hello' + that.name)
            }
        })
    })
  }
}