One of the components I'm working with includes the following:
<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 relies on the use of a file input to manage its image upload functionality. The issue arises when the getImageUrl function is called asynchronously and does not have time to set state.image before the line:
editor.chain().focus().setImage({ src: state.image }).run()
resulting in an undefined img src.
To address this, my solution is to encapsulate:
editor.chain().focus().setImage({ src: state.image }).run()
within its own async function. However, the challenge lies in calling the chain command from outside of the vue 3's script tag. The official documentation doesn't offer guidance on executing it beyond 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]);
}