IME composing problems on `td` or `th` element in safari browser

1

Hi all,

I found a problem in safari browser when using prosemirror-tables.

It is ok in chrome browser. But I test it in two version’s safari browser (v15.0, v14.1), both have the same problem.

The problem happens on IME composing (input CJK characters) and it’s ok when just input the western characters. Here are details of the problem.

  • In empty th cell, input the CJK characters and it will auto add a new column after inputing.
  • In empty td cell, input the CJK characters and it will keep both western characters and CJK characters after inputing.

2022-03-24 23.15.15

Ps: The tiptap’s table node have the same problem. And the editor of confluence seems also have the similar problem.

After some research, I think it maybe a bug of webkit engine on handling the caret in nesting element.

Then I try to fix the problem. I tried a lot:

  • write some hack css(-webkit-user-modify), but it will make new problems
  • read the source code of prosemirro-view, try to add a hack node or whatelse, but failed
  • …balabala

Then I find an issue: IME composing is not working when the cursor is in th tag.

It inspires me. I try to add a zero-width-space on the empty cell, then the CJK characters can be input normally.

Based on above things, I write a plugin to auto insert and delete a zero-width-sapce during input CJK characters. It really solve the problem but I am not sure it is the best way.

Tada, let the community speaks.

The demo: https://codesandbox.io/s/prosemirror-table-forked-vln1hp?file=/src/index.js:2617-2636

Enable the autoInsertZeroSpace plugin to see the right effect.

1 Like
2

I’m facing the same issue. I’ve tried your solution, but during testing, I found that adding zero-width spaces would lead to new bugs. Specifically, selecting a cell and inputting text would create more severe issues, such as the cursor randomly jumping lines.

1 Like
3

I have resolve this problem,ant commit a PR