I use react-quill in my react app and when I press the image button and without inserting a valid url and press insert, an extra image tag is added with src="http://"
. I don't want this behaviour I want the image tag to be added only if it's a valid url. Is there a way to do so?
Code:
<ReactQuill value={this.state.body} onChange={this.onBodyChange}
theme="snow" style={{minHeight: 300, minWidth: 600}}/>
onBodyChange = body => this.setState({body});
Edit: I tried using handler adding but seems that I cannot override the default handlers.
let handlers = {
image: function(foo, bar){
console.log("IMAGE");
},
link: function(value) {
console.log("LINK");
}
};
<ReactQuill value={this.state.body} onChange={this.onBodyChange}
theme="snow" style={{minHeight: 300, minWidth: 600}}>
<ReactQuill.Toolbar key="toolbar"
ref="toolbar"
handlers={handlers}/>
<div key="editor"
ref="editor"
className="quill-contents"/>
</ReactQuill>
And when inspection on the react component, the handler is still image() and link() which I am assuming are the default implementations. And of course no logs and the normal behavior occurs.