JSFiddle - React, Tailwind, and code Playground

by codemeasandwich

HTML

<div contenteditable="true">
    <h2>Click here and press enter and a paragraph should appear after this h2</h2>
    
    <h2>This is another element that should react the same way</h2>
</div>

JavaScript

$(document).on('keypress', 'div[contenteditable="true"]', function(event) {
									
									
    //enter key
    if (event.which == 13) {
        event.preventDefault();
        //insert the paragraph after this element.
        $(window.getSelection().anchorNode.parentNode).after("<p id='newParagraph'>cool</p>");
        
        //set cursor at new position
        var sel = window.getSelection();
        var innerDiv = document.getElementById('newParagraph');
        var innerDivText = innerDiv.firstChild;
        
        returnFocus = $("#newParagraph").text().length;
        sel.collapse(innerDivText, returnFocus);
        innerDiv.parentNode.focus();
        
    }
    
});