"Cannot resolve a Slate point from DOM point" for non-editable text rendered inside of Element

Do you want to request a feature or report a bug?

Bug

What’s the current behavior?

When selecting (supposed to be) non-editable text that is rendered inside of an element, I am seeing an error “Cannot resolve a Slate point from DOM point”. My usecase is to have a prefix that isn’t editable, but explains the purpose of the block.

Slate: 0.57.1 Browser: Chrome 79.0.3945.117 OS: MacOS 10.15.2 (19C57)

VM469:1691 Uncaught Error: Cannot resolve a Slate point from DOM point: [object Text],7
    at Object.toSlatePoint (eval at Dr (eval.js:61), <anonymous>:1691:13)
    at Object.toSlateRange (eval at Dr (eval.js:61), <anonymous>:1736:30)
    at HTMLDocument.eval (eval at Dr (eval.js:61), <anonymous>:800:43)
    at later (eval at Dr (eval.js:61), <anonymous>:27:23)
toSlatePoint @ VM469:1691
toSlateRange @ VM469:1736
eval @ VM469:800
later @ VM474:27
setTimeout (async)
later @ VM474:23
setTimeout (async)
later @ VM474:23
setTimeout (async)
later @ VM474:23
setTimeout (async)
debounced @ VM474:38

What’s the expected behavior?

To see no error, and have Slate ignore the non-editable text.

[hcharley]

This is kind of strange, but I think a hack solution is to use both a CSS style and an HTML attribute.

✅ For example, this works to render elements:

<div {...attributes}>
  <div
    style={{ userSelect: "none" }}
    contentEditable={false}
  >
    Non-editable
  </div>
  <p>{children}</p>
</div>

🛑 But oddly, this doesn’t work:

<div {...attributes}>
  <div
    contentEditable={false}
  >
    Non-editable
  </div>
  <p>{children}</p>
</div>

🛑 Nor does this:

<div {...attributes}>
  <div
    style={{ userSelect: "none" }}
  >
    Non-editable
  </div>
  <p>{children}</p>
</div>

I added these examples to the example code sandbox above.

I say this is a “hack solution” because ideally all you would need is contentEditable={false} to avoid this problem. An example usecase for this: you might want to let users select this non-editable text, and userSelect: none CSS prevents that.

NOTE: This does not seem to stop the error from happening when doubleclicking into a child, and selecting all of the text. It seems to sometimes stop it, but not always. This specifically stops the error from happening when selecting or clicking on the non-interactive text specfically.

[dark-swordsman]

I ran into this problem when rendering nothing in the slate component, since the introduction tutorial starts off with nothing in the useState([]). So I guess it tries to render an empty array, but has nothing to put the values into at the start.

To solve this, I set this as the default value:

  const [value, setValue] = useState<Descendant[]>([
    {
      type: "paragraph",
      children: [{ text: "" }],
    },
  ]);