Plate Components

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

PlateContent is the component that renders the editor.

<Plate>

<API name="Plate"> <APIProps> <APIItem name="children" type="ReactNode"> Children components have access to the plate store. </APIItem> <APIItem name="editor" type="PlateEditor"> A controlled `editor` instance. This prop is required. </APIItem> <APIItem name="decorate" type="(ctx: SlatePluginContext<C>) => TRange[]" optional> See [Slate docs](https://docs.slatejs.org/concepts/09-rendering#decorations). </APIItem> <APIItem name="onChange" type="({ value, editor }: { value: Value; editor: PlateEditor }) => void" optional> Controlled callback called when the editor state changes. </APIItem> <APIItem name="onSelectionChange" type="(selection: TRange | null) => void" optional> Callback called when the editor selection changes. </APIItem> <APIItem name="onValueChange" type="({ value, editor }: { value: Value; editor: PlateEditor }) => void" optional> Callback called when the editor value changes. </APIItem> <APIItem name="onNodeChange" type="(options: { editor: PlateEditor; node: Descendant; operation: NodeOperation; prevNode: Descendant }) => void" optional> Callback called whenever a node operation occurs (insert, remove, set, merge, split, move).

Parameters:

• editor: The Plate editor instance
• node: The node after the operation
• operation: The node operation that occurred
• prevNode: The node before the operation

Note: For insert_node and remove_node operations, both node and prevNode contain the same value to avoid null cases. </APIItem> <APIItem name="onTextChange" type="(options: { editor: PlateEditor; node: Descendant; operation: TextOperation; prevText: string; text: string }) => void" optional> Callback called whenever a text operation occurs (insert or remove text).

Parameters:

• editor: The Plate editor instance
• node: The parent node (block or inline element) containing the text that changed
• operation: The text operation that occurred (insert_text or remove_text)
• prevText: The text content before the operation
• text: The text content after the operation

</APIItem> <APIItem name="primary" type="boolean" optional> Controls whether the editor is considered active by default when used with a PlateController.

• Default: true </APIItem>

<APIItem name="readOnly" type="boolean" optional> If true, the editor is in read-only mode. </APIItem> <APIItem name="renderElement" type="FC<RenderElementProps>" optional> Custom render function for elements. </APIItem> <APIItem name="renderLeaf" type="FC<RenderLeafProps>" optional> Custom render function for leaf nodes. </APIItem> </APIProps> </API>

<PlateContent>

<API name="PlateContent"> Props for the [Editable](https://docs.slatejs.org/libraries/slate-react/editable) component. Extends `TextareaHTMLAttributes<HTMLDivElement>`. <APIProps> <APIItem name="autoFocusOnEditable" type="boolean" optional> Automatically focus the editor when it transitions from read-only to editable mode (when `readOnly` changes from `true` to `false`). </APIItem> <APIItem name="renderEditable" type="(editable: ReactNode) => ReactNode" optional> Custom `Editable` node.

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

<APIItem name="as" type="React.ElementType" optional /> <APIItem name="autoFocus" type="boolean" optional /> <APIItem name="decorate" type="(ctx: SlatePluginContext<C>) => TRange[]" optional /> <APIItem name="disableDefaultStyles" type="boolean" optional /> <APIItem name="onDOMBeforeInput" type="(event: Event) => void" optional /> <APIItem name="onKeyDown" type="(event: KeyboardEvent) => void" optional /> <APIItem name="placeholder" type="string" optional /> <APIItem name="readOnly" type="boolean" optional /> <APIItem name="renderChunk" type="FC<RenderChunkProps>" optional /> <APIItem name="renderElement" type="FC<RenderElementProps>" optional /> <APIItem name="renderLeaf" type="FC<RenderLeafProps>" optional /> <APIItem name="renderPlaceholder" type="FC<RenderPlaceholderProps>" optional /> <APIItem name="role" type="string" optional /> <APIItem name="scrollSelectionIntoView" type="(editor: ReactEditor, domRange: DOMRange) => void" optional /> <APIItem name="style" type="CSSProperties" optional /> </APIProps> </API>

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.