frontend

frontend copied to clipboard

The message box should grow as new lines are added to it, up to a set maximum rows.

i'd like to try looking at this tomorrow. i wanna learn how to work with solid.JS and revolt's UI, and this seems like a nice problem to start out with :)

...also because this was personally very annoying to work around while making my other contribution LOL

ok so i finally have some time to take a look at this, and i've already ran into a small problem.

unfortunately, native <textarea> elements do not seem to have any kind of automatic scaling options, unlike basically any non-input element. there are 2 solutions to this:

1. replace the <textarea> with something like a <div> with the contenteditable attribute.
   • this would almost certainly result in accessibility issues that need to be addressed manually, like adding :focus/:focus-visible styling, a tabindex attribute for keyboard navigation, etc.
   • i suppose it's also worth mentioning that this is the solution that Discord uses atm.
2. use some javascript to resize the <textarea> whenever the content is updated.
   • in theory, this should be the easiest solution to implement, but it does potentially mean having a DOM reflow on every keypress. this could have a performance impact, especially on low-end machines. (although this might not matter depending on how SolidJS handles it... i'm not sure.)

for now, i'm gonna go with option 2, just to see if i can get this to work at all. but if option 1 would be preferred, lmk.

I'm not sure if we can even use a textarea because I don't think they support rich content needed for #183.

in that case, i'll try option 1 x)

i've been struggling to get option 2 to work well anyway lol. starting to realize why discord uses a contenteditable now...