contenteditable insert and replace

by Stalk

HTML

<div contenteditable="true">
  <u>мама</u> <span><i>мыла</i> <b>раму</b></span>
</div>

<hr>

<button class="inserter">☺</button>
<button class="inserter">☻</button>

CSS

.smile {
  color: red;
}

JavaScript

document.addEventListener('click', function (evt){
  let elem = evt.target
  if (elem.classList && elem.classList.contains('inserter')) {
    let newContent = document.createElement('span')
    newContent.className = 'smile'
    newContent.textContent = elem.innerHTML

    replace(newContent)
  }
})

function replace(replacementNode){
  let range = window.getSelection().getRangeAt(0)
  if (!range.startContainer.parentElement.closest('[contenteditable]')) {
  	return false
  }
  
  range.deleteContents()
  range.insertNode(replacementNode)
  replacementNode.closest('[contenteditable]').focus()
  range.collapse()

  range.insertNode(document.createTextNode('​')) // zero-width space here
  range.collapse()
}