JSFiddle - React, Tailwind, and code Playground

Debugging newline insertions.

by nilloc

HTML

<customNode contenteditable>
  <subNode>sub node</subNode><newline><br>
  </newline>
  <subNode>sub node</subNode><newline>
  <br>
  </newline>
  <appendedNode>appendedNode</appendedNode><newline><br>
  </newline><subNode>sub node</subNode><newline>
  <br></newline>
  <newline><br>
  </newline>
  <subNode>sub node</subNode><newline><br>
  </newline><subNode>sub node</subNode><newline><br></newline>
</customNode>

CSS

customNode{
  border:1px solid blue;
  display:block;
}

newline{
  background:rgba(255,0,0,0.2);
}

JavaScript

document.onselectionchange = function(evt){
  // console.log('onselectionchange', evt)
  var node = document.getSelection().anchorNode;
  console.log('onselectionchange', node.nodeType == 3 ? 'parentNode: '+node.parentNode.tagName : 'node: '+node);
}

document.querySelector('appendedNode').onclick = function(){
	document.querySelector('appendedNode').insertAdjacentHTML('afterend', '<newline><br>\n</newline><sp>&nbsp;</sp><sp>&nbsp;</sp>');
}