JSFiddle - React, Tailwind, and code Playground

by Darby Rathbone

HTML

input text here:
<div contentEditable=true></div>
<span class='toggle' id='drop'>
    <input type="checkbox" id="toggle"></input>
<label for="toggle" id='t2'></label>

    </span>

CSS

html, body {
    padding:3px;
    width:99%;
    height:100%;
}
div {
    width:98%;
    height:80%;
    padding:3px;
    outline:ridge 3px;
    background:#efefef;
}
body {
    margin: 0;
}
input {
    display: none;
}
label, ul {
}
label {
    color: #ff0000;
    cursor: pointer;
    display: inline-block;
    transition: all .15s ease;
}
a {
    color: #ff0000;
    display: block;
    text-decoration: none;
}
.toggle {
    position:absolute;
    z-index:1;
    display:block;
}

JavaScript

var findmatches = function findmatches(s) {
    s = s.split('');

    var mats = matchablestrings.filter(function (e) {
        e = e.split('');
        console.log(s.every(function (b, i) {
            return b === e[i];
        }));
        return s.every(function (b, i) {
            return b === e[i];
        });
    }) || [''];
    return mats;
};
var t = document.getElementById('drop');
var t2 = document.getElementById('t2');
var matchablestrings = ['abc', 'abcdefghijklmnopqrstuvwxyz'];
var lastspace;
var sm = '';
/*document.getElementsByTagName('div')[0].addEventListener('keydown', function (e) {
    if (e.ctrlKey)
    return;
    console.log(e);
    if (e.keyCode == 32) {
        lastspace = e.target.textContent.length + 1;
    } else {

        var currentpos = getSelection().focusOffset;
        getSelection().collapse(getSelection().focusNode, lastspace);

        var pos1 = e.target.getBoundingClientRect();
        var pos = getSelection().getRangeAt().getClientRects()[0];
        console.log(pos);
        getSelection().collapse(getSelection().focusNode, currentpos);
        t.style.top = pos.top + "px";
        t.style.left = pos.left + "px";
        t2.textContent = '';

        t2.textContent = findmatches(e.target.textContent.split(' ').pop())[0] || "";
    }
});*/
document.getElementsByTagName('div')[0].addEventListener('input', function (e) {
    console.log(e);
    t2.textContent = e.target.textContent.split(' ').pop();
    lastspace = e.target.textContent.lastIndexOf(' ') + 1;

    var currentpos = getSelection().focusOffset;
    getSelection().collapse(getSelection().focusNode, lastspace);


    var pos = getSelection().getRangeAt().getClientRects()[0];
    console.log(pos);
    getSelection().collapse(getSelection().focusNode, currentpos);
    t.style.top = pos.top + "px";
    t.style.left = pos.left + "px";
    t2.textContent = '';

    t2.textContent = findmatches(e.target.textContent.split(' ').pop())[0] || "";
});