React hooks for editor state

All hooks must be used inside an EditorProvider. They use Zustand selectors for optimal re-render performance.

Returns the dispatch function to trigger editor actions.

const dispatch = useEditorDispatch()

Returns the current content container (root node of the document tree).

const container = useContainer()

Returns the ID of the currently focused block.

const activeNodeId = useActiveNodeId()

Returns the current text selection information including offset, length, and formats.

const selection = useSelection()

Returns a specific node by ID with automatic re-renders when it changes.

const node = useBlockNode(nodeId)

Returns an array of child node IDs for efficient list rendering.

const childIds = useContainerChildrenIds()

Access the full editor state (container, selection, history, metadata).

const state = useEditorState()

Returns whether a specific node is currently active/focused.

const isActive = useIsNodeActive(nodeId)

Access the raw Zustand store instance for advanced use cases.

const store = useEditorStoreInstance()