Spellcheck blinking

[ilya2204]

trafficstars

Hi! A few months ago, an update came out in slate-react that solved the problem of a blinking spellcheck when typing. Are there any plans to move this fix into your project, or perhaps some advice on how I could fix this?

[pubuzhixing8]

@ilya2204 Thanks for your feedback, I have understood the cause of this problem, I will give ideas as soon as possible.

[pubuzhixing8]

Hi @ilya2204

I solved this problem by referring to the idea of slate-react, but this solution is a bit sloppy, and the current solution has some problems. The trigger timing of the ngModelChange event has changed. The DOM has been updated when ngModelChange was executed in the past, but now it depends on The browser's default behavior (the default behavior of the beforeinput event is no longer blocked), so the inserted text has not been updated when ngModelChange is executed, this is a difference point, if this is acceptable, you can use this scheme for now. I'm not ready to merge it into the master branch yet, may have to think about it again.

https://github.com/worktile/slate-angular/tree/spellcheck

[ilya2204]

Hi @pubuzhixing8

Thanks for solving the problem. I tested and in English spellchecking really doesn't blink anymore. The only thing I found a bug with the fact that some events (moving with the arrows / cutting text through the ctrl+x and maybe others) do not cause a redraw, but this was fixed by adding the line IS_NATIVE_TYPING.set(editor, false) to the beginning of the onDOMKeydown method. Perhaps there are some other handlers to which this fix should be added, but I did not find any other problems.

UPD I also noticed a problem with inserting a new line on the shift+enter event via Editor.insertText(editor, '\n')

[pubuzhixing8]

Hi @ilya2204 I haven't reproduced the problem you mentioned (moving with the arrows / cutting text through the ctrl+x ), but the current way of doing it may indeed be a problem, and the state maintained by IS_NATIVE_TYPING may become dirty. I have submitted a new commit to correct the native typing state, please help to confirm if it can solve your problem. If it still doesn't match your question, a more detailed exception path can be provided.

https://github.com/worktile/slate-angular/pull/197/files

[ilya2204]

@pubuzhixing8 Arrow movement really worked. However, there is a bug with the insertion of '\n'. Unfortunately, I didn’t manage to create codesandbox, so in pull request I added an example of inserting '\n' by pressing Enter + Shift into richtext.component.ts, after which strange behavior occurs when typing, you can check (I tested in chrome and firefox)

https://user-images.githubusercontent.com/52297646/163623356-f5a6275b-406e-4011-9e52-9639827ed47f.mp4

https://github.com/worktile/slate-angular/pull/198

[pubuzhixing8]

@ilya2204 Amazing, I found the cause of the problem, a specific rendering template is used when the text ends with \n , so the browser's default rendering behavior cannot be used.

So I added an extra condition to the spellcheck.

[ilya2204]

@pubuzhixing8 Thanks a lot. Now everything seems to be working as it should.

[ilya2204]

And maybe add more complex character input checks. Instead of /[a-z ]/i.test(event.data) something like event.data.toUpperCase() != event.data.toLowerCase() which works in most languages. Or perhaps add the ability to pass a validation function to the editor's input.

[pubuzhixing8]

And maybe add more complex character input checks. Instead of /[a-z ]/i.test(event.data) something like event.data.toUpperCase() != event.data.toLowerCase() which works in most languages. Or perhaps add the ability to pass a validation function to the editor's input.

Good suggestion, I am also considering removing the character check, all English input will follow the default behavior of the browser.

[ilya2204]

Hi @pubuzhixing8 Unfortunately I found another bug when after changing the cursor position you enter a character and then delete it (for example, through backspace) strange things happen

https://user-images.githubusercontent.com/52297646/168486909-56a21972-3b24-4ba1-9d6c-989d9f42910d.mp4