`onBeforeInput` needs to be monkey patched

[marvinhagemeister]

Although it is part of the spec the beforeinput event is only available in Chrome at the time of this writing. Neither Firefox nor Safari or IE implement it. But although Chrome has it, it seems to have issues because it can't be prevented. This breaks the popular slate-react bindings for the slate rich-text-editor component.

We need to normalize the event in compat. There are a few hints on how to do so in the react code base, but they're somewhat outdated and we need to reassess the current support status in browsers.

[Oliv95]

Any update on this?

[Rafi993]

Only chrome and Safari supports it now. It could be implemented using onKeyPress (since the value of text input has not changed yet). As the comment in React codebase says

This event fires after onKeyPress and onCompositionEnd, but before onInput.

[Rafi993]

This can be a browser polyfill independent of preact

[paullaffitte]

I'm interested in implementing slate.js with preact. It seems that this issue is preventing me to do so. I would be glad to see any update about it. I've never worked on react neither preact before, but if I can be useful in any way I would love it.

EDIT: I gived it a try, and actually slate.js works like a charm with preact. I may have misunderstood something about this issue.

[upendradevsingh]

I am not sure if this is the same issue, breaking slate in mobile browser. I am trying to integrate slatejs in my preact application. Everything worked fine on desktop but it broke in the mobile browser (Android - Chrome).

index.es.js:1524 Uncaught (in promise) Error: Cannot resolve a DOM point from Slate point: {"path":[0,0],"offset":7}
    at Object.toDOMPoint (index.es.js:1524)
    at Object.toDOMRange (index.es.js:1538)
    at Object.__ (index.es.js:633)
    at P (hooks.module.js:1)
    at hooks.module.js:1
    at Array.filter (<anonymous>)
    at hooks.module.js:1
    at Array.some (<anonymous>)
    at Object.a.options.__c (hooks.module.js:1)
    at x (preact.module.js:1)

I have created a sample application.

https://github.com/upendradevsingh/slate-demo

[sventschui]

The following CSB shows how one can use the keyPress event to sort of polyfill onBeforeInput in Browsers that do not support it: https://codesandbox.io/s/determined-kalam-65v9h?file=/src/index.js

Note that you should still disable spellCheck & autoComplete in those browsers as this won't work with react neither. Open a slate example (https://www.slatejs.org/examples/richtext), add a typo, correct it using the spell checker, place the caret somewhere on the line where the typo was, hit enter, your typo re-appears. I had a short stab at polyfilling this using the onInput event but that requires some changes on the Slate editor if I'm not mistaken. The Slate team also did not yet come up with a proper polyfill for this case. Here is the relevant issue in slate: https://github.com/ianstormtaylor/slate/issues/3185