Plate
Plate
is the core component controlling the
Slate
props, the Editable
props and the plate store.
#
Plate Propsid
#
- A unique id used to store the editor state by id.
- Required if rendering multiple
Plate
. Optional otherwise. - Default is
'main'
.
children
#
- The last children rendered inside
Slate
, afterEditable
.
disableCorePlugins
#
- If
true
, disable all the core plugins. - If an object, disable the core plugin properties that are
true
in the object.
editableProps
#
- The props for the
Editable
component.
editableRef
#
- Ref to the
Editable
component.
editor
#
- Controlled
editor
. - Default is
pipe(createTEditor(), withPlate({ id, plugins }))
.
enabled
#
- When
true
, Plate will set the editor. - When updating to
false
, Plate will remove the editor from the store. - When
false
, Plate will not renderEditable
. - Default is
true
.
firstChildren
#
- The first children rendered inside
Slate
, beforeEditable
. - Slate DOM is not yet resolvable on first render, for that case use
children
instead.
initialValue
#
- Initial value of the editor.
- Default is
[{ children: [{ text: '' }]}]
.
normalizeInitialValue
#
- When
true
, it will normalize the initial value passed to theeditor
once it gets created. - This is useful when adding normalization rules on already existing content.
- Default is
false
.
onChange
#
- See onChange.
plugins
#
- Plate plugins.
- See Plugins.
renderEditable
#
- Custom
Editable
node. - Default is
<Editable {...editableProps} />
.
renderElement
#
- See renderElement.
renderLeaf
#
- See renderLeaf.
value
#
- Editor
value
. - Stored in the store on each change (
Editable.onChange
). - Except when resetting the editor with
resetEditor
, you should not directly update the value as it would break the history. - If you want to update
value
with history support, you should use Slate transforms likeTransforms.setNodes
. - Default is
[{ children: [{ text: '' }]}]
.
#
Slate PropsPlate
computes the Slate
props:
key
#
Slate - Each time the editor reference updates, a new random key is set
to
Slate
to unmount and mount again the component.
editor
#
Slate Slate
needs aneditor
object to apply its operations on it.
onChange
#
Slate Callback called by Slate
on each change:
- The new value is stored in plate store.
- Pipes
onChange
plugins. onChange
prop is called if defined.
#
Editable PropsIn addition to editableProps
, Plate
computes the Editable
props if editor
is defined.
decorate
#
Editable - Pipes
decorate
plugins. - Adds
editableProps.decorate
if defined.
renderElement
#
Editable - If plugin
isElement
istrue
and if plugintype
equalsprops.element.type
, it will render an element using the following plugin properties:inject.props
to inject rendering props.component
to render the element.inject.aboveComponent
to inject a component abovecomponent
.inject.belowComponent
to inject a component belowcomponent
.
- If no plugin is found for a node type,
editableProps.renderElement
is used if defined. - If the latter is not defined,
DefaultElement
is used (unstyleddiv
).
renderLeaf
#
Editable - If plugin
isLeaf
istrue
and if plugintype
equalsprops.leaf.type
, it will render a leaf using the following plugin properties:inject.props
to inject rendering props.component
to render the leaf.
- If no plugin is found for a node type,
editableProps.renderLeaf
is used if defined. - If the latter is not defined,
DefaultLeaf
is used (unstyledspan
).
#
Handlers- Pipes DOM handlers plugins, e.g.
onDOMBeforeInput
,onKeyDown
,` etc.