Store

API reference for Plate store.

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

Plate Store

State

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.

Attributes

Collapse all

    Slate editor reference.

    • Default: createPlateFallbackEditor()

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

    • Default: random id

    A reference to the editor container element.

    Function used to decorate ranges in the editor.

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

    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

    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.

Exposed Store Keys

The following store keys are exposed in editor.setPlateState:

  • readOnly
  • onChange
  • decorate
  • renderElement
  • renderLeaf

Selectors

Use usePlateSelectors(id).<state property>() when you need to subscribe to a value.

  • Example: const value = usePlateSelectors(id).value() will subscribe to value changes.
  • It's using useAtomValue under the hood.

Actions

Use usePlateStates(id).<state property>() when you need both the value and the setter of a store property.

  • Example: const [value, setValue] = usePlateStates(id).value()
  • It's using useAtom under the hood.

useRedecorate

Redecorate the editor.

Parameters

Collapse all

    Editor 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

Attributes

Collapse all

    Last editor ID that has been blurred.

    Editor ID that is currently being focused.

    Last editor ID.

useEventEditorSelectors

Hook selectors.

  • Example: useEventEditorSelectors().focus() will get the last focused editor ID.

useEventPlateId

Get the last event editor ID.

Parameters

Collapse all

    Returned ID if defined.

Returns

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

PlatePluginPlate Utils