I'm trying insert a new sentence to a Quill's delta when an edit is made to the Quill, all the while retaining the position of the user's cursor. When an edit is made I retrieve the cursor index from quill.getSelection().index, and then after applying the new delta using quill.setContents() I attempted to set the cursor index back to it's previous position using quill.setSelection(). This causes Quill to throw a "The given range isn't in document" error. Even trying to use quill.setSelection() before touching the delta inside the editor change event does not work (nothing happens). Why is setSelection not working as expected?

Here's a JSFiddle showcasing my issue: /

Try editing the Quill editor text to see the issue. You can set withInsert to false to see how setSelection doesn't work even without an insert.

I'm trying insert a new sentence to a Quill's delta when an edit is made to the Quill, all the while retaining the position of the user's cursor. When an edit is made I retrieve the cursor index from quill.getSelection().index, and then after applying the new delta using quill.setContents() I attempted to set the cursor index back to it's previous position using quill.setSelection(). This causes Quill to throw a "The given range isn't in document" error. Even trying to use quill.setSelection() before touching the delta inside the editor change event does not work (nothing happens). Why is setSelection not working as expected?

Here's a JSFiddle showcasing my issue: https://jsfiddle/nadavrt/gaLareyw/15/

Try editing the Quill editor text to see the issue. You can set withInsert to false to see how setSelection doesn't work even without an insert.

• javascript
• quill

Share Improve this question Follow asked Feb 8, 2018 at 5:29 NadavNadav 1,14511 gold badge1111 silver badges2323 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Actually, in the first case(inserting a sentence at the end of the editor) you don't need to change selection programmatically, you can just use Quill's insertText method:

quill.insertText(quill.getLength(), "A new sentence has appeared.")

JSFiddle: https://jsfiddle/jaimies/r4ksnma8/29/

The second case(changing cursor position when the user types) is, however, trickier. I've discovered that changing selection just after the user has typed a character is not possible with Quill. The workaround is to wrap setSelection call into a setTimeout with a timeout of 0:

setTimeout(() => quill.setSelection(quill.getSelection().index + 10, 0), 0)

The reason this works is that the code inside of setTimeout is not executed immediately, even if the timeout is actually 0. By the way, you may also omit the last parameter of setTimeout as it is set to 0 by default

This solution is not perfect and the cursor may sometimes flicker, but that's the only way of solving this problem I've found so far.

JSFiddle: https://jsfiddle/jaimies/9h3uqktL/3/

I'm trying insert a new sentence to a Quill's delta when an edit is made to the Quill, all the while retaining the position of the user's cursor.

I remend using quill.updateContents() and constructing a new Delta as opposed to using quill.getContents() and quill.setContents().

quill.updateContents(new Delta()
  .retain(quill.getSelection().index)
  .insert('A new sentence has appeared.')
);