change void nodes to pass the spacer as `props.children`

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

Improvement.

What’s the current behavior?

Right now when rendering a void node, Slate wraps the node in a <div> or <span> so that it can put a “spacer” next to it. This is needed to capture the browser’s native selection behavior, since the void node has contenteditable="false".

However, this also means that you can’t control the top-level element that is rendered in the editor. Which is unfortunate in many use cases. For example one where you want to style adjacent void nodes. You can’t just use the & + & CSS selector, since they aren’t actually adjacent in the DOM.

What’s the expected behavior?

I think…

We could solve this by passing the spacer as props.children, and requiring that users render it in their void node. (This is even more consistent with how we render non-void nodes actually.)

Similarly, we’d add the contenteditable="false" to the props.attributes, which would ensure that the top-level element of the void node remains ineditable.

[ianstormtaylor]

@adjourn you’re right. It would technically mean that at render-time the only difference between voids and non-voids is that the “spacer” content is added to props.children instead of the real content. Which is actually kind of cool, and unlocks some potentially advanced use cases I think.

And then the isVoid() query is mainly not a rendering construct, but a behavioral construct, to ensure that editing works as expected with void nodes (namely that their content is treated as atomic/un-editable).

[bengotow]

Hey thanks for the reply! It looks like my problem was that I was upgrading from an older version of Slate to the latest version and didn’t realize that isVoid: true must now be specified in the schema and not on Block objects directly. The void node I was debugging was actually behaving as non-void and had a single child text node. Thanks!