Changing HTML code in summernote as you type without losing focus

After triggering the keyUp event, I want to check the current text (something like a spell checker). The problem is that every time I lose my editor focus and last cursor position. I have built a method that returns validated HTML code. The new HTML contains the verified text with its errors wrapped in <span class='error'></span>

. In theory, I should replace the old HTML with the new one. But it's not that easy:

Simplified example:

Text without validation (raw Text): This is an example for an eror

Validated text (HTML): This is an example for an <span class='error'>eror</span>

View:

Simplified codes:

function validate(text){
    //some code
    return new_html;
}

function onKeyUpSummernote(){
    var text = jQuery(summernote("code")).text();
    var new_html = validate(text);
    summernote("saveRange");
    summernote("code", new_html);
    summernote("focus");
    summernote("restoreRange");
}

      

        
        
        
      

    

But it doesn't work because I am getting the following error: The given range isn't in document.

How to change html code after KeyUp and set cursor to last position? Is there a better way to do this?