Docs
Plate

Plate

API reference for Plate component.

Plate is the core component rendering the editor. It takes care of computing and passing Slate and Editable props from the plugins.

PlateProvider is the component loading the Plate store. Any component rendered below has access to the Plate store. If Plate does not find any parent PlateProvider, it will take care of creating one (provider-less mode).

Plate Props

Parameters

Collapse all

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

    • Default: 'main'.

    The last component rendered inside Slate, after Editable. Use firstChildren to render the first children.

    See decorate.

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

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

    editableProps.as optional React.ElementType

    editableProps.autoFocus optional boolean

    editableProps.decorate optional (entry: TNodeEntry) => Range[]

    editableProps.disableDefaultStyles optional boolean

    editableProps.onDOMBeforeInput optional (event: Event) => void

    editableProps.onKeyDown optional (event: KeyboardEvent) => void

    editableProps.placeholder optional string

    editableProps.readOnly optional boolean

    editableProps.renderElement optional FC<TRenderElementProps>

    editableProps.renderLeaf optional FC<TRenderLeafProps>

    editableProps.renderPlaceholder optional FC<RenderPlaceholderProps>

    editableProps.role optional string

    editableProps.scrollSelectionIntoView optional (editor: ReactEditor, domRange: DOMRange) => void

    editableProps.style optional CSSProperties

    Ref to the Editable component. Not yet supported by Slate React.

    A controlled editor.

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

    The first children rendered inside Slate, before Editable. Use children instead if you need resolved Slate DOM on the first render.

    Initial editor value.

    • Default: editor.childrenFactory()

    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.

    Custom Editable node.

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

    See renderElement.

    See renderLeaf.

    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 useResetPlateEditor, which will also reset the editor.

    • Default: editor.childrenFactory()

PlateProvider Props

A react component that provides the context for the Plate editor.

Same props than PlateProps excluding:

  • editableProps
  • editableRef
  • firstChildren
  • renderEditable

If used, only the listed props should be set on Plate.

How Plate Works

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

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

decorate

This prop integrates decorate plugins. If a decorate prop is defined, it will be added. Similarly, if editableProps.decorate is defined, it will be included as well.

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, editableProps.renderElement 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, editableProps.renderLeaf 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.

Plate CommonPlateEditor