JSFiddle - React, Tailwind, and code Playground

by amirisnino

HTML

<div>Place caret at some point of the word 'text', then press 'i' key to insert a span with execCommand</div>
<div class="parent" contentEditable=true>
    <div>text</div>
</div>
<div><b>HTML:</b></div>
<div class="result"></div>

CSS

.parent { background:#EFF8FF; }
div { margin: 6px 0; }

JavaScript

$('.parent').on("keyup", function(e){
    if (e.which == 73) {
       node = '<span class="new"></span>';
       document.execCommand('insertHtml', null, node);
       content = $(this).html()
       $('.result').text(content)
   }
});