Weird behavior when typing

[yojona]

When I write on a line that is not the last, after writing 1 character, it takes me to the next line, I want to continue writing on the same line.

GIF:

I noticed that it only happens when I set the state with OnChange, if it uses its internal state it works fine.

Replicate:

1. Go to: https://codesandbox.io/s/epic-bardeen-xn8g7?file=/src/App.js
2. Write in the first line "top"
3. Create 2 new lines below
4. Go to the last line, write "bottom"
5. Click on the middle line or the first one, try to continue writing there. It will take you to the next line.

[bocek]

did you fix this guys

[vadimuz]

I have decided no use react-medium-editor, and create own component that will do the same wrapper (based on hooks) without this bug. Now everything works seamlessly.

import React, { useState, useEffect, useRef } from 'react'

if (typeof document !== 'undefined') {
  let MediumEditor = require('medium-editor')
}

function ReactMediumEditor(props) {
  let {
    className,
    options,
    text,
    onChange
  } = props

  let [t, setT] = useState(text)
  let container = useRef()
  let medium = useRef()

  useEffect(() => {
    medium.current = new MediumEditor(container.current, options)
    medium.current.subscribe('editableInput', e => {
      change(container.current.innerHTML)
    })
    return () => {
      medium.current.destroy()
    }
  }, [])

  function change(text) {
    setT(t)
    if (onChange) 
      onChange(text, medium)
  }

  if(medium && medium.current) {
    medium.current.saveSelection()
  }

  return <div className={className ? className : ''} dangerouslySetInnerHTML={{ __html: t }} ref={container} />
}

export default ReactMediumEditor