+ "content": "---\ntitle: Plate Components\ndescription: API reference for Plate component.\n---\n\n`Plate` is the root component loading the editor state into a store provider. \n\n`PlateContent` is the component that renders the editor.\n\n## `<Plate>`\n\n<API name=\"Plate\">\n<APIProps>\n<APIItem name=\"children\" type=\"ReactNode\">\nChildren components have access to the plate store. \n</APIItem>\n<APIItem name=\"editor\" type=\"PlateEditor\">\nA controlled `editor` instance. This prop is required.\n</APIItem>\n<APIItem name=\"decorate\" type=\"(ctx: SlatePluginContext<C>) => TRange[]\" optional>\nSee [Slate docs](https://docs.slatejs.org/concepts/09-rendering#decorations).\n</APIItem>\n<APIItem name=\"onChange\" type=\"({ value, editor }: { value: Value; editor: PlateEditor }) => void\" optional>\nControlled callback called when the editor state changes.\n</APIItem>\n<APIItem name=\"onSelectionChange\" type=\"(selection: TRange | null) => void\" optional>\nCallback called when the editor selection changes.\n</APIItem>\n<APIItem name=\"onValueChange\" type=\"({ value, editor }: { value: Value; editor: PlateEditor }) => void\" optional>\nCallback called when the editor value changes.\n</APIItem>\n<APIItem name=\"onNodeChange\" type=\"(options: { editor: PlateEditor; node: Descendant; operation: NodeOperation; prevNode: Descendant }) => void\" optional>\nCallback called whenever a node operation occurs (insert, remove, set, merge, split, move).\n\n**Parameters:**\n- `editor`: The Plate editor instance\n- `node`: The node after the operation\n- `operation`: The node operation that occurred\n- `prevNode`: The node before the operation\n\n**Note:** For `insert_node` and `remove_node` operations, both `node` and `prevNode` contain the same value to avoid null cases.\n</APIItem>\n<APIItem name=\"onTextChange\" type=\"(options: { editor: PlateEditor; node: Descendant; operation: TextOperation; prevText: string; text: string }) => void\" optional>\nCallback called whenever a text operation occurs (insert or remove text).\n\n**Parameters:**\n- `editor`: The Plate editor instance\n- `node`: The parent node (block or inline element) containing the text that changed\n- `operation`: The text operation that occurred (`insert_text` or `remove_text`)\n- `prevText`: The text content before the operation\n- `text`: The text content after the operation\n\n</APIItem>\n<APIItem name=\"primary\" type=\"boolean\" optional>\nControls whether the editor is considered active by default when used with a PlateController.\n\n- **Default:** `true`\n</APIItem>\n<APIItem name=\"readOnly\" type=\"boolean\" optional>\nIf true, the editor is in read-only mode.\n</APIItem>\n<APIItem name=\"renderElement\" type=\"FC<RenderElementProps>\" optional>\nCustom render function for elements.\n</APIItem>\n<APIItem name=\"renderLeaf\" type=\"FC<RenderLeafProps>\" optional>\nCustom render function for leaf nodes.\n</APIItem>\n</APIProps>\n</API>\n\n## `<PlateContent>`\n\n<API name=\"PlateContent\">\nProps for the [Editable](https://docs.slatejs.org/libraries/slate-react/editable) component. Extends `TextareaHTMLAttributes<HTMLDivElement>`.\n\n<APIProps>\n<APIItem name=\"autoFocusOnEditable\" type=\"boolean\" optional>\nAutomatically focus the editor when it transitions from read-only to editable mode (when `readOnly` changes from `true` to `false`).\n</APIItem>\n<APIItem name=\"renderEditable\" type=\"(editable: ReactNode) => ReactNode\" optional>\nCustom `Editable` node.\n\n- **Default:** `<Editable {...props} />`\n</APIItem>\n<APIItem name=\"as\" type=\"React.ElementType\" optional />\n<APIItem name=\"autoFocus\" type=\"boolean\" optional />\n<APIItem name=\"decorate\" type=\"(ctx: SlatePluginContext<C>) => TRange[]\" optional />\n<APIItem name=\"disableDefaultStyles\" type=\"boolean\" optional />\n<APIItem name=\"onDOMBeforeInput\" type=\"(event: Event) => void\" optional />\n<APIItem name=\"onKeyDown\" type=\"(event: KeyboardEvent) => void\" optional />\n<APIItem name=\"placeholder\" type=\"string\" optional />\n<APIItem name=\"readOnly\" type=\"boolean\" optional />\n<APIItem name=\"renderChunk\" type=\"FC<RenderChunkProps>\" optional />\n<APIItem name=\"renderElement\" type=\"FC<RenderElementProps>\" optional />\n<APIItem name=\"renderLeaf\" type=\"FC<RenderLeafProps>\" optional />\n<APIItem name=\"renderPlaceholder\" type=\"FC<RenderPlaceholderProps>\" optional />\n<APIItem name=\"role\" type=\"string\" optional />\n<APIItem name=\"scrollSelectionIntoView\" type=\"(editor: ReactEditor, domRange: DOMRange) => void\" optional />\n<APIItem name=\"style\" type=\"CSSProperties\" optional />\n</APIProps>\n</API>\n\n## How Plate Works\n\n`Plate` requires an `editor` prop, which should be an instance of `PlateEditor`. If `editor` is `null`, `Plate` will not render anything.\n\nThe `Plate` component does not handle the creation of the editor or the management of plugins. These responsibilities are handled by `createPlateEditor`.\n\n`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.\n\nThe 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.\n\nFor more details on creating and configuring the editor, refer to the [Editor Configuration](/docs/editor) guide.\n",
0 commit comments