fix spellcheck blinking as you type

Do you want to request a feature or report a bug?

Bug.

What’s the current behavior?

One of the current issues with spellcheck is that when a node in the DOM is re-rendered, the browser seemingly takes a bit of time to update the spellcheck underlines, which cause a slight blink. So if you type a series of characters, with each character typed you’ll see the red spellcheck underlines blinking.

What’s the expected behavior?

To solve this for the 100% case is impossible, since it would mean never re-rendering. For example, selecting some text and add any mark to it will make the spellcheck underlines blink, but this transformation also isn’t something the browser can do by itself (often).

However, solving for the 99% case is attainable, because it would just mean that inserting individual characters (which is the majority of Slate changes in any real world use case) should update the DOM directly, instead of re-rendering via React.

I think this could be solved by adding an operation.isNative property, perhaps with a convenient change.asNative(c => { ... }) helper. This would allow us to create the same insert_text operations that we currently do, but flagged as “native” (eg. that they are already represented in the DOM) so that we can know that an individual <Leaf> does not need to re-render.

We’d need to also enforce that the <Editor> gets passed not only a value= property but also the previous operations= from a Change object if one exists. This way the current state has access to the previous operations to make the decision about whether to re-render.

[steobrien]

Hey @ianstormtaylor, this is something we’d love to see fixed in Slate, and the pragmatic solution you hint at sounds exactly right. Any tips on where to get started with the implementation?

[bartzy]

Hey @ianstormtaylor is this something that is planned to be fixed (via #3293 or otherwise)?