question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

What is the best way to modify text on a text-change event in Quill?

See original GitHub issue

We’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 letter o, I’d expect the entire word to be deleted, followed by an o insertion. Instead, Parchment appears to “optimise” the op, and instead do a pair of deletions either side of the middle o

  • 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:open
  • Created 4 years ago
  • Reactions:10
  • Comments:6 (1 by maintainers)

github_iconTop GitHub Comments

2reactions
phillipbcommented, Aug 8, 2020

This is also problematic when dealing with deltas. If you make a call to updateContents from text-change event, that delta appears before the actual user’s change. So delta.compse for those changes results in an incorrect delta.

1reaction
alecgibsoncommented, Apr 10, 2019

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. Apr-10-2019 10-28-52

Read more comments on GitHub >

github_iconTop Results From Across the Web

API - Quill Rich Text Editor
Quill is a free, open source WYSIWYG editor built for the modern web. Completely customize it for any need with its modular architecture...
Read more >
How to trigger text-change with QuillJS - Stack Overflow
1 Answer 1. Sorted by: Reset to default. Highest score (default) ...
Read more >
Stale data with Quill editor - Hotwire Discussion
I am integrating the Quill editor with Rails and would like to control it ... has html stored in it, and it becomes...
Read more >
Events | VueQuill - GitHub Pages
@textChange # · { delta: Delta, oldContents: Delta, source: Sources }. Triggered when the text changes ; @selectionChange # · { range: RangeStatic,...
Read more >
Quill Editor for Vue 3
How to use it: · @textChange(delta: Delta, oldContents: Delta, source: Sources): Triggered when the text changes. · @selectionChange(range: RangeStatic, oldRange: ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found