Docs
Plate

Plate

API reference for Plate component.

Plate is the root component loading the editor state into a store provider.

PlateContent is the component that renders the editor.

Plate Props

Parameters

Collapse all

    A unique ID to store the editor state by ID. This is mandatory when nesting Plate instances but optional otherwise.

    • Default: 'plate'.

    Children components have access to the plate store.

    Can be true to disable all core plugins, an object to selectively disable core plugins, or undefined.

    A controlled editor.

    • Default: createPlateEditor({ id, plugins, disableCorePlugins })

    An uncontrolled editor ref.

    • Default: createPlateEditor({ id, plugins, disableCorePlugins })

    Initial editor value.

    • Default: editor.childrenFactory()

    Specifies the maximum number of characters allowed in the editor.

    If true, normalizes the initial editor value upon creation. This is useful for applying normalization rules on existing content.

    • Default: false

    Controlled callback called when the editor state changes.

    Plate plugins. See Plugin guide.

    Alias to initialValue. Stored in the store on each change (Editable.onChange). To update value with history support, use Slate transforms. To reset value, use resetEditor.

    • Default: editor.childrenFactory()

PlateContent Props

Props for the Editable component. Extends TextareaHTMLAttributes<HTMLDivElement>.

Props

Collapse all

    Custom Editable node.

    • Default: <Editable {...props} />

How Plate Works

Plate computes the Slate props: key, editor, onChange.

Plate also computes Editable props if editor is defined:

decorate

This prop integrates decorate plugins. If a decorate prop is defined, it will be added.

renderElement

When a plugin's isElement is true and its type matches props.element.type, an element is rendered with specific plugin properties:

  • inject.props are used to inject rendering props.
  • component is used to render the element itself.
  • inject.aboveComponent and inject.belowComponent can inject components above and below component, respectively.

If no suitable plugin is found for a node type, renderElement prop is used (if defined). In the absence of this prop, DefaultElement (a plain div) is used.

renderLeaf

If a plugin's isLeaf is true and its type matches props.leaf.type, a leaf node is rendered with specific plugin properties:

  • inject.props are used to inject rendering props.
  • component is used to render the leaf.

If no plugin is found for a node type, renderLeaf prop is used (if defined). If this is also not defined, DefaultLeaf (a plain span) is used.

Handlers

This integrates DOM handlers plugins, such as onDOMBeforeInput, onKeyDown, etc.