I am trying to make a custom text box in HTML/Javascript with the following requirements:
- The text box’s initial state will be a single bullet point like this:
- Every line must start with a bullet point, so when the user types “enter” it will go to a new line and automatically start it with a bullet point
- If they press “backspace” on an empty line with only a bullet point, it deletes the bullet point and returns to the end of the previous line
- Bullet points are idented with “tab”
- Bullet points are un-idented with “shift + tab”
- Bullet points can only be indented once
- Supports copy and pasted text
The following image is a word text box that I am trying to emulate:
I have tried a couple of solutions, but none seem to work the way I want. Is there something easy I am missing?