Editable list component?

[tim-coutinho]

Loving Mantine so far, very easy to work with and looks great. I have a feature request/open to suggestions on how to implement something though: I'm creating an app that's essentially a clone of a website I already use, just with some features I want added, mostly for learning frontend development. In it I have a form where most fields are simple TextInputs with one MultiSelect, but the issue is with inputs that are lists by nature, e.g. ingredient and instruction inputs. I'd like to have it as one input wrapping a list of items and not separate inputs for each item in each list.

Ideally, like the original site, it would be something like just a contenteditable ul or ol within an input, where one can freely create the next list item by pressing enter, select areas to delete, etc. Before moving to Mantine I was messing around with that idea, but managing the state of that got out of hand real quick.

First is the original site, second is my recreation - obviously a manual comma-separated list with in a TextInput isn't ideal:

[rtivital]

Hi Tim, thanks for kind words! You can use a rich text editor to work with list, it is the simplest solution.

[tim-coutinho]

I was considering that, and it works to an extent, though I'm looking for something as lightweight as possible. I can get it near to what I'm looking for by explicitly setting the toolbar to display: none, though there's still a bunch of edge cases that are difficult to handle, like keeping the user within the list at all times and preventing them from just deleting everything and having an empty box with no lis, or pressing enter twice and exiting the list into a new paragraph.

A pretty specific use case I know, so I'm not expecting a tailor made solution to exist here, but thought I'd give it a shot.

[rtivital]

Unfortunately, nothing else that I can suggest, it's a very specific use case, and you should either build your own component for this or consider using other UI logic.