Docs
Store

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

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

    • Default: PLATE_SCOPE

    Slate editor reference.

    • See editor.
    • Default: pipe(createTEditor(), withPlate({ id, plugins, options, components }))

    Whether the PlateContent is mounted.

    Whether the editor is read-only.

    • Default: false

    Editor plugins.

    Value of the editor.

    • See value.
    • Default: [{ type: 'p', children: [{ text: '' }]}]

    Version incremented on each editor change.

    Version incremented on each editor.selection change.

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

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.

useResetPlateEditor

Reset an editor with the same plugins.

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 PlateId from the context if available, otherwise the last event editor ID or PLATE_SCOPE.

PlatePluginPlate Utils