JSFiddle - React, Tailwind, and code Playground

by Per Axbom

HTML

<div class="comtools" id="txt">
    <span class="intitle">Skriv</span><br>
    <img src="http://axbom.se/img/heart.png" class="emoticon" id="heart" /> <img src="http://axbom.se/img/smile.png" class="emoticon" id="smile" />
<div class="comfield" id="comfield" contentEditable="true"> Skriv din kommentar här.
</div>
    </div>

<button class="btn" id="send">Skicka</button>

CSS

.comtools {
    
    background:#0060D2;
    border: 1px solid #0060D2;
    width:400px;
    min-height:30px;
    padding:10px;
}

.intitle {
    font-family:Arial,sans-serif;
    color:#fff;
    font-size:1.3em;
}

.comfield {
    background:#fff;
    width:377px;
    height:200px;
    border: 1px solid #ccc;
       padding: 10px;
    line-height:1.5em;
    font-family:Arial,sans-serif;
}

.emoticon {
    background:#fff;
    padding:5px;
    margin:10px 0px 20px 0px;
    cursor:pointer;
}
  
img.inimg {vertical-align:middle; margin: 2px 3px;}

.btn {font-family:Arial,sans-serif;font-size:2em;}

JavaScript

/*Jquery code*/
$(document).ready(function(){
    
    $("#heart").click(function () {
    var el = document.getElementById("comfield");
    pasteHtmlAtCaret('<img src="http://axbom.se/img/heart.png" class="inimg" />', el);
    });
    
    $("#smile").click(function () {
    var el = document.getElementById("comfield");
    pasteHtmlAtCaret('<img src="http://axbom.se/img/smile.png" class="inimg" />', el);
    });
    
});

function setEndOfContenteditable(contentEditableElement) {
    var range, selection;
    if (document.createRange) //Firefox, Chrome, Opera, Safari, IE 9+
    {
        range = document.createRange(); //Create a range (a range is a like the selection but invisible)
        range.selectNodeContents(contentEditableElement); //Select the entire contents of the element with the range
        range.collapse(false); //collapse the range to the end point. false means collapse to end rather than the start
        selection = window.getSelection(); //get the selection object (allows you to change selection)
        selection.removeAllRanges(); //remove any selections already made
        selection.addRange(range); //make the range you have just created the visible selection
    } else if (document.selection) //IE 8 and lower
    {
        range = document.body.createTextRange(); //Create a range (a range is a like the selection but invisible)
        range.moveToElementText(contentEditableElement); //Select the entire contents of the element with the range
        range.collapse(false); //collapse the range to the end point. false means collapse to end rather than the start
        range.select(); //Select the range (make it the visible selection
    }
}

function elementContainsSelection(el) {
    var sel;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.rangeCount > 0) {
            for (var i = 0; i < sel.rangeCount; ++i) {
                if (!isOrContains(sel.getRangeAt(i).commonAncestorContainer, el)) {
        ...