Example code seems to be broken

[Ontopic]

Lovely approach, thanks a lot!

It may be due to browser (latest Chrome) or React version (17), but I THINK it's because the sample in the README is broken.

When your cursor is after the last character and you press enter, nothing happens. The second time you press enter it adds an enter to the top of the area, not really the intention of anyone I think.

In the Codesandbox everything works fine. When comparing I found that the example in the README only adds a line when not at the end of the array, while the Codepen always adds one.

README: { i < arr.length - 1 ? '\n' : null }
Codesandbox: { "\n" }

For me at least it appears the README example is fixed when always adding a \n. I know how sensitive these things can be with all browsers, so wanted to verify this is a mistake in the README and not done intentional to prevent other quirks.

Also it seems quite often Chrome loses focus after first getting focus for the first time and typing one character. I can think of some ugly workarounds, but perhaps also something I'm missing, since Codepen code is again not exhibiting this quirk.

Code used as good as a copy paste from README.

EDIT: Just confirmed that the Codesandbox is also broken when replacing it with the code from the README, e.g. "\n" to {i < tokens.length - 1 ? '\n' : null}

[stefcameron]

use-editable's README states:

Furthermore it also preserves the current position of the caret, the selection, and restores it once React has updated the DOM itself.

But this is clearly not happening. There are a number of issues opened here regarding selection, this one for cursor position, etc.

It leads to a really poor editing experience. Debouncing code updates helps a little bit, but it just delays the inevitable.