Plate
is using 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.
- Default:
createPlateFallbackEditor()
- Default: random id
editor
: The Plate editor instancenode
: The node after the operationoperation
: The node operation that occurred (insert, remove, set, merge, split, move)prevNode
: The node before the operationeditor
: The Plate editor instancenode
: The parent node containing the text that changedoperation
: The text operation that occurred (insert_text
orremove_text
)prevText
: The text content before the operationtext
: The text content after the operation- Default:
true
Plate editor reference.
A unique ID used as a provider scope. Use it if you have multiple Plate
in the same React tree.
A reference to the editor container element.
Function used to decorate ranges in the editor.
(options: { editor: PlateEditor; entry: NodeEntry }) => TRange[]
Whether Editable
is rendered so slate DOM is resolvable.
Controlled callback called when the editor state changes.
(options: { editor: PlateEditor; value: ValueOf<PlateEditor> }) => void
Controlled callback called when the editor.selection changes.
(options: { editor: PlateEditor; selection: TSelection }) => void
Controlled callback called when the editor.children changes.
(options: { editor: PlateEditor; value: ValueOf<PlateEditor> }) => void
Controlled callback called when a node operation occurs.
(options: {
editor: PlateEditor;
node: Descendant;
operation: NodeOperation;
prevNode: Descendant
}) => void
Parameters:
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.
(options: {
editor: PlateEditor;
node: Descendant;
operation: TextOperation;
prevText: string;
text: string
}) => void
Parameters:
Whether the editor is primary. If no editor is active, then PlateController will use the first-mounted primary editor.
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
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.
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.