JSFiddle - React, Tailwind, and code Playground

by tarnfeld

HTML

<textarea class="editor" ><p>Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit.</p><p>Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit.</p></textarea>

<span class="cursor"></span>

CSS

textarea.editor {
    resize: none;
    width: 400px;
    height: 400px;
    padding: 10px;
    line-height: 1.7;
    border: 1px solid blue;
}
span.cursor {
    display: block;
    width: 3px;
    height: 10px;
    background: red;
    position: absolute;
    top: 0;
    left: 0;
}

JavaScript

$('textarea.editor').keyup(function() {

    var textarea = $(this).get(0),
        lastChar = $(this).val().substr(textarea.selectionStart-1, 1);
    
    if (lastChar == '@')
    {
        // Show and move the span to below this char position
    }
});