Add Bullets To Each New Line Within A Textarea

I have a textarea that I want users be able to input text in. Each new line within the textarea will eventually get split up and sent back to the database to be used elsewhere. To

Solution 1:

You can find the current position within the text area, and when enter is pressed, append a new line and a bullet:

const bullet = "\u2022";
const bulletWithSpace = `${bullet} `;
const enter = 13;


consthandleInput = (event) => {
  const { keyCode, target } = event;
  const { selectionStart, value } = target;
  
  if (keyCode === enter) {
    console.log('a');
    target.value = [...value]
      .map((c, i) => i === selectionStart - 1
        ? `\n${bulletWithSpace}`
        : c
      )
      .join('');
      console.log(target.value);
      
    target.selectionStart = selectionStart+bulletWithSpace.length;
    target.selectionEnd = selectionStart+bulletWithSpace.length;
  }
  
  if (value[0] !== bullet) {
    target.value = `${bulletWithSpace}${value}`;
  }
}

<textareaonkeyup="handleInput(event)"rows="10"></textarea>