JSFiddle - React, Tailwind, and code Playground

by caub

HTML

<div id="ed" contenteditable> 

<a href="http://foo.bar">
I'm just a link
</a>

</div>
<textarea id="text" cols="40" rows="20"></textarea>

CSS

#ed {
  border: 1px solid blue;
}

button {vertical-align: top;}

td {
  padding: 20px;
  border: 1px solid;
}

JavaScript

var isFirefox = /firefox/i.test(navigator.userAgent);
var isEdge = /edge/i.test(navigator.userAgent);

document.execCommand('styleWithCSS', null, true);
//text.hidden = true;
var r = selectNodeContents(ed.querySelector('a'));
//r.collapse(true);
setRange(r);

exec('insertImage', 'http://lorempizza.com/50/50');
//exec('insertHTML', '<img src="http://lorempizza.com/50/50">');

console.log('no more link:( ', ed.querySelector('a'))

function exec(c,v){
  document.execCommand(c,null,v);
}
function getRange(){return document.getSelection().getRangeAt(0); }
function setRange(range){
  document.getSelection().removeAllRanges();
  document.getSelection().addRange(range);
}
function selectNode(node){var r=document.createRange(); r.selectNode(node); return r;}
function selectNodeContents(node){var r=document.createRange(); r.selectNodeContents(node); return r;}
function select(sc, so, ec, eo){var r=document.createRange(); r.setStart(sc, so); r.setEnd(ec, eo); return r;}