Skip to main content

Multiple Editors

Plate support multiple editor instances by using the id prop.

Example#

Let's render 3 editors with common heading and balloon toolbars.

Live Editor
Result
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

Focus editor#

The toolbar actions require an editor with a defined selection, so it needs to be focused.

Plate stores the id of the last focused editor in eventEditorStore, which can then be used by the toolbar actions (or any component outside Plate) to get the editor from plateStore.

Usage:

const id = useEventEditorId('focus');
const editor = useStoreEditorState(id);