Replace Last Character While User Typing In Contenteditable Div

I found, somewhere in SE, a code to insert text in contenteditable by Tim Down. The code looks like the following and is working perfect. But I want to add a condition that is base

Solution 1:

In place of the following:

//Check value of stepback: 0 or 1if(!stepback)//if 0
     range.insertNode(textNode);
if(stepback){ //if 1// replace the previously inserted character with the new one here

}

use the following code:

// This clones the selected range and then selects 1// 1 character in the backward direction and deletes it.if(stepback){
    clone = range.cloneRange();
    clone.setStart(range.startContainer, range.startOffset - 1);
    clone.setEnd(range.startContainer, range.startOffset);
    clone.deleteContents();
}
range.insertNode(textNode);

This ensures that the new translated character is always added at the end while optionally removing the 1 character in case stepback is required.

UPDATE: I have tested this in Chromium only.