4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T2bfc,--- title: Plate Components description: API reference for Plate React components. --- Plate components connect a `PlateEditor` to React rendering. Use `Plate` and `PlateContent` for editable editors, `PlateView` for read-only static views, and the node primitives when writing custom plugin components. ## Editable Editor `Plate` owns the editor store. `PlateContent` renders the editable surface under that store. ```tsx title="components/editor.tsx" import { Plate, PlateContent, usePlateEditor } from 'platejs/react'; export function Editor() { const editor = usePlateEditor({ value: [ { children: [{ text: 'Start writing.' }], type: 'p', }, ], }); return ( ); } ``` `PlateContent` must render below `Plate`. Hooks such as `useEditorRef`, `useEditorReadOnly`, and `usePlateStore` throw when there is no `Plate` or `PlateController` above them. ## Read-Only View Use `PlateView` with a static editor when you need rendered content and Plate copy behavior without an editable surface. ```tsx title="components/read-only-editor.tsx" import { PlateView, usePlateViewEditor } from 'platejs/react'; const value = [ { children: [{ text: 'Published content.' }], type: 'p', }, ]; export function ReadOnlyEditor() { const editor = usePlateViewEditor({ value }); if (!editor) return null; return ; } ``` `PlateView` wraps `PlateStatic`. Its default `onCopy` writes Plate fragment data to the clipboard, unless you pass your own `onCopy` prop. ## Component Map | Component | Use For | |-----------|---------| | `Plate` | Store provider for one editor instance. | | `PlateContent` | Editable Slate surface with plugin handlers, decorators, renderers, hotkeys, and editor effects. | | `PlateView` | Static read-only rendering with Plate fragment copy support. | | `PlateContainer` | Editor container `div` plus `beforeContainer` and `afterContainer` plugin slots. | | `PlateSlate` | Slate provider wrapper used by `PlateContent`; also applies `aboveSlate` plugin wrappers. | | `PlateElement` | Default element renderer for block and inline elements. | | `PlateLeaf` | Default decorated text-leaf renderer. | | `PlateText` | Default text-node renderer for non-decoration leaf rendering. | | `ContentVisibilityChunk` | Default chunk renderer when chunking uses `content-visibility: auto`. | | `PlateTest` | Test helper that creates or wraps an editor and renders `PlateContent` with test attributes. | ## Render Pipeline `PlateContent` builds the editable props with `useEditableProps`. That pipeline combines store-level renderers, `PlateContent` render props, plugin decorators, plugin DOM handlers, and chunking. | Stage | Source | |-------|--------| | Slate provider | `PlateSlate` uses `editor.children`, `editor.meta.key`, and store callbacks. | | Editable props | `useEditableProps` pipes decorators, DOM handlers, `renderChunk`, `renderElement`, `renderLeaf`, and `renderText`. | | Plugin slots | `beforeEditable`, `aboveEditable`, and `afterEditable` wrap or sit around the editable surface. | | Effects | `EditorMethodsEffect`, `EditorHotkeysEffect`, `EditorRefEffect`, and `PlateControllerEffect` run inside `PlateContent`. | | Read-only state | `disabled` forces read-only; `readOnly` syncs back into the Plate store. | ## Node Primitives Use `PlateElement`, `PlateLeaf`, and `PlateText` inside plugin components. They merge Slate attributes with your `className`, `style`, and `ref`. ```tsx title="components/paragraph-element.tsx" import { PlateElement, type PlateElementProps } from 'platejs/react'; export function ParagraphElement(props: PlateElementProps) { return ; } ``` | Primitive | Behavior | |-----------|----------| | `PlateElement` | Adds `data-slate-node="element"`, preserves inline metadata, sets `data-block-id` for mounted block elements with an `id`, and adds directional-affinity spacers when needed. | | `PlateLeaf` | Renders a text leaf and adds hard-affinity spacers when needed. | | `PlateText` | Renders a text node without leaf-decoration matching. | | `useNodeAttributes` | Merges Slate attributes, refs, class names, and styles for node primitives. | ## API Reference ### `Plate` Root provider for one editor instance. Editor instance. When `null`, `Plate` renders nothing. React children that can read the Plate store. Store-level decorate function used by `PlateContent`. Store-level read-only state. Defaults to `editor.dom.readOnly`. Registers the editor as a primary editor for `PlateController`. Fallback element renderer stored on the Plate store. Fallback leaf renderer stored on the Plate store. Runs after Slate change handling when plugin `onChange` handlers do not handle the event. Runs when Slate reports a value change. Runs when Slate reports a selection change. Stored on `SlateExtensionPlugin` by `PlateContent` and called for node operations. Stored on `SlateExtensionPlugin` by `PlateContent` and called for text operations. Suppresses the multiple-instance warning from `usePlateInstancesWarn`. ### `PlateContent` Editable surface for a `Plate` editor. Editor scope used by `useEditorRef(id)` and `usePlateStore(id)`. Focuses the editor at the end when `readOnly` changes from `true` to `false`. Forces read-only state and sets `aria-disabled`. Overrides the store read-only value and syncs it back to the store. Editable-level decorate function. Store-level `decorate` wins when present. Wraps or replaces the generated `Editable` element. Custom chunk renderer. Defaults to `ContentVisibilityChunk` when chunking enables `contentVisibilityAuto`. Fallback element renderer after plugin renderers. Fallback leaf renderer after plugin leaf renderers. Fallback text renderer after non-decoration text renderers. Placeholder renderer passed to Slate `Editable`. Placeholder text passed to Slate `Editable`. Slate selection scrolling hook. DOM before-input handler passed through the plugin handler pipeline. Keyboard handler passed through the plugin handler pipeline. Element type passed to Slate `Editable`. Passed to Slate `Editable`. ARIA role passed to Slate `Editable`. Style object passed to Slate `Editable`. `PlateContent` also accepts the DOM handler props listed in `DOMHandlers`, including clipboard, composition, focus, keyboard, pointer, mouse, drag, touch, media, and form handlers. ### `PlateView` Read-only static renderer with Plate copy support. Static editor instance. Controlled value alias. When present, `PlateStatic` assigns it to `editor.children`. Overrides the default Plate fragment copy handler. Merged with the `slate-editor` class by `PlateStatic`. Style object passed to the static root `div`. ### `PlateContainer` Container `div` with plugin container slots. Content rendered inside the container. HTML props passed to the container `div` and container slot components. ### Render Primitives | API | Default Element | Notes | |-----|-----------------|-------| | `PlateElement` | `div` | Accepts `as`, `attributes`, `className`, `style`, `ref`, `element`, `path`, `editor`, `plugin`, and `insetProp`. | | `PlateLeaf` | `span` | Accepts `as`, `attributes`, `className`, `style`, `ref`, `leaf`, `text`, `editor`, `plugin`, and `inset`. | | `PlateText` | `span` | Accepts `as`, `attributes`, `className`, `style`, `ref`, `text`, `editor`, and `plugin`. | | `ContentVisibilityChunk` | `div` | Wraps children only when `lowest` is true. | | `withHOC` | `React.forwardRef` | Wraps one ref-capable component with another ref-capable component. | 4e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L4f",null,{"files":[{"path":"../../content/docs/api/core/plate-components.mdx","content":"$50","type":"registry:file","target":"content/docs/plate/api/core/plate-components.mdx"}],"className":"h-[70svh] min-h-80"}]]}]