Element
Last updated
Last updated
Element
objects are a type of Node
in a Slate document that contain other Element
nodes or Text
nodes.
Element nodes behave differently depending on the . An element can be:
"block" or "inline" as defined by editor.isInline
either "void" or "not void" as defined by editor.isVoid
A "block" element can only be siblings with other "block" elements. An "inline" node can be siblings with Text
nodes or other "inline" elements.
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.
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:
For a "markable" void such as a mention
element, marks on the empty child element can be used to determine how the void element is rendered (Slate Marks are applied only to Text leaves):
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.
Element.isAncestor(value: any) => value is Ancestor
Check if a value implements the 'Ancestor' interface.
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.
Element.isElementType<T Extends Element>(value: any, elementVal: string, ElementKey: string = 'type'): value is T
Check if a value implements the Element
interface and has elementKey with selected value. Default it check to type
key value
Some void elements are effectively stand-ins for text, such as with the example, where the mention element renders the character's name. Users might want to format Void elements like this with bold, or set their font and size, so editor.markableVoid
tells Slate whether or not to apply Marks to the text children of void elements.