vertical align center support as a props option

[ibarapascal]

as title

current

we can customize the element's style to enable them vertically aligned at the center, but the initial cursor position would keep at the top as long as the initial content is empty.

enhancement

we can do that via adding a CSS :empty class to set the line-height the same value as the contentEditable's element height to fix that, if we can include such adjustments within our components and expose a boolean option to do so, that would be great

related QA: https://stackoverflow.com/a/71304258/11872246

[hiukky]

@ibarapascal https://github.com/hiukky/cedit

I'm trying to do something like this but without beating around the bush with js to control caret, I think with pure css you can do something, or at least try! the closest I've come to such a behavior was added a   just to move the caret to the center but without losing the placeholder.

[ibarapascal]

@ibarapascal https://github.com/hiukky/cedit

I'm trying to do something like this but without beating around the bush with js to control caret, I think with pure css you can do something, or at least try! the closest I've come to such a behavior was added a   just to move the caret to the center but without losing the placeholder.

I've created a demo that achieved it with other features, here is the share: https://codesandbox.io/s/demo-textarea-vertical-align-center-8v9n3b?file=/src/App.tsx

[hiukky]

I added a story with examples https://hiukky.github.io/cedit/?path=/story/cedit-editor--default

Can you tell me if this solves the problem mentioned? I saw your pen but I didn't understand the case well?!