Locations
Locations are how you refer to specific places in the document when inserting, deleting, or doing anything else with a Slate editor. There are a few different kinds of location interfaces, each for different use cases.
Path
Path
Paths are the lowest-level way to refer to a location. Each path is a simple array of numbers that refers to a node in the document tree by its indexes in each of its ancestor nodes down the tree:
For example, in this document:
The leaf text node would have a path of: [0, 0]
.
The Editor itself has a path of []
. For example, to select the whole contents of the editor, call Transforms.select(editor, [])
Point
Point
Points are slightly more specific than paths, and contain an offset
into a specific text node. Their interface is:
For example, with that same document, if you wanted to refer to the very first place you could put your cursor it would be:
Or, if you wanted to refer to the end of the sentence:
It can be helpful to think of points as being "cursors" (or "carets") of a selection.
🤖 Points always refer to text nodes! Since they are the only ones with strings that can have cursors.
Range
Range
Ranges are a way to refer not just to a single point in the document, but to a wider span of content between two points. (An example of a range is when you make a selection.) Their interface is:
An anchor and focus are established by a user interaction. The anchor point isn't always before the focus point in the document. Just like in the DOM, the ordering of an anchor and selection point depend on whether the range is backwards or forwards.
Here's how Mozilla Developer Network explains it:
One important distinction is that the anchor and focus points of ranges always reference the leaf-level text nodes in a document and never reference elements. This behavior is different than the DOM, but it simplifies working with ranges as there are fewer edge cases for you to handle.
Selection
Ranges are used in many places in Slate's API when you need to refer to a span of content between two points. One of the most common, though, is the user's current "selection".
The selection is a special range that is a property of the top-level Editor
. For example, say someone has the whole sentence currently selected:
There isn't a special Selection
interface. It's just an object that happens to respect the more general-purpose Range
interface instead.
For example, to find the lowest block that contains all of the current selection:
Last updated