Firefox does not fire beforeinput events

[ianstormtaylor]

Firefox does not currently support the beforeinput event, which Slate uses under the covers to be notified whenever the user triggers an input into the editor (inserts, deletes, cuts, pastes, drops, etc.). These beforeinput events are cancellable and we use them to then do the Slate-equivalent of whatever the event was.

Right now we hack around this for Firefox and handle some of the common input cases. However, there's only so much we can do. And input events like formatBold, or insertFromComposition are hard to polyfill. (There might be ways to improve our existing ones, if you see them please PR!)

This is also the reason we disable autoCorrect and spellCheck in Firefox on the contenteditable element, since we have no easy way of determining when those changes occur.

Here are the bug reports… (please vote for and follow them!)

• https://bugzilla.mozilla.org/show_bug.cgi?id=970802
• https://bugzilla.mozilla.org/show_bug.cgi?id=1305387
• https://bugzilla.mozilla.org/show_bug.cgi?id=1449831

Once these are supported Firefox will get improved editing support (autocorrect, spellcheck, IME composition, B/U/I toolbars, etc.). And we'll be able to reduce bundle size for everyone by removing the current Firefox-specific hacks.

[rescribet]

https://bugzilla.mozilla.org/show_bug.cgi?id=970802 and https://bugzilla.mozilla.org/show_bug.cgi?id=1449831 have been marked as fixed 👍

[ClubicTech]

+1 I force "true" here

slate/packages/slate-react/src/components/editable.tsx

Line 41 in f4ee75d

const HAS_BEFORE_INPUT_SUPPORT = !(IS_FIREFOX || IS_EDGE_LEGACY)

and spellcheck work perfectily on firefox 76.

[hysie]

+1 I force "true" here

slate/packages/slate-react/src/components/editable.tsx

Line 41 in f4ee75d

const HAS_BEFORE_INPUT_SUPPORT = !(IS_FIREFOX || IS_EDGE_LEGACY)

and spellcheck work perfectily on firefox 76.

Doesn't work on Firefox 80.

It actually disables the fallback and ends up not firing any events when you spellcheck, this makes it look like it works but instead what you get is the real DOM not synchronizing with slate internal representation (doesn't event.preventDefault) and causing all kind of bugs.

What I did instead was to add a special fallback mechanism using the input event (only spellcheck), I'll make a PR if someone wants it.

Edit: Seems like the feature is available in nightly since 74 but has to be enabled by the user with the preference (dom.input_events.beforeinput.enabled) - https://wiki.developer.mozilla.org/en-US/docs/Mozilla/Firefox/Experimental_features#HTML_DOM_API

[ClubicTech]

I'll make a PR if someone wants it.

Yes, I want plz ;)

[asamuzaK]

You shouldn't detect by UA, instead detect feature like below.

const HAS_BEFORE_INPUT_SUPPORT = typeof InputEvent.prototype.getTargetRanges === 'function';