Pass selectionPosition Prop To Nodes

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

Feature

What’s the current behavior?

Currently, nodes get an isSelected prop which is true if and only if the selection resides within the node. It seems that the selection for inline nodes is considered within the node if the cursor falls within [startOfNode, endOfNode) (i.e. if the cursor is at the right edge of the node, the selection is considered to be at the start of the next node). This makes it impossible for nodes to know if the cursor lives at their right edge (short of always updating in shouldComponentUpdate and checking the current value of editor.value.selection, which is performance prohibitive for large documents).

What’s the expected behavior?

Something like this was considered in #1125 (the proposal was making isSelected an enum of sorts).

I’d like to add a prop along the same lines named selectionPosition (or a different name) that takes on enum values to signify where the selection lies.

const enum SelectionPosition {
  LeftEdge,
  RightEdge,
  Within, // includes when selection is expanded but start and/or end is at edge
  Outside, // or pass prop as null
}

This would leave the existing behavior of isSelected in place.

I’d be happy to create a pull request if you think that this sounds okay. It’d be a few extra lines of code around the render and renderNode methods of Content, plus PropTypes for Node.

P.S. Seems like this would only actually be useful for inline nodes since the selection is still contained within a block node when the caret is at the right-most (assuming LTR) position.

[ianstormtaylor]

Thanks for mocking up the idea in #1918 @travigd! I definitely want to help make this use case easier to solve. That said, I’m feeling some unease with this…

I think it might be something that is better exposed as a method (or set of methods) on the Range object, since it feels like trying to distill it to a single enum is going to be hard and only cater to some use cases.

I often try to base things off of equivalent native DOM methods, since I figure the browser vendors have needed to solve issues like these. For context, here are a bunch that might or might not be related:

• Selection.containsNode(node, partial)
• Range.compareBoundaryPoints(how, range)
• Range.comparePoint(node, offset)
• Range.intersectsNode(node)
• Range.isPointInRange(node, offset)

Not that one of these necessarily solves this issue exactly, but I wonder if there are a set of methods we could devise that are similar to these that would solve this issue, and other issues like it that people using Slate might have. Any ideas?

[ianstormtaylor]

This is still not possible as mentioned. But in the newest version of Slate you can use the useSlate hook to re-render whenever the editor changes. If used only inside rare inline elements I think it would be alright performance wise. I think that’s the best we’re going to do on this front, so closing this out.