Plate

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 ReactNode

Children components have access to the plate store.

editor PlateEditor

A controlled editor instance. This prop is required.

decorate optional (ctx: SlatePluginContext<C>) => Range[]

See Slate docs.

onChange optional ({ value, editor }: { value: Value; editor: PlateEditor }) => void

Controlled callback called when the editor state changes.

onSelectionChange optional (selection: Range | null) => void

Callback called when the editor selection changes.

onValueChange optional (value: Value) => void

Callback called when the editor value changes.

primary optional boolean

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

• Default: true

readOnly optional boolean

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

renderElement optional FC<TRenderElementProps>

Custom render function for elements.

renderLeaf optional FC<TRenderLeafProps>

Custom render function for leaf nodes.

PlateContent Props

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

Props

Collapse all

renderEditable optional (editable: ReactNode) => ReactNode

Custom Editable node.

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

as optional React.ElementType

autoFocus optional boolean

decorate optional (ctx: SlatePluginContext<C>) => Range[]

disableDefaultStyles optional boolean

onDOMBeforeInput optional (event: Event) => void

onKeyDown optional (event: KeyboardEvent) => void

placeholder optional string

readOnly optional boolean

renderElement optional FC<TRenderElementProps>

renderLeaf optional FC<TRenderLeafProps>

renderPlaceholder optional FC<RenderPlaceholderProps>

role optional string

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

style optional CSSProperties

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.