Tengo el siguiente componente:

 <button @click="$refs.image.click(); editor.chain().focus().setImage({ src: state.image }).run()"></button> <input type="file" ref="image" style="display: none" @change="getImageUrl">

El button utiliza la file input para acceder a la interfaz de usuario de su imagen de carga. El problema es que getImageUrl es una función async y:

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

se ejecuta antes de que se establezca state.image , lo que da como resultado un img src indefinido.

Mi enfoque es poner:

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

dentro de su propia async function pero ¿cómo llamo al comando de cadena desde la script tag de vue 3's ? Los documentos no parecen explicar cómo llamarlo desde fuera de las 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]); }