How to make a customized bullet text box in HTML/Javascript?

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:
    enter image description here
  • 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:
enter image description here

I have tried a couple of solutions, but none seem to work the way I want. Is there something easy I am missing?