main
Walkthroughs
Concepts
Transforms
Slate's data structure is immutable, so you can't modify or delete nodes directly. Instead, Slate comes with a collection of "transform" functions that let you change your editor's value.
Slate's transform functions are designed to be very flexible, to make it possible to represent all kinds of changes you might need to make to your editor. However, that flexibility can be hard to understand at first.
Typically, you'll apply a single operation to zero or more Nodes. For example, here's how you flatten the syntax tree, by applying
unwrapNodes to every parent of block Elements:1
Transforms.unwrapNodes(editor, {
2
at: [], // Path of Editor
3
match: node =>
4
!Editor.isEditor(node) &&
5
node.children?.every(child => Editor.isBlock(editor, child)),
6
mode: 'all', // also the Editor's children
7
})
Copied!
Non-standard operations (or debugging/tracing which Nodes will be affected by a set of NodeOptions) may require using
Editor.nodes to create a JavaScript Iterator of NodeEntries and a for..of loop to act. For example, to replace all image elements with their alt text:1
const imageElmnts = Editor.nodes(editor, {
2
at: [], // Path of Editor
3
match: (node, path) => 'image' === node.type,
4
// mode defaults to "all", so this also searches the Editor's children
5
})
6
for (const nodeEntry of imageElmnts) {
7
const altText =
8
nodeEntry[0].alt ||
9
nodeEntry[0].title ||
10
/\/([^/]+)$/.exec(nodeEntry[0].url)?.[1] ||
11
'☹︎'
12
Transforms.select(editor, nodeEntry[1])
13
Editor.insertFragment(editor, [{ text: altText }])
14
}
Copied!
Selection Transforms
Selection-related transforms are some of the simpler ones. For example, here's how you set the selection to a new range:
1
Transforms.select(editor, {
2
anchor: { path: [0, 0], offset: 0 },
3
focus: { path: [1, 0], offset: 2 },
4
})
Copied!
But they can be more complex too.
For example, it's common to need to move a cursor forwards or backwards by varying distances—by character, by word, by line. Here's how you'd move the cursor backwards by three words:
1
Transforms.move(editor, {
2
distance: 3,
3
unit: 'word',
4
reverse: true,
5
})
Copied!
Text Transforms
Text transforms act on the text content of the editor. For example, here's how you'd insert a string of text as a specific point:
1
Transforms.insertText(editor, 'some words', {
2
at: { path: [0, 0], offset: 3 },
3
})
Copied!
Or you could delete all of the content in an entire range from the editor:
1
Transforms.delete(editor, {
2
at: {
3
anchor: { path: [0, 0], offset: 0 },
4
focus: { path: [1, 0], offset: 2 },
5
},
6
})
Copied!
Node Transforms
Node transforms act on the individual element and text nodes that make up the editor's value. For example you could insert a new text node at a specific path:
1
Transforms.insertNodes(
2
editor,
3
{
4
text: 'A new string of text.',
5
},
6
{
7
at: [0, 1],
8
}
9
)
Copied!
Or you could move nodes from one path to another:
1
Transforms.moveNodes(editor, {
2
at: [0, 0],
3
to: [0, 1],
4
})
Copied!
The at Option
at OptionMany transforms act on a specific location in the document. By default, they will use the user's current selection. But this can be overridden with the
at option.For example when inserting text, this would insert the string at the user's current cursor:
1
Transforms.insertText(editor, 'some words')
Copied!
Whereas this would insert it at a specific point:
1
Transforms.insertText(editor, 'some words', {
2
at: { path: [0, 0], offset: 3 },
3
})
Copied!
The
at option is very versatile, and can be used to implement more complex transforms very easily. Since it is a Location it can always be either a Path, Point, or Range. And each of those types of locations will result in slightly different transformations.For example, in the case of inserting text, if you specify a
Range location, the range will first be deleted, collapsing to a single point where your text is then inserted.So to replace a range of text with a new string you can do:
1
Transforms.insertText(editor, 'some words', {
2
at: {
3
anchor: { path: [0, 0], offset: 0 },
4
focus: { path: [0, 0], offset: 3 },
5
},
6
})
Copied!
Or, if you specify a
Path location, it will expand to a range that covers the entire node at that path. Then, using the range-based behavior it will delete all of the content of the node, and replace it with your text.So to replace the text of an entire node with a new string you can do:
1
Transforms.insertText(editor, 'some words', {
2
at: [0, 0],
3
})
Copied!
These location-based behaviors work for all the transforms that take an
at option. It can be hard to wrap your head around at first, but it makes the API very powerful and capable of expressing many subtly different transforms.The match Option
match OptionMany of the node-based transforms take a
match function option, which restricts the transform to only apply to nodes for which the function returns true. When combined with at, match can also be very powerful.For example, consider a basic transform that moves a node from one path to another:
1
Transforms.moveNodes(editor, {
2
at: [2],
3
to: [5],
4
})
Copied!
Although it looks like it simply takes a path and moves it to another place. Under the hood two things are happening…
First, the
at option is expanded to be a range representing all of the content inside the node at [2]. Which might look something like:1
at: {
2
anchor: { path: [2, 0], offset: 0 },
3
focus: { path: [2, 2], offset: 19 }
4
}
Copied!
Second, the
match option is defaulted to a function that only matches the specific path, in this case [2]:1
match: (node, path) => Path.equals(path, [2])
Copied!
Then Slate iterates over the range and moves any nodes that pass the matcher function to the new location. In this case, since
match is defaulted to only match the exact [2] path, that node is moved.But what if you wanted to move the children of the node at
[2] instead?You might consider looping over the node's children and moving them one at a time, but this gets very complex to manage because as you move the nodes the paths you're referring to become outdated.
Instead, you can take advantage of the
at and match options to match all of the children:1
Transforms.moveNodes(editor, {
2
// This will again be expanded to a range of the entire node at `[2]`.
3
at: [2],
4
// Matches nodes with a longer path, which are the children.
5
match: (node, path) => path.length === 2,
6
to: [5],
7
})
Copied!
Here we're using the same
at path (which is expanded to a range), but instead of letting it match just that path by default, we're supplying our own match function which happens to match only the children of the node.Using
match can make representing complex logic a lot simpler.For example, consider wanting to add a bold mark to any text nodes that aren't already italic:
1
Transform.setNodes(
2
editor,
3
{ bold: true },
4
{
5
// This path references the editor, and is expanded to a range that
6
// will encompass all the content of the editor.
7
at: [],
8
// This only matches text nodes that are not already italic.
9
match: (node, path) => Text.isText(node) && node.italic !== true,
10
}
11
)
Copied!
When performing transforms, if you're ever looping over nodes and transforming them one at a time, consider seeing if
match can solve your use case, and offload the complexity of managing loops to Slate instead. The match function can examine the children of a node, in node.children, or use Node.parent to examine its parent.Transforms and Normalization
Sequences of Transforms may need to be wrapped in
Editor.withoutNormalizing if the node tree should not be normalized between Transforms. See Normalization - Implications for Other Code;Last modified 5mo ago