react-quill
react-quill copied to clipboard
onChange Input Focus for Multiple Inputs with Image Handler
Problem -- related to #169 (Image Handler and input focus)
Thanks again so much for your work on react-quill. This is some pretty remarkable stuff so keep up the good work.
I was following a different suggestion provided in issues #169 and recently ran into an issue where I was trying to add an image handler to embed images instead of uploading as a URL. I have another input box and for some reason, now whenever I add text to that input, it automatically changes the cursor to focus on ReactQuill. Seems extremely strange. If you could help me out I would really appreciate it!
ie. I'll start typing in the normal input and out of no where, my cursor will change focus so that I'm now typing in ReactQuill
Codesandbox Demonstration:
https://codesandbox.io/embed/confident-gagarin-qts90?fontsize=14
Code (for Reference)
import React, { useState, useRef } from "react";
import ReactDOM from "react-dom";
import ReactQuill from "react-quill"; // ES6
import hljs from "highlight.js";
import "highlight.js/styles/darcula.css";
import "react-quill/dist/quill.bubble.css";
import "./styles.css";
hljs.configure({
languages: ["javascript", "java", "python", "c++"]
});
const formats = [ "header", "bold", "italic", "underline", "strike", "blockquote", "list", "bullet" "indent", "code-block", "image"];
function App() {
let quillRef = useRef();
const [title, setTitle] = useState("");
const imageHandler = (image, callback) => {
var value = prompt("What is the image URL");
if (value) {
console.log(quillRef);
quillRef.getEditor().insertEmbed(quillRef.getEditor().getSelection().index,"image", value,"user");
}
};
const modules = {
syntax: {
highlight: text => hljs.highlightAuto(text).value
},
toolbar: {
container: [
[{ header: [1, 2, false] }],
["bold", "italic", "underline", "strike", "blockquote"],
[ { list: "ordered" }, { list: "bullet" }, { indent: "-1" }, { indent: "+1" }],
["clean"], ["code-block"],
["image"]
],
handlers: {
image: imageHandler
}
}
};
return (
<div className="App">
<input id="first-input" value={title} onChange={event => { setTitle(event.target.value); }} />
<ReactQuill
id="react-quill"
theme="bubble"
ref={el => { quillRef = el; }}
placeholder={"Start typing..."}
modules={modules}
formats={formats}
/>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Thanks, @jfradley how would I npm install your forked version?
Ok, I just went into my node_modules
and made the following edits in src/component.js
according to the PR and it seemed to work fine without me having to rebuild:
src/component.js - line 206
var QuillComponent = createClass({
// Restore editor from Quill's native formats in regeneration scenario
if (this.quillDelta) {
this.editor.setContents(this.quillDelta);
this.editor.setSelection(this.quillSelection);
this.editor.focus();
this.quillDelta = this.quillSelection = null;
if (this.quillSelection) {
this.editor.setSelection(this.quillSelection);
}
if (this.quillHasFocus) {
this.editor.focus();
}
this.quillDelta = this.quillSelection = this.quillHasFocus = null;
return;
}
if (this.state.value) {
src/component.js - line 321
var QuillComponent = createClass({
// Cache selection and contents in Quill's native format to be restored later
this.quillDelta = this.editor.getContents();
this.quillSelection = this.editor.getSelection();
this.quillHasFocus = this.editor.hasFocus();
this.setState({
generation: this.state.generation + 1,
});
If the contributors could merge this PR I would really appreciate it. It's a pretty important and necessary change. I did notice that there was a slight bit of lag when I typed in my input box, but it's much better than before. Thanks @jfradley
@zenoamaro (maintainer) @alexkrolick (maintainer) @clemmy @asiniy @webcarrot @druti @e-jigsaw @zhang-z @Sajam
I just experienced the same issue suddenly. I have an input text above a ReactQuill component and when I type the imput the cursor gets focused on the editor instead. I dont have an image handler though:
<ReactQuill
className={classnames('editor-content-area', {
invalid: bodyState && !bodyState.valid,
pristine: bodyState && bodyState.pristine,
})}
defaultValue={''}
value={body}
theme={null}
modules={{
toolbar: {
container: '#toolbar',
},
}}
children={<div data-quill-editor={true}/>}
formats={[
'bold', 'italic', /*'underline',*/ 'list', 'bullet', 'indent'
]}
onFocus={handleBodyFocus}
onChange={handleBodyChange}
{...restProps}
/>
@theodesp yeah it seems like a pretty big issue. I'm not sure why it keeps on changing focus but it definitely needs to be fixed.
I made the change above in the react-quill component.js
but there was an extremely long amount of lag. The lag increases the more inputs you have. For example, I have 10 inputs on my page and every time I type a character, it causes 10 more warnings. It seems to be looping through each input to check if the character is supposed to belong to that input? Here's the warning I'm getting:
[Violation] Added synchronous DOM mutation listener to a <some> event. Consider using MutationObserver to make the page more responsive.
I had the same issue after adding imageHandler. Drove me nuts for a while, so I tried various things and here's what I'm using successfully:
The modules json is assigned as a state variable (in constructor) and then in ReactQuill I use modules={this.state.modules}
, and this solved the issue. Note that I'm using class components.
Please refer to this link:
https://stackoverflow.com/questions/59825450/react-quill-custom-image-handler-module-causing-typing-issues-with-the-editor
It's simple, Just make a new React Component file and make the quill things in it. and also make that component as a React.PureComponent
or use memo(*Your Component name goes here*)
hook
I am facing same problem of cursor change, Is it solved now ? Or any solution