Element API
Element objects are a type of Node in a Slate document that contain other Element nodes or Text nodes.
interface Element {
children: Node[]
}- Behavior TypesBehavior Types
- Block vs. InlineBlock vs. Inline
- Void vs Not VoidVoid vs Not Void
- Rendering Void ElementsRendering Void Elements
- Static methodsStatic methods
- Retrieval methodsRetrieval methods
- Check methodsCheck methods
Element Behavior Types
Element nodes behave differently depending on the Slate editor's configurationSlate editor's configuration. An element can be:
- "block" or "inline" as defined by editor.isInline
- either "void" or "not void" as defined by editor.isVoid
Block vs. Inline
A "block" element can only be siblings with other "block" elements. An "inline" node can be siblings with Text nodes or other "inline" elements.
Void vs Not Void
In a not "void" element, Slate handles the rendering of its children (e.g. in a paragraph where the Text and Inline children are rendered by Slate). In a "void" element, the children are rendered by the Element's render code.
Rendering Void Elements
Void Elements must
- always have one empty child text node (for selection)
- render using attributes and children (so, their outermost HTML element can't be an HTML void element)
- set contentEditable={false} (for Firefox)
Typical rendering code will resemble this thematic-break (horizontal rule) element:
return (
<div {...attributes} contentEditable={false}>
{children}
<hr />
</div>
)Static methods
Retrieval methods
Element.matches(element: Element, props: Partial<Element>) => boolean
Check if an element matches a set of props. Note: This checks custom properties, but it does not ensure that any children are equivalent.
Check methods
Element.isElement(value: any) => value is Element
Check if a value implements the Element interface.
Element.isElementList(value: any) => value is Element[]
Check if a value is an array of Element objects.