{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "api-core-plate-store-docs",
"title": "Store",
"description": "API reference for Plate store.",
"files": [
{
"path": "../../content/docs/api/core/plate-store.mdx",
"content": "---\ntitle: Store\ndescription: API reference for Plate store.\n---\n\n`Plate` is using [jotai-x](https://github.com/udecode/jotai-x) to store the state of the editor.\n\n## Plate Store\n\n\nThe `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.\n\n\n\nPlate editor reference.\n\n- **Default:** `createPlateFallbackEditor()`\n\n\n\nA unique ID used as a provider scope. Use it if you have multiple `Plate` in the same React tree.\n\n- **Default:** random id\n\n\n\">\nA reference to the editor container element.\n\n\n\nFunction used to decorate ranges in the editor.\n\n```ts\n(options: { editor: PlateEditor; entry: NodeEntry }) => TRange[]\n```\n\n\n\nWhether `Editable` is rendered so slate DOM is resolvable.\n\n\n\nControlled callback called when the editor state changes.\n\n```ts\n(options: { editor: PlateEditor; value: ValueOf }) => void\n```\n\n\n\nControlled callback called when the editor.selection changes.\n\n```ts\n(options: { editor: PlateEditor; selection: TSelection }) => void\n```\n\n\n\nControlled callback called when the editor.children changes.\n\n```ts\n(options: { editor: PlateEditor; value: ValueOf }) => void\n```\n\n\n\nControlled callback called when a node operation occurs.\n\n```ts\n(options: { \n editor: PlateEditor; \n node: Descendant; \n operation: NodeOperation; \n prevNode: Descendant \n}) => void\n```\n\n**Parameters:**\n- `editor`: The Plate editor instance\n- `node`: The node after the operation\n- `operation`: The node operation that occurred (insert, remove, set, merge, split, move)\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\n\n\nControlled callback called when a text operation occurs.\n\n```ts\n(options: { \n editor: PlateEditor; \n node: Descendant; \n operation: TextOperation; \n prevText: string; \n text: string \n}) => void\n```\n\n**Parameters:**\n- `editor`: The Plate editor instance\n- `node`: The parent node 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\n\nWhether the editor is primary. If no editor is active, then PlateController will use the first-mounted primary editor.\n\n- **Default:** `true`\n\n\n\nWhether the editor is read-only.\n\n\n\nFunction to render elements in the editor.\n\n\n\nFunction to render leaf nodes in the editor.\n\n\n\nVersion incremented when calling `redecorate`. This is a dependency of the `decorate` function.\n\n\n\nVersion incremented on each editor change.\n\n\n\nVersion incremented on each editor.selection change.\n\n\n\nVersion incremented on each editor.children change.\n\n\n\n\n## Accessing the Store\n\n```ts\nimport { usePlateStore, useEditorRef, useEditorPlugin } from 'platejs/react'\n\n// Direct store access\nconst store = usePlateStore(id?) \n\n// Via editor reference\nconst store = useEditorRef().store\n\n// Via plugin context\nconst store = useEditorPlugin(myPlugin).store\n```\n\nNote: The `id` parameter is optional and defaults to the closest editor.\n\n## Store Hooks\n\nThe following hooks are available to interact with the Plate store:\n\n```ts\nimport { usePlateState, usePlateValue, usePlateSet } from 'platejs/react'\n```\n\n### usePlateState\n\nGet and set a store property value.\n\n```ts\nconst [readOnly, setReadOnly] = usePlateState('readOnly', id?)\n```\n\n### usePlateValue\n\nSubscribe to a store property value.\n\n```ts\nconst readOnly = usePlateValue('readOnly', id?)\n```\n\n### usePlateSet\n\nSet a store property value.\n\n```ts\nconst setReadOnly = usePlateSet('readOnly', id?)\n```\n\n## Event Editor Store\n\nThis store is an object whose property keys are event names (e.g. `'focus'`) and whose property values are [editor IDs](Plate#id).\n\n- This is useful when having [multiple editors](multiple-editors) and get one based on DOM events (e.g. the last focused editor).\n- One of the core plugins of [Plate](Plate) will store the following events.\n\n\n\n\n\nLast editor ID that has been blurred.\n\n\n\n\n\nEditor ID that is currently being focused.\n\n\n\n\n\nLast editor ID.\n\n\n\n\n\n\n```ts\nimport { EventEditorStore, useEventEditorValue } from 'platejs'\n\n// Get a value\nconst focusedId = EventEditorStore.get('focus')\n\n// Set a value\nEventEditorStore.set('focus', editorId)\n\n// Subscribe to changes\nconst focusedId = useEventEditorValue('focus')\n```\n\n### `useEventPlateId`\n\nGet the last event editor ID.\n\n\n\n\n\nReturned ID if defined.\n\n\n\n\n\n The plate id from the context if available, otherwise the last event editor\n ID or `PLATE_SCOPE`.\n\n\n",
"type": "registry:file",
"target": "content/docs/plate/api/core/plate-store.mdx"
}
],
"type": "registry:file"
}