JSFiddle - React, Tailwind, and code Playground

HTML

657658648
<div contenteditable="true">
text text rewgrwhrwtyw 42542654
</div>
<input type="button" id="id_ins" value="Insert" />

CSS

div {
  border: 2px solid black;
  padding: 5px;
  min-height: 100px;
}

.smile_add_block {
  background: red;
}

JavaScript

function smile_add(div, src) {
	if (div.querySelectorAll('img.smile_add_block').length > 3) {
  	alert('!!!!!!!11');
    try { div.focus(); } catch(exc) {}
    return;
  }

	var sel = window.getSelection();
  if (!sel || !sel.rangeCount) { return; }
  var r = sel.getRangeAt(0);
  if (!r) { return; }
  
  for (var n = r.commonAncestorContainer; n != div; n = n.parentNode) {
  	if (!n) { return; }
  }
  
  var img = new Image();
  img.className = 'smile_add_block';
  img.src = src;
  r.deleteContents();
  r.insertNode(img);
  
  r = document.createRange();
  r.selectNode(img);
  r.collapse(false);
  sel.removeAllRanges();
  sel.addRange(r);
  try { div.focus(); } catch(exc) {}
}

var div = document.querySelector('div');
var imgSrc = 'https://javascript.ru/forum/images/smilies/yes4.gif';
document.querySelector('#id_ins').onclick = smile_add.bind(null, div, imgSrc);