Why does the first letter get truncated when using a Chinese input method with ProseMirror in a Web Component?

1

Here is the minimal code I’ve written to reproduce the issue:

Steps to Reproduce

  1. Switch to the Chinese input method.
  2. Press Ctrl+A to select all the text in the editor.
  3. Press Backspace to delete the text.
  4. Enter any Chinese characters.

You will notice that the input method closes immediately after pressing the letter a.

屏幕录制2024-11-13-14.49.42 (1)

2

Does the problem also occur in the demo editor on prosemirror.net? What browsers and platform did you test on?

3

Thank you for your reply. This only happens with WebComponents created with lit. This does not happen in the official example.

You can see my reproduction code here

My env: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0

4

Here’s the online link to my deployment:

https://miaobuao.github.io/prosemirror-baseKeymap-reproduction/

5

I’m not going to debug the lit code, but I suspect what may be happening is that the editor gets redrawn on every update, which will absolutely break the browser’s IME composition state.

6

Thanks again for your reply!

But the problem only occurs when typing the first character

e9rkb-flydv

7

It seems that shadow dom is causing the problem. When I rendered the template as a child of the element in the main DOM tree, the problem went away!