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:T1812,--- title: Store description: API reference for Plate store. --- `Plate` is using [jotai-x](https://github.com/udecode/jotai-x) to store the state of the editor. ## Plate Store The `PlateStoreState` object stores the state of the Plate editor. It contains information about the editor's ID, its current value, its plugins, and other settings. Plate editor reference. - **Default:** `createPlateFallbackEditor()` A unique ID used as a provider scope. Use it if you have multiple `Plate` in the same React tree. - **Default:** random id A reference to the editor container element. Function used to decorate ranges in the editor. ```ts (options: { editor: PlateEditor; entry: NodeEntry }) => TRange[] ``` Whether `Editable` is rendered so slate DOM is resolvable. Controlled callback called when the editor state changes. ```ts (options: { editor: PlateEditor; value: ValueOf }) => void ``` Controlled callback called when the editor.selection changes. ```ts (options: { editor: PlateEditor; selection: TSelection }) => void ``` Controlled callback called when the editor.children changes. ```ts (options: { editor: PlateEditor; value: ValueOf }) => void ``` Controlled callback called when a node operation occurs. ```ts (options: { editor: PlateEditor; node: Descendant; operation: NodeOperation; prevNode: Descendant }) => void ``` **Parameters:** - `editor`: The Plate editor instance - `node`: The node after the operation - `operation`: The node operation that occurred (insert, remove, set, merge, split, move) - `prevNode`: The node before the operation **Note:** For `insert_node` and `remove_node` operations, both `node` and `prevNode` contain the same value to avoid null cases. Controlled callback called when a text operation occurs. ```ts (options: { editor: PlateEditor; node: Descendant; operation: TextOperation; prevText: string; text: string }) => void ``` **Parameters:** - `editor`: The Plate editor instance - `node`: The parent node containing the text that changed - `operation`: The text operation that occurred (`insert_text` or `remove_text`) - `prevText`: The text content before the operation - `text`: The text content after the operation Whether the editor is primary. If no editor is active, then PlateController will use the first-mounted primary editor. - **Default:** `true` Whether the editor is read-only. Function to render elements in the editor. Function to render leaf nodes in the editor. Version incremented when calling `redecorate`. This is a dependency of the `decorate` function. Version incremented on each editor change. Version incremented on each editor.selection change. Version incremented on each editor.children change. ## Accessing the Store ```ts import { usePlateStore, useEditorRef, useEditorPlugin } from 'platejs/react' // Direct store access const store = usePlateStore(id?) // Via editor reference const store = useEditorRef().store // Via plugin context const store = useEditorPlugin(myPlugin).store ``` Note: The `id` parameter is optional and defaults to the closest editor. ## Store Hooks The following hooks are available to interact with the Plate store: ```ts import { usePlateState, usePlateValue, usePlateSet } from 'platejs/react' ``` ### usePlateState Get and set a store property value. ```ts const [readOnly, setReadOnly] = usePlateState('readOnly', id?) ``` ### usePlateValue Subscribe to a store property value. ```ts const readOnly = usePlateValue('readOnly', id?) ``` ### usePlateSet Set a store property value. ```ts const setReadOnly = usePlateSet('readOnly', id?) ``` ## Event Editor Store This store is an object whose property keys are event names (e.g. `'focus'`) and whose property values are [editor IDs](Plate#id). - This is useful when having [multiple editors](multiple-editors) and get one based on DOM events (e.g. the last focused editor). - One of the core plugins of [Plate](Plate) will store the following events. Last editor ID that has been blurred. Editor ID that is currently being focused. Last editor ID. ```ts import { EventEditorStore, useEventEditorValue } from 'platejs' // Get a value const focusedId = EventEditorStore.get('focus') // Set a value EventEditorStore.set('focus', editorId) // Subscribe to changes const focusedId = useEventEditorValue('focus') ``` ### `useEventPlateId` Get the last event editor ID. Returned ID if defined. The plate id from the context if available, otherwise the last event editor ID or `PLATE_SCOPE`. 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-store.mdx","content":"$50","type":"registry:file","target":"content/docs/plate/api/core/plate-store.mdx"}],"className":"h-[70svh] min-h-80"}]]}]