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:T167a,--- title: Plate Controller description: API reference for PlateController. --- `PlateController` lets UI outside a single `` subtree read the active editor store. Use it for shared toolbars, side panels, inspectors, and multi-editor shells. ## Quick Use Wrap the shared UI and all editors in `PlateController`. `PlateContent` registers each mounted editor store through `PlateControllerEffect`. ```tsx title="components/editor-shell.tsx" showLineNumbers import { Plate, PlateContent, PlateController, usePlateEditor, } from 'platejs/react'; export function EditorShell() { return ( ); } function MainEditor() { const editor = usePlateEditor({ id: 'main' }); return ( ); } function SecondaryEditor() { const editor = usePlateEditor({ id: 'secondary' }); return ( ); } ``` `primary` belongs on `Plate`, not on `createPlateEditor` or `usePlateEditor`. ## Active Editor Lookup Hooks such as `useEditorRef()` and `useEditorMounted()` normally read the nearest `Plate` store. Inside `PlateController`, the same hooks can resolve a store outside a specific editor tree. | Lookup | Behavior | |--------|----------| | `useEditorRef('main')` | Resolves the store registered for `main`. | | `useEditorRef()` | Resolves the active editor store, then the first mounted primary editor store. | | Missing store with controller | Returns the fallback store, so `useEditorRef()` returns a fallback editor. | | Missing store without controller | Throws `Plate hooks must be used inside a Plate or PlateController`. | Controller lookup order without an explicit ID: 1. `activeId` 2. each ID in `primaryEditorIds` 3. fallback store when no store is available ## Fallback Editors The fallback editor exists so read-only UI can render while no editor is active. It is not safe for transforms. ```tsx title="components/active-editor-label.tsx" import { useEditorMounted, useEditorRef } from 'platejs/react'; export function ActiveEditorLabel() { const editor = useEditorRef(); const mounted = useEditorMounted(); if (!mounted || editor.meta.isFallback) { return

No editor selected.

; } return

Active editor: {editor.id}

; } ``` Check `useEditorMounted(id?)` or `!editor.meta.isFallback` before running transforms from UI that lives under `PlateController`. ## Registration `PlateControllerEffect` runs inside `PlateContent`. It registers the current `Plate` store by editor ID, appends primary editors to `primaryEditorIds`, removes them on unmount, and sets `activeId` when Slate focus enters that editor. | State | Owner | Behavior | |-------|-------|----------| | `editorStores` | `PlateControllerEffect` | Maps mounted editor IDs to their Jotai stores. Unmounted IDs are set to `null`. | | `primaryEditorIds` | `PlateControllerEffect` | Appends mounted editors whose `Plate` store has `primary: true`; removes them on unmount. | | `activeId` | `PlateControllerEffect` | Set to the focused editor ID. Cleared on unmount when the unmounted editor was active. | ## API Reference ### `PlateController` Provider for cross-editor lookup state. Shared UI and editor trees that should participate in controller lookup. Initial active editor ID. Initial editor-store map. Initial primary editor ID list. ### Controller Store State | State | Type | Default | |-------|------|---------| | `activeId` | `string \| null` | `null` | | `editorStores` | `Record` | `{}` | | `primaryEditorIds` | `string[]` | `[]` | ### `usePlateControllerStore` Resolve a Plate Jotai store from the controller. Editor ID to resolve directly. Matching editor store, active editor store, first mounted primary editor store, or `null`. ### `usePlateControllerExists` Check whether a local controller provider exists. `true` when `usePlateControllerLocalStore()` finds a controller store. ### `usePlateControllerLocalStore` Read the local controller atom store. Scope options passed to the generated controller store hook. A string is treated as `scope`. Local controller store hook result. ### `PlateControllerEffect` Register a `Plate` store with the nearest controller. Editor ID to register. Defaults to the ID from the current Plate store. `PlateContent` renders `PlateControllerEffect` for you. Render it directly only when you build a custom content surface that still needs controller registration. 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-controller.mdx","content":"$50","type":"registry:file","target":"content/docs/plate/api/core/plate-controller.mdx"}],"className":"h-[70svh] min-h-80"}]]}]