The placeholder remains visible when composing using an IME

[jijiseong]

Description

I type Korean consonant in editor such as 'ㄱ', 'ㄴ', 'ㄷ' ... onChange does not work.

Steps to Reproduce

https://github.com/udecode/plate/assets/77661228/26918d2b-93d2-4f4c-95e9-73d57fedf02b

Sandbox

Expected Behavior

<Plate
  onChange={(value) => console.log(value[0].children[0].text)}
/>

The placeholder still exists when typing 'ㅈ'.

I type 'ㅈ', 'ㅣ', 'ㅅ', 'ㅓ', 'ㅇ'

exptected console

ㅈ
지
짓
지서
지성

But actually

지
지성

I tried to fix this error. But I don't know what is causing it.

Environment

• slate:
• slate-react:
• browser: chrome

Bounty

Click here to add a bounty via Algora.

Funding

• You can sponsor this specific effort via a Polar.sh pledge below
• We receive the pledge once the issue is completed & verified

[12joan]

It looks like there are two different issues here.

onChange not being called When typing using an IME, the browser doesn't send certain events until after composition has finished. You can detect when IME composition is taking place by adding compositionstart, compositionupdate and compositionend handlers to your editor. https://stackoverflow.com/a/37099672

Placeholder remaining visible Curiously, Slate's custom placeholder example doesn't have this problem.

https://github.com/udecode/plate/assets/4272090/4ca9542a-5c02-48ba-9eed-55a0465d7f70

As a temporary workaround, you could try using the placeholder prop on PlateContent rather than using Plate's custom placeholder component. If you're interested in working on a proper fix for this, you could try investigating Slate's code to see how it knows to hide the placeholder. I'm guessing it's using a boolean state variable that it sets on compositionstart and compositionend.

[12joan]

I found the logic that Slate uses to hide the placeholder during composition:

https://github.com/ianstormtaylor/slate/blob/main/packages/slate-react/src/components/editable.tsx#L859-L864

[jijiseong]

Thanks for your quick response!