Skip to main content

Multiple Editors

Slate Plugins 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.

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

Usage:

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