Skip to main content

Plate

Plate is the core component controlling the Slate props, the Editable props and the plate store.

Plate Props#

id#

  • A unique id used to store the editor state by id.
  • Required if rendering multiple Plate. Optional otherwise.
  • Default is 'main'.

children#

  • The children rendered inside Slate before the Editable component.

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.

editor#

  • Controlled editor.
  • Default is createEditor().

enabled#

  • When false, the editor is not rendering.
  • Default is true.

initialValue#

  • Initial value of the editor.
  • Default is [{ children: [{ text: '' }]}].

normalizeInitialValue#

  • When true, it will normalize the initial value passed to the editor once it gets created.
  • This is useful when adding normalization rules on already existing content.
  • Default is false.

onChange#

plugins#

  • Plate plugins.

renderEditable#

  • Custom Editable node.
  • Default is <Editable {...editableProps} />.

renderElement#

renderLeaf#

value#

  • Controlled value.
  • Default is the store value.

Slate Props#

Plate computes the Slate props:

key#

  • Each time the editor reference updates, a new random key is set to Slate to unmount and mount again the component.

editor#

  • Slate needs an editor object to apply its operations on it.

onChange#

  1. setValue is called
  2. Pipes onChange plugins.
  3. onChange props is called if defined.

Editable Props#

In addition to editableProps, Plate computes the Editable props if editor is defined.

decorate#

  • Pipes decorate plugins.

renderElement#

  • If plugin isElement is true and if plugin type equals props.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 above component.
    • inject.belowComponent to inject a component below component.
  • If no plugin is found for a node type, editableProps.renderElement is used if defined.
  • If editableProps.renderElement is not defined, DefaultElement is used (unstyled div).

renderLeaf#

  • If plugin isLeaf is true and if plugin type equals props.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 editableProps.renderLeaf is not defined, DefaultLeaf is used (unstyled span).

Handlers#

  • Pipes DOM handlers plugins, e.g. onDOMBeforeInput, onKeyDown,` etc.

Store updates#

  • On Plate mount, setInitialState is called.
  • If defined, set enabled, initialValue or value into the store.
    • If enabled is true, set editor with withPlate into the store.
    • If enabled is false, set editor to undefined.
  • editor is set only once (if not defined) as required by slate. You'll need to call resetEditor to reset it.
  • On Plate unmount, clearState is called.