Fixed CKEditor5 doesn’t record space, backspace or enter on Chrome 80

CKEditor5 behaves strange, some time it doesn’t allow to press backspace button, on some machines space doesn’t work. And sometimes it just shuffles the text on Chrome 80.

If you are facing a same situation and getting on of following errors

domconverter.js:280 Uncaught DOMException: Failed to execute 'setStart' on 'Range': The offset 158 is larger than the node's length (157).
    at rr.viewRangeToDom (https://cdn.ckeditor.com/ckeditor5/12.0.0/classic/ckeditor.js:5:168912)
    at js.scrollToTheSelection (https://cdn.ckeditor.com/ckeditor5/12.0.0/classic/ckeditor.js:5:194120)
    at ro.<anonymous> (https://cdn.ckeditor.com/ckeditor5/12.0.0/classic/ckeditor.js:5:368982)
    at ro.fire (https://cdn.ckeditor.com/ckeditor5/12.0.0/classic/ckeditor.js:5:104559)
    at ro.<anonymous> (https://cdn.ckeditor.com/ckeditor5/12.0.0/classic/ckeditor.js:5:367750)
    at ro.fire (https://cdn.ckeditor.com/ckeditor5/12.0.0/classic/ckeditor.js:5:104559)
    at es.fire (https://cdn.ckeditor.com/ckeditor5/12.0.0/classic/ckeditor.js:5:182838)
    at es.onDomEvent (https://cdn.ckeditor.com/ckeditor5/12.0.0/classic/ckeditor.js:5:182970)
    at dr.listenTo.useCapture (https://cdn.ckeditor.com/ckeditor5/12.0.0/classic/ckeditor.js:5:182749)
    at dr.fire (https://cdn.ckeditor.com/ckeditor5/12.0.0/classic/ckeditor.js:5:104559)

I reported the issue on github:ckeditor/ckeditor5, and got some useful information and found possible patch for this issue.

Quick fix would be to download ckeditor.js from https://cdn.ckeditor.com/ckeditor5/16.0.0/classic/ckeditor.js and replace following method with patch.

Here is the workaround proposed by @wojciechkoszyk works
https://github.com/ckeditor/ckeditor5/issues/6222#issuecomment-584594975

Replace this:

getNodeStartOffset(t) {
  const e = this.getNodeIndex(t);
  return null === e ? null : this._nodes.slice(0, e).reduce((t, e) => t + e.offsetSize, 0)
}

With:

getNodeStartOffset(t) {
  const index = this.getNodeIndex(t);
  return index === null ? null : sum(this._nodes.slice(0, index));

  function sum(nodes) {
      var sum = 0;
      nodes.forEach(node => {
          sum += node.offsetSize;
      });
      return sum;
  }
}

This will solve the issue for now until Chrome new version is released.

Author: Danyal
I'm skilled programmer with expertise in Vue.js/Nux.js for front-end development and PHP Laravel for back-end development. I excel in building APIs and services, and also have experience in web server setup & maintenance. My versatile skill set allows you to develop and maintain web applications effectively, from the user interface to the server-side functionality. I love coding with never ending learning attitude, thanks for visiting danya.dk