contenteditable div with textarea like behaviour for plain text, correct process new lines on enter

contenteditable.ts

function onKeypress(event: KeyboardEvent) {
  const isEnter = ['Enter', '\n'].includes(event.key)

  if (isEnter && !event.shiftKey) {
    // document.execCommand('insertLineBreak') // short and more solid alternative, despide of deprecation

    const selection = window.getSelection()

    if (selection) {
      const range = selection.getRangeAt(0)

      const br = document.createElement('br')
      const editableDiv = event.target as HTMLDivElement

      if (!editableDiv.innerText?.endsWith('\n')) {
        editableDiv.appendChild(document.createElement('br'))
      }
      range.insertNode(br)

      range.setStartAfter(br)
      range.setEndAfter(br)

      selection.removeAllRanges()
      selection.addRange(range)

      const inputEvent = new Event('input', {
        bubbles: true,
        cancelable: true,
      })
      event.target?.dispatchEvent(inputEvent)
    }

    event.preventDefault()
  }
}