Plate Components

PreviousNext

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

  • 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>) => TRange[]

    See Slate docs.

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

    Controlled callback called when the editor state changes.

  • onSelectionChange optional (selection: TRange | null) => void

    Callback called when the editor selection changes.

  • onValueChange optional ({ value, editor }: { value: Value; editor: PlateEditor }) => 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<RenderElementProps>

    Custom render function for elements.

  • renderLeaf optional FC<RenderLeafProps>

    Custom render function for leaf nodes.

<PlateContent>

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

Props

Collapse all

  • autoFocusOnEditable optional boolean

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

  • renderEditable optional (editable: ReactNode) => ReactNode

    Custom Editable node.

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

  • as optional React.ElementType

  • autoFocus optional boolean

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

  • disableDefaultStyles optional boolean

  • onDOMBeforeInput optional (event: Event) => void

  • onKeyDown optional (event: KeyboardEvent) => void

  • placeholder optional string

  • readOnly optional boolean

  • renderChunk optional FC<RenderChunkProps>

  • renderElement optional FC<RenderElementProps>

  • renderLeaf optional FC<RenderLeafProps>

  • 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.

Plate 组件Plate Controller