Slate: Editor crashes when image is inserted and onchange called

[ravsas3]

hello, iam trying to implement a RTE using slate, but when inserting an image it is crasing in the editor on change part, with the error.

slate-react.es.js:1229 Uncaught Error: Unable to find a DOM node for . This is often because of forgetting to add props.attributes to a custom component.

Please suggest what i might be missing. i followed the link https://github.com/ianstormtaylor/slate/blob/master/examples/images/index.js to implement this.

[ericedem]

@ravsas3 Can you provide a fiddle demonstrating the issue? And example or screenshot would help a lot. Thanks!

[kayandra]

I think we have the same problem, but mine breaks whenever I try to delete the image

[isubasti]

@ianstormtaylor we should probably add document somewhere that says that now void node needs to be controlled through schema. without schema the node is not wrapped inside the data-slate-void span which cause crashing on selection. This has been reported several times either through github issue or slack.

[kayandra]

@isubasti Thanks, I declared schemata for the editor and for some reason didn't define one for images. Thank you

[danmckeon]

@isubasti Thank you!!! Oh man, I had been spinning my wheels on this for a long time. Defining the schema did the trick! Must not have read the docs closely enough. Thought that void nodes were just buggy and I was going to need to jury rig something through onKeyDown

[gnestor]

@isubasti Why does isVoid need to be defined in the schema for a block type if isVoid is passed as a property when creating a block? E.g.

change.setBlocks({ type: 'image', data: { src }, isVoid: true })

[kayandra]

@gnestor I think that has to do with the fact that even though it's defined during creation, it's not a part of the schema validation rules, so the validator will probably see it as an error. I think a reconciliation needs to happen when a user inserts a block like this

[isubasti]

@gnestor isVoid is no longer being used inside the block. if you open up your react devtool or print out the block props, it won't have isVoid anymore

[gnestor]

Ok so defining isVoid in the block/node properties isn't necessary anymore. Just in the schema?

[isubasti]

@gnestor indeed, only do it on the schema

[doneumark]

I'm having the exact same problem, I set the image like this:

change.insertInline({
    type: 'image',
    isVoid: true,
    data: { src: **url** },
}

And at the html rules I set inlines like this:

{
    object: 'inline',
    type,
    isVoid: type === 'image',
    nodes: next(el.childNodes),
    data: {
        href: el.getAttribute('href'),
        src: el.getAttribute('src'),
    },
};

What are the changes I should make in order to make this not crash?
Should I just delete the lines that references 'isVoid'?
I also did not defined a schema, what should it be for this usage?

[gnestor]

The schema should have at least the following:

const schema  = {
    blocks: {
        image: {
            isVoid: true
        }
    }
};

Inserting an image should look like:

change.insertInline({
    type: 'image',
    data: { src: **url** },
}

[ianstormtaylor]

I believe that this may be fixed by https://github.com/ianstormtaylor/slate/pull/3093, which has changed a lot of the logic in Slate and slate-react especially. I'm going to close this out, but as always, feel free to open a new issue if it persists for you. Thanks for understanding.