Skip to main content

Store

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

note

To use the store hooks in a component, it needs to be wrapped by PlateProvider or Plate.

Plate Store#

Plate Store is a jotai store that implements the following state:

State#

decorate#

editableProps#

editor#

isRendered#

boolean

  • Whether Editable is rendered so slate DOM is resolvable.

keyEditor#

  • A random key updated on each editor change.

keySelection#

  • A random key updated on each editor.selection change.

onChange#

plugins#

renderElement#

renderLeaf#

value#

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 usePlateActions(id).<state property>() when you need to update the value of a store property.
  • Example: const setValue = usePlateActions(id).value().
  • It's using useUpdateAtom 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.

useResetPlateEditor()#

  • Set a new editor with plate.

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#

focus#

  • the last focused editor id

blur#

  • the last blurred editor id (sets focus to null)

last#

  • the last defined editor id

Hooks#

useEventEditorSelectors#

  • Hook selectors
  • Example: useEventEditorSelectors().focus() will get the last focused editor id.
  • See zustood hooks

useEventPlateId#

  • Get the context plate id if called in a PlateProvider.
  • If not defined, it returns the last event editor id: focus, blur or last.
  • If not defined, PLATE_SCOPE is returned.