JSFiddle - React, Tailwind, and code Playground

by Abeee Doe

HTML

<div contenteditable>
<p>
Lorem ipsum dolor sit <b>amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore <i>et dolore magna aliqua</i>. Nunc eget lorem dolor sed viverra ipsum</b>. Quis varius quam quisque id diam vel quam elementum pulvinar. Turpis egestas sed tempus urna et pharetra pharetra massa. Sed risus pretium quam vulputate
</p>
</div>

<i>Select some text above and then click on this buttom...</i>
<button onClick='doTest()'>Insert arround selection </button>

CSS

div {
    overflow:scroll;
    height:40vh;
    border:solid 1px red;
    padding:6px;
}

JavaScript

function doTest() {
  var sel = window.getSelection();
    var range = sel.getRangeAt(0);
    
    var range0 = range.cloneRange();

    range.collapse(true);
    document.execCommand('insertText', false, '!!!START!!!');

    sel.removeAllRanges();
    sel.addRange(range0);
    range0.collapse(false);
    document.execCommand('insertText', false, '!!!END!!!');
}