/n line added to contentEditable

[fprl]

Hi to everyone, thank you for the hook.

I've been using it and everything ok except for the /n line which causes that I cannot get the real length of the string to call a func or get and empty component to show a placeholder via css (I ended up making another empty component to render when the length was === 1).

Is there any possible solution?

Again, thank you!

[kitten]

This really depends just on what you render, so when the content is empty, it should actually be empty. However, editing behaves best when you render a trailing newline and then slice it off in your change handler, i.e. text.slice(0, -1). This means that there'll always be an excessive newline in your render, which browsers won't render, since trailing newlines don't show, but your text will always have the right amount of them.

[fprl]

Thank you kitten, I added the text.slice and everything is correct, now the only thing that happens to me is that I lost focus on the content editable when it gets to ' ' (text.length === 0).

I tried a useEffect to trigger a focus on the element (with ref) when it gets to length 0 but it's not working, do you know what's happening?

EDIT: I realize that is not losing the focus, the problem is that the caret disappear therefore I can't write on the content editable till I click on it.

[kitten]

@francoromanol I've never really tested that but some browser's caret behaviour can be really odd. I'd avoid having a completely empty editable; as I said, adding a trailing newline may also help with never having a completely empty editable, since a completely empty editable isn't technically focusable afaik.