Support composition in placeholder

[yf-yang]

Composition is a special event that triggers when using input methods. It shows some characters, but actually the editor state is not updated.

Currently, placeholder does not support composition, so there will be collision when typing:

Slate internally supports it:
https://github.com/ianstormtaylor/slate/blob/c3a4e1e3f9f61af345fe1df34cc44440b4d9d558/packages/slate-react/src/components/editable.tsx#L872-L877

However, the isComposing is only exposed as a boolean instead of a state, so afaik plate cannot capture it timely.

Is there any solution with the case?

[yf-yang]

Related #3250

[12joan]

You could listen globally for the compositionstart compositionupdate and compositionend events and use them to update a state variable with the current value of ReactEditor.isComposing(editor).

[yf-yang]

Which dom node could be attached to?

Also I'm considering modifying the placeholder component only, if that's achievable

[12joan]

Composition events bubble, so you could listen on the window object inside a useEffect hook.

[12joan]

If you get this working, we'd love if you could create a PR with your solution

[yf-yang]

I'm checking the code, seems I can directly attach it to the placeholdered component

[yf-yang]

Alright, I decide to patch slate.

[yf-yang]

#3500