Accepting spellcheck suggestion deletes containing span

[szhu]

This bug is rather specific but definitely reproducible and does happen in practice.

Steps for Reproduction

GIF of this happening:

0. Use Chrome.
1. Create a new Google doc: https://docs.new
2. Type in Sentence wthi a typo. Copy the sentence.
3. Visit https://quilljs.com
4. Paste.
5. Wait for wthi to get a red underline. Then click it and accept the suggestion.

Expected behavior:
The suggestion should be selected.

Actual behavior:
The entire sentence is deleted. In the console:

addRange(): The given range isn't in document.
value @ selection.js:294
(anonymous) @ selection.js:48
o.emit @ index.js:151
value @ emitter.js:29
value @ scroll.js:162
(anonymous) @ scroll.ts:29

Platforms:
macOS Mojave, Chrome Version 73.0.3683.46 (Official Build) beta (64-bit)

Version:
1.3.6

[szhu]

I think I've narrowed down the issue. This is the more general case that always fails:

0. Use Chrome.
1. In Quill, add some text that meets these properties:
   • Has a span
   • Has a typo somewhere inside the span.
2. Accepting the spellcheck will delete the entire span.

[Amit-Gore]

I am facing the same problem while working with vue2-editor (quill based)

quill.formatText(offset, length, { 'color': 'red' })
Do you have any updates @szhu , did you manage to solve it ?

[szhu]

We actually did, but it's kind of hacky -- basically we "unwrapped" the spans (replaced the spans with their children). Two key observations:

1. This will remove the styling that's set directly on the spans. For example, if you copy yellow text from Google Docs and use this fix, then the text will not be yellow anymore.
2. A way to make this process involve as little manual DOM manipulation as possible is to simply clear the style attribute from the spans. Quill will automatically "unwrap" useless spans!

Here's our rough pseudocode:

1. Listen for the the text-change event where the source is user (to prevent a feedback loop).

2. Find all the spans that you're okay removing all styles from. Specifically, to solve just the Google Docs example above and to not do anything too aggressive, we used:

   quillContainer.querySelectorAll('span[style="background-color: transparent; color: rgb(0, 0, 0);"]')

   But you can select all spans if you want.

3. For each of these results, clear their style attribute, i.e., element.removeAttribute("style").

[ruchira088]

Any updates on this issue?

[maniyadv]

I got this solved by formatting the pasted content to plaintext before spell check using -

quill.clipboard.addMatcher (Node.ELEMENT_NODE, function (node, delta) {
    var plaintext = node.innerText
    var Delta = Quill.import('delta')
    return new Delta().insert(plaintext)
})

Or use - https://www.npmjs.com/package/quill-paste-smart

[Nicholas-Westley]

Is there any update on this? Any idea where I would have to start looking in the quill codebase if I wanted to fix it?

[denishegarty]

Is there any update on this?

[sho13]

Hello, are there any updates on this?

[RyanLackie]

Hi, are there any updates on this bug?

[njtmead]

+1

[kenichi-ando]

This seems to be a duplicate of #2096.

[luin]

👋 Sorry for the late update. This is fixed in #3807. Feel free to let me know if there is anything missing.

[kenichi-ando]

@luin Thank you for the update! Do you have any plans to release the new version including this fix?