I was copying facebook draftjs, in which just main features were added that accepts chars native insertion, the case here that cursor moved to the start position of a line where it been typed in when inserting char in contenteditable div and then updating state.

From the console output, the 'onSelect' event handles and casts the right SelectionState from dom object which triggers twice that, the first for focusing the position of the text area, the second occurs in after 'onInput' event returns as the cursor position changes.

The issue here that after insert chars(which works), it didnt work as expected to remain cursor to the position where it was but the initial value, see console log screenshot.png. And I've no idea where the hack & trick doing this is as in relevant part of draftjs.

function onSelect(_this: Editor): void {
  console.log('SELECT')
  
  const { editorState } = _this.props
  
  if(_this._blockSelectEvent ||
     _this._latestEditorState != _this.props.editorState) {
    return
  }
  
  // forceSelection
  const selection = getCastSelection(editorState, getContentEditable(_this))
  
  let newEditorState: EditorState 

  if(selection !== editorState.getSelection()) {
    newEditorState = editorState.acceptSelection(selection)    
    _this.sync(newEditorState)
  }
}

function onBeforeInput(
  _this: Editor,
  e: SyntheticInputEvent<HTMLElement>
): void {
  console.log('BEFOREINPUT')  
  
  const editorState = _this._latestEditorState,
        { data } = e
  
  if(!data) {
    return
  }
  
  const selection = editorState.getSelection(),
        inlineStyle = editorState.getInlineStyle(),
        chars = data
  
  if(!selection.collapsed()) {}
 
  let newEditorState = replaceChars(
    editorState,
    chars,
    inlineStyle,
    false
  )

  _this._pendingEditorState = newEditorState
}

function onInput(
  _this: Editor,
  e: ?SyntheticInputEvent<>
): void {
  console.log('INPUT')

  if(_this._pendingEditorState != undefined) {
    _this.sync(_this._pendingEditorState)
    _this._pendingEditorState = undefined
  }
}