Store

PreviousNext

API reference for Plate store.

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

Plate Store

The PlateStoreState object stores the React shell state around a Plate editor: the editor reference, container refs, render callbacks, and controlled-change handlers.

State

    Plate editor reference.

    • Default: createPlateFallbackEditor()

    A reference to the Plate shell container element.

    Function used to decorate ranges in the editor.

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

    Whether Editable is rendered so Plite DOM is resolvable.

    Controlled callback called when the editor state changes.

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

    Controlled callback called when the editor.selection changes.

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

    Controlled callback called when the editor.children changes.

    (options: { editor: PlateEditor; value: ValueOf<PlateEditor> }) => void
    (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
    (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.

    (options: { 
  editor: PlateEditor; 
  node: Descendant; 
  operation: TextOperation; 
  prevText: string; 
  text: string 
}) => void
    (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

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
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'
import { usePlateState, usePlateValue, usePlateSet } from 'platejs/react'

usePlateState

Get and set a store property value.

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

usePlateValue

Subscribe to a store property value.

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

usePlateSet

Set a store property value.

const setReadOnly = usePlateSet('readOnly', id?)
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.

State

    Last editor ID that has been blurred.

    Editor ID that is currently being focused.

    Last editor ID.

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')
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.

Parameters

    Returned ID if defined.

Returnsstring

    The plate id from the context if available, otherwise the last event editor ID or PLATE_SCOPE.