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 a skilled programmer specializing in Vue.js/Nuxt.js for front-end development and PHP Laravel for back-end solutions. I have a strong focus on API design and development, complemented by experience in web server setup and maintenance. My versatile expertise ensures seamless creation and maintenance of web applications, covering everything from intuitive user interfaces to robust server-side functionality. Passionate about coding and driven by a lifelong learning mindset, I invite you to explore more at danyal.dk.