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 state of the Plate editor. It contains information about the editor's ID, its current value, its plugins, and other settings.

State

  • editor PlateEditor

    Plate editor reference.

    • Default: createPlateFallbackEditor()

  • id string

    A unique ID used as a provider scope. Use it if you have multiple Plate in the same React tree.

    • Default: random id

  • containerRef React.RefObject<HTMLDivElement>

    A reference to the editor container element.

  • decorate optional function

    Function used to decorate ranges in the editor.

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

  • isMounted optional boolean

    Whether Editable is rendered so slate DOM is resolvable.

  • onChange optional function

    Controlled callback called when the editor state changes.

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

  • onSelectionChange optional function

    Controlled callback called when the editor.selection changes.

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

  • onValueChange optional function

    Controlled callback called when the editor.children changes.

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

  • primary optional boolean

    Whether the editor is primary. If no editor is active, then PlateController will use the first-mounted primary editor.

    • Default: true

  • readOnly optional boolean

    Whether the editor is read-only.

  • renderElement optional function

    Function to render elements in the editor.

  • renderLeaf optional function

    Function to render leaf nodes in the editor.

  • versionDecorate optional number

    Version incremented when calling redecorate. This is a dependency of the decorate function.

  • versionEditor optional number

    Version incremented on each editor change.

  • versionSelection optional number

    Version incremented on each editor.selection change.

  • versionValue optional number

    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.

State

Collapse all

  • blur string | null

    Last editor ID that has been blurred.

  • focus string | null

    Editor ID that is currently being focused.

  • last string | null

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

useEventPlateId

Get the last event editor ID.

Parameters

Collapse all

  • id string | null

    Returned ID if defined.

Returnsstring

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

存储编辑器 API