React-Quill cursor position set using function

[shreedharan]

I have a issue in react-quill setEditorSelection I am able to get the editor cursor position but I am not able to set the cursor to specific position can you help me
Here is my code
import React, {Component} from 'react';
import ReactQuill from 'react-quill'
import "react-quill/dist/quill.snow.css";
import './App.css';

class App extends Component{
constructor(props) {
super(props);
this.state = { editorHtml: "testing" };
this.handleChange = this.handleChange.bind(this);
this.handleChangeSelection = this.handleChangeSelection.bind(this);

this.reactQuillRef = null

}

handleChange(content, delta, source, editor) {
console.log(content);
console.log(delta);
console.log(source);
console.log(editor.getSelection());
//console.log("IBM"+editor.getHTML()); // HTML/rich text
//alert(event);
//this.setState({ editorHtml: editor.getHt });
}

handleChangeSelection(e) {
console.log(e);
}

moveCursor = () => {
this.reactQuillRef.focus();

console.log(this.reactQuillRef.getEditorSelection().index);
//console.log(this.reactQuillRef);

var range = this.reactQuillRef.getEditorSelection().index;

}

render(){
return (

    <div className="text-editor">        
    <ReactQuill         
      ref={(el) => { this.reactQuillRef = el }}
      autoFocus="true"         
      onChange={this.handleChange}
      onChangeSelection={this.handleChangeSelection}
      value={this.state.editorHtml}             
      theme={"snow"} // pass false to use minimal theme
    />
    </div>
    <div className="row"><button onClick={() => this.moveCursor()}>Move Curser</button></div>
  </div>
);

}
}

export default App;

[Sanan4li]

Sad to see that it's been 4 years and no reply to this issue.

[ht-la]

I also encountered the same problem, when ReactQuill render, I want the cursor position to automatically focus on the last position of the value. I solved the problem by the following way:

  useEffect(() => {
    if (!quillRef.current) return;

    setTimeout(() => {
      quillRef.current?.editor?.setSelection(
        quillRef.current.editor?.getLength() || 0,
        0,
      );
    }, 0);
  }, [quillRef]);

I tested, if there is no setTimeout, it will only focus on the first position.
Hope this way can help you.