Помогите завершить код. При замене текста в contenteditable курсор встает в начало
Есть div contenteditable. Когда ввожу в него ссылку то она становится активна, все работает, но только вот курсор каждый раз в начало стает.Как от этого избавится?
$('#data').keydown(function(e) {
$(this).html($(this).html().replace(/<a\s+[^<]*?>[^<]*<\/a>|((?:https?:\/\/)?(?:www\.)?([-a-zA-Z0-9@:%._+~#=]{2,256}\.(?!gif|png|jpg)[a-z]{2,6}\b)[-a-zA-Z0-9@:%_+.~#?&\/=]*)/ig, function($0, $1) {
return $1 ? '<a href="' + $1 + '">' + $1 + '</a>' : $0;
}));
// Дополнил так, теперь курсор в конце но не возможно поставить его в другое место и что то написать
const div = $('#data').get(0);
const range = document.createRange();
range.selectNodeContents(div);
range.collapse(false);
const sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
});#data {
border:1px solid #000;
padding:10px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div contenteditable="true" id="data" type="text"></div>