Slate: Is there a better way to handle void nodes?

[thesunny]

Hi Ian,

I had a thought I'd like to share and forgive me if I'm misunderstanding the issue.

I'm just putting this out there as I think there may be an inherent mismatch between the way we expect void nodes to work and how they are represented internally. I believe this may be creating edge cases and increasing code complexity.

The following issue made me write this post but I believe I've seen similar issues surrounding void blocks:

https://github.com/ianstormtaylor/slate/issues/660

From my understanding, void nodes are represented as a block node that contains a single character (with void set to true).

When the selection is within the void block, our expected behavior is that the void block is selected (even though in reality the character isn't selected). For example, if the void block was an image, the UI would show the image is selected and if I hit backspace or delete the void block would be deleted.

This is inherently different than the behavior of a single character where upon entering the void block, the cursor is typically either before or after that single character. What happens on backspace or delete would depend on whether the cursor was before or after the character. It would only be after we SHIFT-LEFT or SHIFT-RIGHT to select the character that we would see this behavior.

I do understand that Slate handles this behavior correctly but I think it's handling this as a special edge case around void blocks. If not, my post may be moot. :)

It feels like it would be more consistent that as soon as we enter a void node, the entire character is immediately selected. Then, backspace and delete would work correctly as would (I presume) cut and paste with void blocks.

There would need to be special handling around SHIFT-RIGHT/LEFT/UP/DOWN and mouse selection because the actual anchor may be before or after the single character otherwise extending it in the wrong direction may unselect the anchor void block. However, I feel like this puts the special handling in the right place.

Another option is to remove the character since, well, void blocks are special so why not just be explicit around it's difference in the code.

Either way, I do feel like there is a lack of documentation around void blocks. They are so integral to SlateJS but they seem to have little documentation around them. I'd be happy to spend some time documenting them but I wouldn't mind having a short talk (perhaps by Skype or on Slack voice or other) to make sure I'm understanding what's going on without dissecting the source code in its entirety.

[bunterWolf]

hey,
I don't have a strong opinion on that topic right now. But I like to share my use of that single space character.

With the space, im able to create a fake cursor (blinking border) on void blocks. This makes it easier for the user to add text where he wants. The Block is marked as selected if the space is wrapped by the selection. (My blocks are undeletable)

I think for my (maybe very special?) use case, the space very cool ;)

• I will share the code if you find that interesting
• I feel that lack of documentation too. But someone has to do it.. :)

[ianstormtaylor]

Hey @thesunny thanks for opening this! I actually agree that something about void nodes feels off, but I'm not sure what. There is also a chance that it's just a necessary complexity that the core code has to suffer to make the void use case easier for others.

For the "space or not" discussion, I was actually thinking that the _ideal_ way to handle a void block's content would be for Slate to be unopinionated about what the actual text content of a void block was. Such that you could use the content however you wanted. For @bunterWolf this means that he could add the spaces to get his behavior. But for others, they could use the void text as an alt= property for images (or other types of content) that renders out in plaintext mode.

That said, I think the idea of...

as soon as we enter a void node, the entire [range of the node] is immediately selected

...is a really good one. That seems like a good way to handle that. I'd absolutely be open to a PR that implements that logic.

For further ideas, since void nodes are based on how HTML also has void nodes, there might be some good things to be learned from reading more about how HTML/DOM handles them, if someone wanted to research and report back.

[tobiastheil]

@bunterWolf Could you please share your code for the single space character? That would be so great!

[bunterWolf]

In short, everybody can find it here: https://github.com/jakoblo/ufo/blob/master/src/js/view-folder/view-folder-editor/slate-extensions/slate-file/slate-file-plugin.js

[ianstormtaylor]

I think most of this is solved now, but feel free to open a new issue with any new ideas, or any pieces that are still an issue!