main
Walkthroughs
Concepts
Editor
All of the behaviors, content and state of a Slate editor is rolled up into a single, top-level
Editor object. It has an interface of:1
interface Editor {
2
// Current editor state
3
children: Node[]
4
selection: Range | null
5
operations: Operation[]
6
marks: Omit<Text, 'text'> | null
7
// Schema-specific node behaviors.
8
isInline: (element: Element) => boolean
9
isVoid: (element: Element) => boolean
10
normalizeNode: (entry: NodeEntry) => void
11
onChange: () => void
12
// Overrideable core actions.
13
addMark: (key: string, value: any) => void
14
apply: (operation: Operation) => void
15
deleteBackward: (unit: 'character' | 'word' | 'line' | 'block') => void
16
deleteForward: (unit: 'character' | 'word' | 'line' | 'block') => void
17
deleteFragment: () => void
18
insertBreak: () => void
19
insertSoftBreak: () => void
20
insertFragment: (fragment: Node[]) => void
21
insertNode: (node: Node) => void
22
insertText: (text: string) => void
23
removeMark: (key: string) => void
24
}
Copied!
It is slightly more complex than the others, because it contains all of the top-level functions that define your custom, domain-specific behaviors.
The
children property contains the document tree of nodes that make up the editor's content.The
selection property contains the user's current selection, if any. Don't set it directly; use Transforms.select​The
operations property contains all of the operations that have been applied since the last "change" was flushed. (Since Slate batches operations up into ticks of the event loop.)The
marks property stores formatting to be applied when the editor inserts text. If marks is null, the formatting will be taken from the current selection. Don't set it directly; use Editor.addMark and Editor.removeMark.Overriding Behaviors
In previous guides we've already hinted at this, but you can override any of the behaviors of an editor by overriding its function properties.
For example, if you want to define link elements that are inline nodes:
1
const { isInline } = editor
2
​
3
editor.isInline = element => {
4
return element.type === 'link' ? true : isInline(element)
5
}
Copied!
Or maybe you want to override the
insertText behavior to "linkify" URLs:1
const { insertText } = editor
2
​
3
editor.insertText = text => {
4
if (isUrl(text)) {
5
// ...
6
return
7
}
8
​
9
insertText(text)
10
}
Copied!
Or you can even define custom "normalizations" that take place to ensure that links obey certain constraints:
1
const { normalizeNode } = editor
2
​
3
editor.normalizeNode = entry => {
4
const [node, path] = entry
5
​
6
if (Element.isElement(node) && node.type === 'link') {
7
// ...
8
return
9
}
10
​
11
normalizeNode(entry)
12
}
Copied!
Whenever you override behaviors, be sure to call the existing functions as a fallback mechanism for the default behavior. Unless you really do want to completely remove the default behaviors (which is rarely a good idea).
Helper Functions
The
Editor interface, like all Slate interfaces, exposes helper functions that are useful when implementing certain behaviors. There are many, many editor-related helpers. For example:1
// Get the start point of a specific node at path.
2
const point = Editor.start(editor, [0, 0])
3
​
4
// Get the fragment (a slice of the document) at a range.
5
const fragment = Editor.fragment(editor, range)
Copied!
There are also many iterator-based helpers, for example:
1
// Iterate over every node in a range.
2
for (const [node, path] of Editor.nodes(editor, { at: range })) {
3
// ...
4
}
5
​
6
// Iterate over every point in every text node in the current selection.
7
for (const point of Editor.positions(editor)) {
8
// ...
9
}
Copied!
Last modified 2mo ago
Copy link