Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Cannot resolve a DOM node from Slate node: {"text":""}

See original GitHub issue

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


What’s the current behavior?

Transforms.insertNodes(props.editor, [{
      type: 'image',
      src: url,
      children: [{text: ''}]

After inserting an image as a void node, and then clicking the image, the editor throws the error

Cannot resolve a DOM node from Slate node: {"text":""}

The resulting editor state when inserting an image:

[{type: 'image', src: '', children: [{text: ''}]}]

The resulting DOM:

<img data-slate-node="element" data-slate-void="true" src="">

The area of the code responsible for determining focus is where the error is thrown:

Unless I am missing something, this bug doesn’t make a whole lot of sense. I will keep poking around, but unfortunately the documentation seems very sparse after the latest update, so I am not sure what’s up or down any more. Lots of outdated information floating around.

Slate: 0.59.0 Browser: Chrome OS: Mac

What’s the expected behavior?

Either nothing happens, or the cursor just rests on either side of the image.

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:9
  • Comments:6 (1 by maintainers)

github_iconTop GitHub Comments

Casencommented, Nov 6, 2020

Thanks for chiming in @AlfonzAlfonz !

I discovered this as well by digging into one of the hosted example projects. The documentation is just not very clear about how to handle void elements

const ImageElement = ({ attributes, children, element }) => {
    const selected = useSelected()
    const focused = useFocused()
    return (
        <div {...attributes}>
            <div contentEditable={false}>
                      display: 'block',
                      maxWidth: '550px',
                      maxHeight: '20em',
                      boxShadow: `${selected && focused ? '0 0 0 3px #B4D5FF' : 'none'}`

As you mentioned, {children} must be passed. The outermost div must have the attributes rendered, followed by a div with contentEditable={false}, followed finally by an image tag. The children being rendered in the within the outermost div.

AlfonzAlfonzcommented, Nov 6, 2020

I’ve run into the same problem, but I’ve managed to fix it by rendering {children} somewhere in my void element.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Error: Cannot resolve a DOM point from Slate point
In my case, I was taking a populated editor with a bunch of text and tried to reset it back to it's original...
Read more >
Slate Editor Issue: Cannot resolve a DOM point from Slate ...
This is the code I am using to add my custom link DOM element into slate editor at current cursor position. window.addEventListener("message", ( ......
Read more >
Slate Editor Issue: Cannot resolve a DOM point from ... - Reddit
innerHTML = html; // insert created dom element named newElement at current cursor position range.insertNode(newElement); } } }, false);.
Read more >
Nodes - Slate
And leaf-level Text nodes which contain the document's text. These three interfaces are combined to form a tree—just like the DOM. For example,...
Read more >
slate-react - UNPKG
hasInlines(editor, element)) {\n const text = Node.string(element)\n const ... if (!domPoint) {\n throw new Error(\n `Cannot resolve a DOM point from Slate ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found