Skip to main content

Store

Plate is using a zustand store with a state by id to support multiple editor instances.

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

Store#

Plate Store#

This store is an object whose property keys are editor ids and whose property values are PlateState.

The hook store usePlateStore can be used to subscribe to changes in React.

The vanilla store plateStore can be used outside React.

Event Editor Store#

This store is an object whose property keys are event names (e.g. 'focus') and whose property values are PlateState. This is useful to store multiple editors and select one based on DOM events.

You can extend this store with any event using setEventEditorId.

Plate will store these events out of the box:

  • focus using onFocus
  • blur using onBlur

The hook store useEventEditorStore can be used to subscribe to changes in React.

The vanilla store eventEditorStore can be used outside React.

State#

editor#

  • Slate editor.
  • Default is pipe(createEditor(), withPlate({ id, plugins, options, components }))

enabled#

  • If true, plate will create the editor with withPlate.
  • If false, plate will remove the editor from the store.
  • Default is true.

plugins#

  • Plate plugins.
  • Default is [createReactPlugin(), createHistoryPlugin()].

pluginKeys#

  • Element keys used by the plugins.

value#

  • Editor value.
  • Default is [{ children: [{ text: '' }]}].

Plate Actions#

All the actions are returned by usePlateActions.

If using multiple stores, you should set the first parameter to the store id you want to update.

clearState#

  • Remove state by id. Called by Plate on unmount.

resetEditor#

  • Set a new editor with plate.

setEditor#

  • Set editor.

setEnabled#

  • Set enabled.

setInitialState#

  • Set initial state by id. Called by Plate on mount.

setPlugins#

  • Set plugins.

setPluginKeys#

  • Set pluginKeys.

setValue#

  • This is internally used by Editable.onChange callback when the editor value is used.
  • Except when resetting the editor with resetEditor, you should not use it as it would break the history.
  • If you want to update value with history support, you should use Slate transforms like Transforms.setNodes.

Event Editor Actions#

setEventEditorId#

Selectors#

useEventEditorId#

  • Get the editor id by event key.

useStoreState#

  • Get the whole state by id.

useStoreEditorRef#

  • Get editor ref (similar to useSlateStatic)

useStoreEditorState#

  • Get editor state (similar to useSlate).

useStoreEditorEnabled#

useStoreEditorOptions#

useStoreEditorValue#

useStorePlate#

useStorePlatePluginKeys#