Store - Plate — ContextQMD

Plate is using jotai-x to store the state of the editor.

Plate Store

<API name="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. <APIState> <APIItem name="editor" type="PlateEditor"> Plate editor reference.

Default: createPlateFallbackEditor() </APIItem>

<APIItem name="id" type="string"> A unique ID used as a provider scope. Use it if you have multiple `Plate` in the same React tree.

Default: random id </APIItem>

<APIItem name="containerRef" type="React.RefObject<HTMLDivElement>"> A reference to the editor container element. </APIItem> <APIItem name="decorate" type="function" optional> Function used to decorate ranges in the editor.

(options: { editor: PlateEditor; entry: NodeEntry }) => TRange[]

</APIItem> <APIItem name="isMounted" type="boolean" optional> Whether `Editable` is rendered so slate DOM is resolvable. </APIItem> <APIItem name="onChange" type="function" optional> Controlled callback called when the editor state changes.

(options: { editor: PlateEditor; value: ValueOf<PlateEditor> }) => void

</APIItem> <APIItem name="onSelectionChange" type="function" optional> Controlled callback called when the editor.selection changes.

(options: { editor: PlateEditor; selection: TSelection }) => void

</APIItem> <APIItem name="onValueChange" type="function" optional> Controlled callback called when the editor.children changes.

(options: { editor: PlateEditor; value: ValueOf<PlateEditor> }) => void

</APIItem> <APIItem name="onNodeChange" type="function" optional> Controlled callback called when a node operation occurs.

(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. </APIItem>

<APIItem name="onTextChange" type="function" optional> Controlled callback called when a text operation occurs.

(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 </APIItem>

<APIItem name="primary" type="boolean" optional> Whether the editor is primary. If no editor is active, then PlateController will use the first-mounted primary editor.

Default: true </APIItem>

<APIItem name="readOnly" type="boolean" optional> Whether the editor is read-only. </APIItem> <APIItem name="renderElement" type="function" optional> Function to render elements in the editor. </APIItem> <APIItem name="renderLeaf" type="function" optional> Function to render leaf nodes in the editor. </APIItem> <APIItem name="versionDecorate" type="number" optional> Version incremented when calling `redecorate`. This is a dependency of the `decorate` function. </APIItem> <APIItem name="versionEditor" type="number" optional> Version incremented on each editor change. </APIItem> <APIItem name="versionSelection" type="number" optional> Version incremented on each editor.selection change. </APIItem> <APIItem name="versionValue" type="number" optional> Version incremented on each editor.children change. </APIItem> </APIState> </API>

Accessing the Store

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:

import { usePlateState, usePlateValue, usePlateSet } from 'platejs/react'

usePlateState

Get and set a store property value.

const [readOnly, setReadOnly] = usePlateState('readOnly', id?)

usePlateValue

Subscribe to a store property value.

const readOnly = usePlateValue('readOnly', id?)

usePlateSet

Set a store property value.

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.

This is useful when having multiple editors and get one based on DOM events (e.g. the last focused editor).
One of the core plugins of Plate will store the following events.

Last editor ID that has been blurred.

</APIItem> <APIItem name="focus" type="string | null">

Editor ID that is currently being focused.

</APIItem> <APIItem name="last" type="string | null">

Last editor ID.

</APIItem> </APIState> </API>

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.

</APIItem> </APIParameters> <APIReturns type="string"> The plate id from the context if available, otherwise the last event editor ID or `PLATE_SCOPE`. </APIReturns> </API>