При использовании contenteditable и replace( ) с вводом данных происходит что-то странное?

Нужна имитация работы <input> блока, для того, чтобы заменять ( выделять, подчеркивать, менять фон текста ) "налету", т.е. когда я печатаю что-либо в этом блоке! Но по неведомой мне причине, в блоке <div> с атрибутом contenteditableпочему-то происходит перестановка курсора при вводе текста в поле в самое начало этого поля, именно при использовании replace()

let t = document.querySelector('.t');

t.addEventListener('keyup', (e)=>{
    e.target.innerHTML = e.target.textContent.replace(
            /is/gim,
        (p)=>{
            return `<span style='color: red;'>${p}</span>`;
        }
    );
});

.t{
  width: 200px;
  height: 30px;
  border: 1px solid;
}

<div class="t" contenteditable></div>

Это баг? Или это поведение, которое кажется не логичным только мне? В любом случае, думаю моя цель вам ясна, поэтому если есть решение, буду рад его услышать, мне нужно чтобы некоторые замэтченные слова ( ну или просто регулярки ) выделялись нужным мне цветом в тексте!