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

    Children components have access to the plate store.

    A controlled editor instance. This prop is required.

    See Slate docs.

    Controlled callback called when the editor state changes.

    Callback called when the editor selection changes.

    Callback called when the editor value changes.

    Controls whether the editor is considered active by default when used with a PlateController.

    • Default: true

    If true, the editor is in read-only mode.

    Custom render function for elements.

    Custom render function for leaf nodes.

PlateContent Props

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

Props

Collapse all

    Automatically focus the editor when it transitions from read-only to editable mode (when readOnly changes from true to false).

    Custom Editable node.

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

How Plate Works

Plate requires an editor prop, which should be an instance of PlateEditor. If editor is null, Plate will not render anything.

The Plate component does not handle the creation of the editor or the management of plugins. These responsibilities are handled by createPlateEditor.

Plate provides a store for the editor state and renders its children. It uses PlateStoreProvider to make the editor state and related functions available to its children components.

The rendering logic for elements and leaves is primarily handled by the plugins system, with renderElement and renderLeaf props serving as fallbacks if no plugin is found for a specific node type.

For more details on creating and configuring the editor, refer to the Editor Configuration guide.

Plate CommonPlateController