Slate 编辑器问题：无法从 Slate 点解析 DOM 点：{"path":[0,0],"offset":30}

Question

说明： 当我在当前光标位置将自定义链接添加到板岩编辑器并在插入的链接后使用制表符或空格时，会引发错误。

这是我用来将自定义链接 DOM 元素添加到当前光标位置的板岩编辑器中的代码。

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);

场景： 我们有一个脚本，将自定义图标附加到外展电子邮件编辑器，显然外展电子邮件编辑器使用板岩编辑器。单击此图标后，它会在新选项卡中打开我们的扩展应用程序[暂时]。如果用户单击“插入链接”按钮，则应将链接插入到当前光标位置，这将按预期发生。但是，我无法单击链接并在插入后进一步写入任何文本。如果我在链接插入后使用空格或制表符，则会出现此错误。您可以在随附的视频中清楚地看到这一点。

环境：

Slate 版本：不知道，因为这发生在第三方网站上 操作系统：Windows 浏览器：Chrome

要查看上述错误是如何引发的，您可以点击以下链接并观看 43 秒的视频。

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

Answer 1

尝试将

contentEditable

设置为

false

并将

userSelect

CSS 属性设置为

'none'

。

在

range.insertNode

之前添加以下代码：

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

在此 GitHub 问题中，Slate 开发人员解释说您必须设置这些属性以避免此错误。

Answer 2

我通过添加 css 来修复它

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

然后多次点击不再出现整页错误