Slate Editor Issue: Cannot resolve a DOM point from Slate point: {"path":[0,0],"offset":30}

Question

Description: The error is thrown when I add a custom link into a slate editor at current cursor position and use tab or space after the inserted link.

This is the code I am using to add my custom link DOM element into slate editor at current cursor position.

window.addEventListener("message", (event) => {
  var linkDOMElement = document.getElementById('insertLink');
  if (!linkDOMElement) {
    var range;
    if (event.data && (typeof event.data === 'string' || event.data instanceof String) && event.data.includes("atProspectId") && window.getSelection) {
      var range = window.getSelection().getRangeAt(0);
      var html = event.data;

      // create a span dom element
      var newElement = document.createElement('span');
      newElement.id = 'insertLink';
      newElement.innerHTML = html;

      // insert created dom element named newElement at current cursor position
      range.insertNode(newElement);
    }
  }
}, false);

Scenario: We have a script which attaches our custom icon to the outreach email editor and apparently outreach email editor uses slate editor. After clicking upon this icon, it opens our extension application in a new tab[for now]. If user clicks on "INSERT LINK" button, link should be inserted at current cursor position which is happening as expected. But, I am unable to click the link and write any texts further after the insertion. If I use space or tab after the link insertion, this error shows up. You could see this clearly in the attached video.

Environment:

Slate Version: No idea as this is happening in third party website Operating System: Windows Browser: Chrome

To see how the above error is thrown, you could click on the following link and watch 43 secs video.

https://user-images.githubusercontent.com/86764119/146716602-657bf5ce-535a-4bdb-bb36-64c3fbb8d548.mp4

Athalia

Answer 1

Try setting contentEditable to false and the userSelect CSS property to 'none'.

Before range.insertNode, add the following code:

newElement.contentEditable = 'true';
newElement.style.userSelect = 'none';

In this GitHub issue, the Slate developers explain that you have to set these properties to avoid this error.

Pyemia

I'm a bit confused - in the text you say contentEditable should be false but in the code sample you set it to true (in fact you set it to the string 'true' rather than a boolean value) – Indolent

Answer 2

I fixed it by adding css to

I fixed it by adding css to span[data-slate-node="text"] {
display: inline-block;
width: 100%;
}

and then clicking multiple times no longer has the full page error

Glad