search

ianstormtaylor / slate

A completely customizable framework for building rich text editors. (Currently in beta.)
http://slatejs.org
MIT License
29.71k stars 3.24k forks source link

Input composition characters, Error ! #4067

Open jaceyi opened 3 years ago

jaceyi commented 3 years ago

What's the current behavior?

Select all , then input composition characters, Error !

The demo https://www.slatejs.org/examples/richtext command + a then option + ` and then any character .. Error

Browser: Chrome OS: Mac

What's the expected behavior?

...

jaceyi commented 3 years ago

Input Chinese, Korean, Japanese ... Error

Xheldon commented 3 years ago

老生常谈的问题了，可以搜一下 Issues，主要问题是 placeholder 不要用自带的，fork 下来 slate 的源码后自己实现一个 palceholder，原因是 slate 找 contenteditable 元素的时候有问题，可编辑元素内部第一个位置不要放任何非可编辑元素

jaceyi commented 3 years ago

老生常谈的问题了，可以搜一下 Issues，主要问题是 placeholder 不要用自带的，fork 下来 slate 的源码后自己实现一个 palceholder，原因是 slate 找 contenteditable 元素的时候有问题，可编辑元素内部第一个位置不要放任何非可编辑元素

@Xheldon 这应该跟 placeholder 没啥大关系，在文中选中 <textarea> 这几个字，可以前后多选点，输入依旧会有问题，draft-js 的源码我仔细看了看，slate 的源码我没仔细看但是也发现了一个共同点，它们再内部都吃掉了onCompositionStart 等几个事件，防止这种情况下更新渲染导致打断了输入状态，但是内部吧这事件吃掉后却会导致输入内容与 state 不同步，等输入完成时就会因为 state 不同步，在部分情况就出错了。 在他这个 Demo 中，选中那个块 A wise quote. 前后都多选一点，输入中文 再输入中文、韩文及其他组成文字同样会报错。

Xheldon commented 3 years ago

我是 fork 源码后，把 placeholder 自己实现了，然后删了 Editable 上的 placeholder 渲染的部分，问题就解决了

ccccccp commented 3 years ago

firefox用微软输入法也有问题

jaceyi commented 3 years ago

firefox用微软输入法也有问题

改源码