JSFiddle - React, Tailwind, and code Playground

by rashminkitelytech

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/emojionearea/3.4.1/emojionearea.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/emojionearea/3.4.1/emojionearea.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://autoviral.wrapr.com/assets/js/bootstrap.bundle.min.js"></script>
<ol>
<li>Add Tag works</li>
<li>Add Some emoji then place caret after emoji and select tag</li>
</ol>

<textarea id="message_rule">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley</textarea>
<br/><br/>
<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Select Tag
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton" style="">
        <a class="dropdown-item" href="#" onclick="insertAtCaret('message_rule', '[%NAME%]');return false;">Name</a>
        <a class="dropdown-item" href="#" onclick="insertAtCaret('message_rule', '[%FIRST_NAME%]');return false;">First Name</a>
        <a class="dropdown-item" href="#" onclick="insertAtCaret('message_rule', '[%LAST_NAME%]');return false;">Last Name</a>
    </div>
</div>

JavaScript

$(document).ready(function() {    
    $("#message_rule").emojioneArea({
        pickerPosition: "bottom"
    });
});

function insertAtCaret(myField,html) {
    var sel, range;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = sel.getRangeAt(0);
            range.deleteContents();
            var el = document.createElement("div");
            el.innerHTML = html;
            var frag = document.createDocumentFragment(), node, lastNode;
            while ( (node = el.firstChild) ) {
                lastNode = frag.appendChild(node);
            }
            range.insertNode(frag);
            if (lastNode) {
                range = range.cloneRange();
                range.setStartAfter(lastNode);
                range.collapse(true);
                sel.removeAllRanges();
                sel.addRange(range);
            }
        }
    } else if (document.selection && document.selection.type != "Control") {
        document.selection.createRange().pasteHTML(html);
    }
}