Doesn't quite work with new lines

[Drei109]

There seems to be a bug when adding new lines in a contenteditable div, the position number at the end of a line it's the same as the position number at the start of the next line, making it impossible to set the caret at the beginning of a new line.

Steps to reproduce:

• Go to the demo: https://abhas9.github.io/vanilla-caret-js/
• Add a text with more than one line e.g.

  This is the first line
  This is the second line
  

• Put the cursor at the begging of the second line (Before the 'T')
• Get the value with the 'GET POSITION' button.
• Paste the value into the 'SET POSITION' input and click the button.
• The caret moves at the end of the first line (after the 'e')

Is there any workaround for this? Thanks in advance.

[Krolcom]

This issue is caused by contenteditable using <br> for line breaks. You can use white-space: pre; to make your div respect line breaks \n

You can then give your element

e.target.innerHTML = e.target.innerHTML.replace(/<br>/g, '\n')

if(e.inputType === 'insertParagraph') {
  caret.setPos(oldPos + 1)
}

on input.