What is the best way to modify text on a text-change event in Quill?
See original GitHub issueWe’re trying to build track changes into Quill, which includes checking for user input, and then modifying the document. For example, if a user deletes some text, we reverse the deletion, and then apply a track-deletion attribute. Here is a simplified example of what we do:
quill.on('text-change', (delta, oldContents, source) => {
if (source !== 'user') return;
const trackChangesDelta = delta.invert(oldContents);
trackChangesDelta.ops.forEach((op) => {
if (op.insert) op.attributes['track-deletion'] = true;
// Also handle tracked insertions, etc...
});
quill.updateContents(trackChangesDelta);
});
This approach mostly works, but runs into some slightly odd cases:
-
If I have the text
foo, and I highlight the text, and then type the lettero, I’d expect the entire word to be deleted, followed by anoinsertion. Instead, Parchment appears to “optimise” the op, and instead do a pair of deletions either side of the middleo -
If I highlight and replace text at the start of a paragraph, then the inserted letter goes to the end of the deletion, but my cursor stays in the wrong place
I think both of these issues are symptoms of the fact that we’re performing a text-change within a text-change, and I was wondering if there was a better (more synchronous?) way of hooking into the Quill document life-cycle.
For example, the second issue we have is resolved by using a setTimeout to let the Quill document finish processing the text-change before we apply our track changes, but that then results in some other jittery behaviour.
Ideally, I’d like to catch the text-change before it’s even been applied to the document, but as far as I can tell, neither Quill nor Parchment offers a suitable hook?
Issue Analytics
- State:
- Created 4 years ago
- Reactions:10
- Comments:6 (1 by maintainers)
Top Related StackOverflow Question
This is also problematic when dealing with deltas. If you make a call to
updateContentsfromtext-changeevent, that delta appears before the actual user’s change. Sodelta.compsefor those changes results in an incorrect delta.One other place this is juddery is if you hold down the backspace key in Safari. It would be really nice if we could update the contents before the editor is redrawn.