Plate is using jotai-x to store the state of the editor.
The PlateStoreState object stores React shell state around a Plate editor: the
editor reference, container refs, mounted state, renderer fallbacks, and
decorations. Commit callbacks are Plate props, not mutable store state.
Plate editor reference.
Plate keeps a stable inert editor internally while a controller has no active
editor so hook subscriptions retain their call shape. Public editor hooks do
not expose that internal value: useEditor() requires an active provider and
useActiveEditor() returns null when no editor is active.
A reference to the Plate shell container element.
Function used to decorate ranges in the editor.
(options: { editor: PlateEditor; entry: NodeEntry }) => Range[](options: { editor: PlateEditor; entry: NodeEntry }) => Range[]Whether Editable is rendered so Plite DOM is resolvable.
Whether the editor is primary. If no editor is active, then PlateController will use the first-mounted primary editor.
trueFunction to render elements in the editor.
Function to render leaf nodes in the editor.
Function to render text nodes in the editor.
import { useEditorPlugin, usePlateStore } from 'platejs/react'
// Direct store access
const store = usePlateStore(id?)
// Via the plugin portal
const store = useEditorPlugin(myPlugin).storeimport { useEditorPlugin, usePlateStore } from 'platejs/react'
// Direct store access
const store = usePlateStore(id?)
// Via the plugin portal
const store = useEditorPlugin(myPlugin).storeNote: The id parameter is optional and defaults to the closest editor.
The following hooks are available to interact with the Plate store:
import { usePlateState, usePlateValue, usePlateSet } from 'platejs/react'import { usePlateState, usePlateValue, usePlateSet } from 'platejs/react'Get and set a store property value.
const [readOnly, setReadOnly] = usePlateState('readOnly', id?)const [readOnly, setReadOnly] = usePlateState('readOnly', id?)Subscribe to a store property value.
const readOnly = usePlateValue('readOnly', id?)const readOnly = usePlateValue('readOnly', id?)Set a store property value.
const setReadOnly = usePlateSet('readOnly', id?)const setReadOnly = usePlateSet('readOnly', id?)This store is an object whose property keys are event names (e.g. 'focus') and whose property values are editor IDs.
import { EventEditorStore, useEventEditorValue } from 'platejs'
// Get a value
const focusedId = EventEditorStore.get('focus')
// Set a value
EventEditorStore.set('focus', editorId)
// Subscribe to changes
const focusedId = useEventEditorValue('focus')import { EventEditorStore, useEventEditorValue } from 'platejs'
// Get a value
const focusedId = EventEditorStore.get('focus')
// Set a value
EventEditorStore.set('focus', editorId)
// Subscribe to changes
const focusedId = useEventEditorValue('focus')Get the last event editor ID.