Skip to main content

Store

Plate is using a zustood store for each editor, stored by id.

If rendering only one editor, the store id is optional, the default being 'main'.

Plate Store#

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

State#

decorate#

editableProps#

editor#

enabled#

isRendered#

  • Whether Editable is rendered so slate DOM is resolvable.

keyEditor#

  • A key that is incremented on each editor change.

keyPlugins#

  • A key that is incremented on each editor.plugins change.

keySelection#

  • A key that is incremented on each editor.selection change.

onChange#

plugins#

renderElement#

renderLeaf#

value#

Hook Selectors#

  • Use usePlateSelectors(id).<state property>() when you need to subscribe to a value.
  • Example: usePlateSelectors(id).value() will subscribe to value changes.
  • See zustood hooks

Getters#

  • Use getPlateSelectors(id).<state property>() when you don't need to subscribe to a value.
  • Example getPlateSelectors(id).value() will get value.
  • See zustood getters

Actions#

  • Plate subscribes to the store state so you can update the store state in a flexible way.
  • Use getPlateActions(id).<state property>(<new value>) when you need to update the value of a store property.
  • Example: getPlateActions(id).value(<new value>) will update value.
  • See zustood actions

redecorate()#

  • Redecorate the editor.

Provider#

PlateProvider#

You can't access the store before it's initialized. Two ways of doing this:

  • Inside Plate component: the store is initialized, you can access it.
  • Outside Plate component (e.g. for a shared toolbar): the store is not initialized, you will need to render PlateProvider above your accessing component.

The only prop of PlateProvider is id which is the id of the store (defaults to 'main').

withPlateProvider#

  • HOC that wraps your component with PlateProvider.
  • Usage: withPlateProvider(<Component>, id)

Plates Store#

This store is an object whose property keys are editor ids and whose property values are zustood stores (it's a "store of stores"), where the state implements PlateState.

In other words, platesStore is a store that can store many plate stores by id, looking to this:

<zustood store>({
'main': <zustood store>({
id: 'main',
editor: ...,
}),
'other': <zustood store>({
id: 'other',
editor: ...,
}),
...
})

Plate is taking care of the store initialization and updates. You will not need to use this store directly.

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

useEventEditorId#

  • Get last event editor id: focus, blur or last.

useEventPlateId#

  • Get the context plate id if called in a PlateProvider
  • If the latter is not defined, useEventEditorId will be used.

HOC#

PlateEventProvider#

  • PlateProvider where id is useEventPlateId

withPlateEventProvider#

  • HOC that will add PlateEventProvider above a component.
  • Useful for toolbars shared between multiple editors.