No change event/undo-history for browser's auto-correct

[mmichaelis]

Type of report

Feature Request

Provide detailed reproduction steps (if any)

1. Set disableNativeSpellChecker to false and ensure to have the undo add-on enabled.
2. Listen to change event.
3. Enter a text like This is a mispselled word.
4. Right click (Alt+Right-Click if contextmenu add-on is enabled) to auto-correct word.

Expected result

1. Auto-Correct is applied.
2. Undo-History is extended by this change.
3. Change event is fired.
4. I can undo the auto-correct change.

Actual result

Neither a change event is fired, nor is a snapshot stored to the undo manager.

Other details

• Browser: Chrome
• OS: Windows
• CKEditor version: 4.8.0
• Installed CKEditor plugins: wysiwygarea,toolbar,about,undo

• Fiddle: https://jsfiddle.net/Thragor/Lcoyk0qe/

  This fiddle also shows a first start for a workaround... at least when you need to listen to change events: It adds a listener to the editable DOM element to record InputEvents of type "insertReplacementText". Unfortunately I was not able to see how to trigger a snapshot within the undo-manager.

[mlewand]

This is interesting, but a little complex issue. It is difficult because as you see browser dictionaries do not have any specification, and there's no API that could be used to get notified as the change occurs.

Thus options for getting this notification are limited to:

• Sniffing DOM modifications
• Hooking to input events, and listen for insertReplacementText just like you did

Sniffing DOM

This is not a good option in CKE4 as a lot of stuff happens inside of our editable. This is not limited to the text/content modification but often times it's pure decoration stuff, like widget structure, Accessibilty Checker formatting or SCAYT/WSC formatting - possibly much, much more. That would results with tons of DOM insertions, and we don't know whether the insertion comes from dict correction or not.

Hooking to input event

This looks better, however there are several caveats. I'm not familiar with the spec at this particular event type, but based on quick check this event was created for spell checkers, but there's no guarantee that it's going stay that way, as the name is very generic. So, in the future, more IME-releated features might trigger that event. If it is always used for meaningful text rather than some formatting, then it's fine, as we want create undo step with each such change.

Also important thing to mention here is that the event is fired before the change in DOM takes place, so we can't just create a snapshot here, as change is not yet reflected in the DOM. Instead we'd probably have to do the DOM change on our own, save the snapshot and prevent default event action.

It requires more research to make a good call here.

Making a undo snapshot

Back to your final question: creating undo snapshots is pretty easy, although for historical reasons it's little bit unusual, because it's triggered by firing an event. You want simply to fire saveSnapshot event.

As a quick and dirty workaround you can just make a lovely timeout (as I mentioned input event happens before the DOM modification) and "queue" snapshot creation.

I have updated your PoC with additional code: https://jsfiddle.net/c0fqLm4d/1/

Finally this is not a bug as such, but a feature request so I'm adjusting the issue type.

[mmichaelis]

Thanks for the hint. This helped a lot (actually I was not aware of the requirement to invoke the saveSnapshot later).

As it seems, the "input" event is really going to be designed for editors such as CKEditor. Some references:

• W3C: Input Events Level 2
• MDN: InputEvent - Web APIs | MDN
• WebKit: Enhanced Editing with Input Events | WebKit

[f1ames]

This issue was also spotted in context of our Angular integration - https://github.com/ckeditor/ckeditor4-angular/issues/46. Also causes an issue in WProofreader which uses similar to native spellchecking corrections inserting method - https://github.com/WebSpellChecker/wproofreader/issues/2.