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

id PlateId

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

• Default: PLATE_SCOPE

editor PlateEditor

Slate editor reference.

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

isMounted boolean

Whether the PlateContent is mounted.

readOnly boolean

Whether the editor is read-only.

• Default: false

plugins WithPlatePlugin[]

Editor plugins.

• See plugins.
• Default: []

value Value

Value of the editor.

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

versionEditor number

Version incremented on each editor change.

versionSelection number

Version incremented on each editor.selection change.

versionDecorate number

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

onChange function

• See onChange.

decorate function

• See decorate.

renderElement function

• See renderElement.

renderLeaf function

• See 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

id optional string

Editor ID.

useResetPlateEditor

Reset an editor with the same plugins.

Parameters

Collapse all

id optional string

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

blur PlateId | null

Last editor ID that has been blurred.

focus PlateId | null

Editor ID that is currently being focused.

last PlateId | null

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

id PlateId | null

Returned ID if defined.

Returns

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