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]);
}