JSFiddle - React, Tailwind, and code Playground

by Vijayakrishnan Krishnan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/rangy/1.2.3/rangy-core.js"></script>
<div id="edit" contenteditable="true" tabindex="1">
    <p>This is a paragraph</p>
    <p>This is a paragraph</p>
    <p>This is a paragraph</p>
    <p>This is a paragraph</p>
    <p>This is a paragraph</p>
    <ol><li>This is good</li></ol>
</div>

<button id="select">Select</button><button id="insert">Insert</button>

JavaScript

$('#select').mousedown(function() {
    
    var li = $('#edit ol').first()[0];
    
    var r = rangy.createRange();
    r.selectNodeContents(li);
    rangy.getSelection().setSingleRange(r);
    
    $('#edit').focus();
    
    return false;
    
});

$('#insert').mousedown(function() {
    
    var items = [
        "Hello World, here I come", 
        "This is the second item",
        "And a third one as well"
        ];
    
    for(var i=0; i<items.length; i++) {
        if(i > 0) document.execCommand('insertText', false, "\n");
        document.execCommand('insertHTML', false, items[i]);
    }
    
    //document.execCommand('insertHTML', false, items.join("\n"));
    
    $('#edit').focus();
    
    return false;
    
});