How to position caret to after an img in a contenteditable

Question

I'm trying to position the cursor to after a given element in a contenteditable. I can see how to do this with nodes that are <p> tags, but it doesn't work for <img> tags.

My code reads:

function setCaretAtStartEnd( elem, atEnd ){
   const sel = document.getSelection();
   var  node = elem.firstChild;

   if( sel.rangeCount ){
       if (atEnd) sel.getRangeAt(0).setEnd(node, node.length);
       else sel.getRangeAt(0).setEnd(node, 0);
   }
}

A running version can be found on https://jsfiddle.net/Abeeee/f1ra72wu/ it works for One and Three but not Two (likely due to Two being a tag).

So how do I adjust my code to make the "Two" buttons work?

Thanks Abe

Answer 1

I've modified the fiddle, tell me if it fit what you want to do, I've wrapped the image inside a div with id two qnd removed it from the img elemet so the first button works, I also added a function to position the cursor after the image.

  function doEndImg(id){
     var imgElement = document.getElementById(id)
     var s = window.getSelection();
     if(s.rangeCount > 0) s.removeAllRanges();
     var range = document.createRange();
     range.selectNode(imgElement);
     s.addRange(range)
  } 

function doStart(elemId) {
  const  elem = document.getElementById(elemId);
  setCaretAtStartEnd(elem, false);
}

function doEnd(elemId) {
  const  elem = document.getElementById(elemId);
  setCaretAtStartEnd(elem, true);

}

function setCaretAtStartEnd(node, atEnd) {
  const  sel = document.getSelection();
  var  node = node.firstChild;

  if (sel.rangeCount) {
    if (atEnd) sel.getRangeAt(0).setEnd(node, node.length);
    else sel.getRangeAt(0).setEnd(node, 0);
  }

}

function doEndImg(id){
     var imgElement = document.getElementById(id)
     var s = window.getSelection();
     if(s.rangeCount > 0) s.removeAllRanges();
     var range = document.createRange();
     range.selectNode(imgElement);
     s.addRange(range)
  } 

[contenteditable]{ padding:5px; border:1px solid grey; border-radius:9px;; }
div { margin:10px; }
img { width:10%; height:auto}

<div contenteditable>
  <p   id='one'>One</p>
  <div id='two'><img  src='https://www.speakerscorner.co.uk/media/image/richard-ayoade-x.jpg'></div>
  <p   id='three'>Three</p>


<hr>

<div>
  One
  <button onClick='doStart("one")'>Move caret to start</button>
  <button onClick='doEnd("one")'>Move caret to end</button>
</div>

<div>
  Two
  <button onClick='doStart("two")'>Move caret to start</button>
  <button onClick='doEndImg("two")'>Move caret to end</button>
</div>

<div>
  Three
  <button onClick='doStart("three")'>Move caret to start</button>
  <button onClick='doEnd("three")'>Move caret to end</button>
</div>

</div>