JSFiddle - React, Tailwind, and code Playground

by Darby Rathbone

HTML

<textarea name="main" id="text" multiline=true ></textarea>

CSS

.drop-selector {
}
textarea[id=text]{
    width:90%;
    height:90%;
}

JavaScript

var options = ['ab', 'aaa', 'acd', 'abbb'];
document.getElementById('text').addEventListener('keydown', function (e) {
    var s = this.value.split(' ').pop().split('');
    console.log(s);
    if (s[0] == '{') {
        var sel = document.createElement('select');
        options.forEach(function(e) {
            var _o = document.createElement('option');
            _o.value = e;
            _o.innerHTML = e;
            sel.appendChild(_o);
        });
          document.body.appendChild(sel);
        console.log(getComputedStyle(this));
        console.dir(this);
        //console.dir(e.target);
        //this.taget.appendChild(sel);
        //this.insertAdjacentElement("afterBegin",sel);
    }
}.bind(document.getElementById('text')));