Cursor move backward on re-render while composing Chinese

lovebzhou commented 1 year ago

const MyEditor = ({data, onChange}) => {
  const [value, setValue] = useState(data)

  const [editor] = useState(() => withReact(createEditor()))

  if (ReactEditor.isComposing(editor)) {
    console.debug('#cursor backword#')
  }

  return (
    <Slate editor={editor} value={value} onChange={onChange}>
      <Editable key="demo-editable" />
    </Slate>
  )
}

const MyEditorDemo = () => {
  const [value, setValue] = useState(initialValue)
  const _onChange = useCallback(content => {
   // demo for some external change
    _.delay(() => setValue(content), 1000)
  }, [])
  return <MyEditor key="demo-my-editor" data={value} onChange={_onChange} />
}

Environment