i am using react-quill as my editor and recently i configured my image handler function to pass props to the handler and after making the change my editor behaves weirdly and when ever i type something on the other input fields my editor comes into focus and automatically words are typed in it below is the code for my editor please any help or suggestion will be greatly appreciated.
Component
} from 'react';
// import {
// Editor
// } from 'react-draft-wysiwyg';
import draftToHtml from 'draftjs-to-html';
import htmlToDraft from 'html-to-draftjs';
import axios from 'axios'
import {
API_URL
} from './../../api_url'
// import * as Icons from 'images/icons';
import * as loadImage from 'blueimp-load-image';
import {
key
} from '../../assets/encryptionkey'
import globalStyles from '../../stylesheets/ui.css'
import blogStyles from './blogs.css'
import bootstrapStyles from '../../stylesheets/bootstrap/css/bootstrap.min.css'
import fontAwesomeStyles from '../../stylesheets/font-awesome/css/font-awesome.min.css'
import actionIconsStyles from '../../stylesheets/action_icons.css'
import cx from 'classnames'
import './editor.css';
import s from './editor.css';
//import CKEditor from '@ckeditor/ckeditor5-react';
//import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
//import ReactQuill, { Quill } from "react-quill";
//var Image = Quill.import('formats/image');
//Image.className = 'custom-class-to-image';
//Quill.register(Image, true);
export default class BlogEditor extends Component {
constructor( loader ) {
super();
this.state = {
editorHtml: '', theme: 'snow',
text:''
}
this.handleChange = this.handleChange.bind(this)
// var that=this;
if (typeof window !== 'undefined') {
this.ReactQuill = require('react-quill')
const ReactQuill=this.ReactQuill;
var Image = ReactQuill.Quill.import('formats/image');
Image.className = 'blog-content-image';
ReactQuill.Quill.register(Image, true);
// ReactQuill.Quill.setContents(editor.clipboard.convert(html));
}
}
componentWillReceiveProps(){
//debugger
let clearContent=this.props.clearContent
if(clearContent){
// this.editorRef.setEditorContents(this.editorRef.getEditor(), '<h1>test</h1>');
}
}
handleChange(value) {
//debugger
this.setState({ text: value })
// this.props.changeInEditor(value)
}
imageHandler({ val, componentProps }) {
// debugger
let self=this
let image;
let image_extension;
const Cryptr = require('cryptr');
const cryptr = new Cryptr(key);
const users = localStorage.getItem('users') ? JSON.parse(cryptr.decrypt(localStorage.getItem('users'))) : {}
// console.log(users[users.lastLoginId])
let loggedinUser = users[users.lastLoginId];
const input = document.createElement('input');
input.setAttribute('type', 'file');
input.setAttribute('accept', 'image/*');
input.setAttribute("class", "Editor-mage");
input.click();
input.onchange = async () => {
//debugger
const file = input.files[0];
var ValidImageTypes = ["image/gif", "image/jpeg", "image/png", "image/jpg", "image/GIF", "image/JPEG", "image/PNG", "image/JPG"];
let file_type = file.type
let filename = file.name
let extension = filename.split('.').pop();
if(ValidImageTypes.indexOf(file_type) >= 0){
if(file.size<=500000&&file.size>=50000){
var fileToLoad = file
loadImage(fileToLoad, (canvas) => {
if(canvas){
// this.setState({
image=canvas.toDataURL()
image_extension=extension
//});
const res = new Promise(function(resolve, reject) {
axios({
method:'post',
url:API_URL+'api/v1/postblogimage',
headers:{
'x-access-handler':loggedinUser.token
},
data:{
image: image,
image_extension:image_extension,
userid:loggedinUser.userid
}
})
//axios.post(API_URL + 'api/v1/postblogimage', formData, config)
.then((response) => {
if (response.data.error == 'false' || response.data.error == false) {
if (response.data.status == 200 && response.data.message == "Image uploaded successfully") {
//debugger
const range = self.quill.getSelection(true);
// Insert temporary loading placeholder image
// this.quill.insertEmbed(range.index, 'image', `${window.location.origin}/images/loaders/placeholder.gif`);
// Move cursor to right side of image (easier to continue typing)
self.quill.setSelection(range.index + 1);
// Remove placeholder image
self.quill.deleteText(range.index, 1);
// Insert uploaded image
let url=response.data.data[0].imageURL;
self.quill.insertEmbed(range.index, 'image', url);
self.quill.pasteHTML(range.index, <img src={url} class="blog-image-content" alt="Responsive image"/>);
}
}else if(response.data.error == 'true' || response.data.status == '500')
componentProps.error('Sorry, Inappropriate image')
// }
}).catch((error) => {
// reject(Error("It broke"));
});
});
}
}, {orientation: true});
}
else{
componentProps.error(" Sorry, File size should be of size between 50 kb to 500kb")
}
}
else{
// this.setState({
// image_warning:'Invalid image type',
// image:'',
// image_extension:''
//})
// this.fileInput.value=''
}
};
}
render() {
const ReactQuill = this.ReactQuill
if (typeof window !== 'undefined' && ReactQuill) {
return (
<div className="editor-container">
<ReactQuill
ref={(el) => this.quillRef = el
}
onChange={this.handleChange}
placeholder={"share your thoughts"}
modules={{
toolbar: {
container: [
[{ header: '1' }, { header: [2,3, 4, 5, 6] }, { font: [] }],
[{ size: [ 'small', false, 'large', 'huge' ] }],
['bold', 'italic', 'underline', 'strike', 'blockquote'],
[{ list: 'ordered' }, { list: 'bullet' }],
['link', 'image', 'video'],
['clean'],
['code-block'],
[{ 'color': [] }, { 'background': [] }], // dropdown with defaults from theme
[{ 'align': [] }],
],
handlers: {
image: (val) => this.imageHandler({ val, componentProps: this.props })
// image: () => this.imageHandler
}
}
}}
/>
</div>
)
}
else {
return <textarea />;
}
}
}```
