How to execute TipTap commands from script tag in Vue 3?

Question

I'm having following component:

<button @click="$refs.image.click(); editor.chain().focus().setImage({ src: state.image }).run()"></button>

<input type="file" ref="image" style="display: none" @change="getImageUrl">

The button uses the file input to access its upload image ui. Problem is that getImageUrl is an async function and:

editor.chain().focus().setImage({ src: state.image }).run()

gets executed before state.image is set resulting in an undefined img src .

My approach is to put:

editor.chain().focus().setImage({ src: state.image }).run()

inside its own async function but how do I call the chain command from vue 3's script tag ? The docs do not seem to explain how to call it from outside of vue directives .

getImageUrl :

const getImageUrl = (event) => {
    const files = event.target.files;
    if (!files.length)
        return;
    const reader = new FileReader();
    reader.onload = (event) => {
        state.image = event.target.result;
    };
    reader.readAsDataURL(files[0]);
}

Answer 1

This is how it works. In the DOM element do:

<button @click="customCommand(editor)">push me</button>

and in script setup :

const customCommand = (editor) => {
    editor.commands.toggleBold()
}