Using "Enter" to add a new line does not work as expected

[llccrr]

I tried the library using this codesandbox: https://codesandbox.io/s/l91xvkox9l

If I use Shift + Enter to add a new line it works. If I use Enter to add a new line, then click away to on blur it, it removes lines that were created. Basically: "AAAAA aa AA" becomes "AAAAAaaAA"

browser: Chrome - version 78.0.3904.97

[lovasoa]

What browser are you using ? Do you observe this behavior only when the contenteditable element is is managed by react-contenteditable ?

[llccrr]

What browser are you using ?

I edited my post with the browser version.

Do you observe this behavior only when the contenteditable element is is managed by react-contenteditable ?

I did not try to manage a contenteditable without it, I wanted to avoid doing that by using this library.

[llccrr]

I just give it a quick try, using Enter key in an editable div seems to work, multi-lines are kept.

[lovasoa]

Bon, essayons en français 😛

Quel navigateur utilisez-vous ? Firefox, chrome, safari... ? Et quelle version ?

Pouvez-vous créer un élément avec la propriété contenteditable en dehors de react-contenteditable, et indiquer si vous constatez le même problème ?

[llccrr]

ça ne changera pas vraiment ma réponse, je pense que c'était compréhensible :(

Quel navigateur utilisez-vous ? Firefox, chrome, safari... ? Et quelle version ?

J'ai édité mon post avec la version du navigateur, à savoir Chrome v78.

Pouvez-vous créer un élément avec la propriété contenteditable en dehors de react-contenteditable, et indiquer si vous constatez le même problème ?

J'ai essayé rapidement de créer une div avec contenteditable, les sauts à la ligne effectués avec Entrée sont bien gardés.

[llccrr]

I just figure out that it was because of a "display: flex".

[llccrr]

My bad.. the bug is still present. I can confirm you that this behavior is not present when using the contenteditable property outside of react-contenteditable

[dimaaan21]

@llccrr , I had the same problem. For solving this i've just used React.useRef(null) instead of React.createRef() and all became OK.

Reason (in my case): during every re-render <ContentEditable> received new ref that's why caret were replaced at the end only and new line weren't created.

[panathea]

My solution involves using white-space: pre-wrap; and then controlling the enter key in order to prevent the insertion of div/p:

<ContentEditable
    onKeyDown={(event) => {
        if (event.key === 'Enter') {
          document.execCommand('insertLineBreak')
          event.preventDefault()
        }
      }}
/>