Quill Component records setting of non-user initial value in quill history by default

[brycepj]

I recently ran into some strange behavior:

I've got a quill component that I'm passing some value (truthy) as a prop to. If I move focus to the editor and key in cmd-z (undo) before keying in any input, the editor is completely cleared of its content, and whatever was there before can't be recovered.

I did some digging, and found that Quill pops the most recent delta object off of the delta array when you key in cmd-z. It doesn't care how that delta ended up in the history. If it's the most recent item in the history, it's just gone.

The real problem then is that react-quill calls setContents on the editor to populate the editor with the value prop we hand it, because Quill records that as an undoable/redoable change, even though the user didn't input it.

Fortunately, this is exactly what the quill history module's userOnly configuration exists for. It ensures that changes are only recorded in the quill history if the user keyed it in themselves.

I fixed the problem in my Quill configuration, including history: { userOnly: true } in my modules configuration object.

So, while this isn't technically a bug, the behavior was totally unintended and pretty baffling at first. I'm curious if there's a reason that react-quill doesn't set userOnly to true by default, given that it starts off with an invisible non-user change every time it's rendered.

At the very least, this seems like a gotcha that belongs in the docs. I don't mind submitting a PR myself for that, but I was hoping to get some more insight first.

React-Quill version

• master

[alexkrolick]

Good point. We've been a bit wary of passing configs that could override or contradict default behavior, but it may be a good idea to make an exception for this (and clipboard: { matchVisual: false }?).

In any case documenting these caveats is a good start and a PR would be welcome if you would like to submit it.

[andrewkchoi]

I've tried to reference this solution in react-quill but it doesn't seem to work when using the react quill referenced editor

slab/quill#2008

Is there a way to do this in react-quill?
editor.setContents(...); editor.history.clear();

[shvl]

@andrew1993choi you can try smth like this:

componentDidMount(){
  this.quillRef.getEditor().history.clear();
}
render(){
...
              <ReactQuill 
                ref={(el) => { this.quillRef = el }}
...
}