Error: Cannot resolve a DOM point from Slate point: {“path”:[0,0],”offset”:25}

Note that this existing post Slate Editor Issue: Cannot resolve a DOM point from Slate point: {“path”:[0,0],”offset”:30} does not work for me.

I’m trying to replace user selected text with some other text. For example, in this sentence, the user selected “have” like this:

And I want a chrome extension that replaces the selected text with “had”. Every time I do it, when I click off the text editor and click back in, it throws the error in the title and the text goes back to the old one.

My code:

const correctedText = "had";
const activeElement = document.activeElement;
const selectionStart = activeElement.selectionStart;
const selectionEnd = activeElement.selectionEnd;
const selection = window.getSelection();
if (selection.rangeCount > 0) {
    const range = selection.getRangeAt(0);
    range.deleteContents();

    newTextElement = document.createElement('span');
    newTextElement.textContent = correctedText;
    newTextElement.contentEditable = false;
    newTextElement.style.userSelect = 'none';
    range.insertNode(newTextElement);
    selection.removeAllRanges();
    range.setStart(range.startContainer, range.startOffset + correctedText.length);
    selection.addRange(range);
}

As you can see, I already set contentEditable to false and userSelect to none, but it quite literally does not work. You can try this code in discord or reddit to see for yourself.