JSFiddle - React, Tailwind, and code Playground

HTML

Start typing a message with a link i.e. <code>http://example.com</code>...
<div id="textbox" contenteditable></div>

CSS

body { font:.8rem/1.5 sans-serif;  margin:2rem; }
div {
    border:thin solid gray;
    padding:1rem;
    height:10rem;
    margin:1rem 0;
    color:black;
    font-size:1rem;
}
a { color:blue; background:lightblue; }

JavaScript

var textbox = $("#textbox");
$(document).ready(function () {
    textbox.focus();
    textbox.keydown(function () {
        var html = $(this).html();
        var plaintext = html.replace(/<[^>]+>[^<]*<[^>]+>|<[^\/]+\/>/ig,"");

        var url = html.match(/[A-Za-z]+:\/\/[A-Za-z0-9-_]+\.[A-Za-z0-9-_:%&\?\/.=]+/g);
        if (url) {
            var linked = plaintext.replace(url, function(m) {
                return '<a href="' + m + '">' + m + '</a>';
            });
            textbox.html(linked);
        }
    });
});