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.

About the author

Danyal

I'm working as programmer since 2002. Born, grew up, studied and worked in Pakistan now Im located in Denmark since 2006.

View all posts