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

id optional string

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

• Default: 'plate'.

children optional ReactNode

Children components have access to the plate store.

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

See decorations.

disableCorePlugins optional object | boolean | undefined

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

Show child attributes

editor optional PlateEditor

A controlled editor.

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

editorRef optional ForwardedRef<PlateEditor>

An uncontrolled editor ref.

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

initialValue optional Value

Initial editor value.

• Default: editor.childrenFactory()

maxLength optional number

Specifies the maximum number of characters allowed in the editor.

normalizeInitialValue optional boolean

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

• Default: false

onChange optional function

Controlled callback called when the editor state changes.

plugins optional PlatePlugin[]

Plate plugins. See Plugin guide.

primary optional boolean

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

• Default: true

value optional Value

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

renderEditable optional (editable: ReactNode) => ReactNode

Custom Editable node.

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

as optional React.ElementType

autoFocus optional boolean

decorate optional (entry: TNodeEntry) => 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 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.