Skip to main content


useEditorEvent(event, handler);



A case-sensitive string representing the event type to listen to


A callback function that returns a boolean.

When an event of a type matching event is triggered, this function will be called.

Return value



This hook allows you to trigger behaviour based on events within the editor

The callback function given as the second parameter, should return a boolean indicating whether any other event handlers should be run.

const handleEvent = useCallback((event) => {
console.log('Event triggered', event);

// Prevent other event handlers being run
// return true;

// Allow other event handlers to run
return false;
}, []);

return true means no other event handlers for this type should be run.

This should be used with caution, as returning true could prevent expected standard browser behaviour.

return false means allow other event handlers for this type to be run.

const handleMouseDown = useCallback((event) => {
console.log('Mousedown event occured');

// Allow other mouse down event handlers to be run.
return false;
}, []);

useEditorEvent('mousedown', handleMouseDown);

useEditorEvent is syntax sugar, it is a specialised application of the useExtension hook.

({ addHandler }) => {
return addHandler(event, handler);
[event, handler],

You could create custom hooks and adopt this pattern for other handlers. For instance

function useMentionAtomClick(handler) {
({ addHandler }) => {
return addHandler('onClick', handler);


Remirror allows you to listen multiple event types within the editor. These can be used to trigger behaviour via an event handler.

Remirror supports the following events

blur, focus, mousedown, mouseup, mouseenter, mouseleave, textInput, keypress, keyup, keydown, click, clickMark, contextmenu, hover, scroll, copy, cut and paste.

Unless listed in the exceptions below, the event handlers have the signature.

(event) => boolean


click, clickMark, contextmenu and hover have a second parameter, an object with helper methods to interrogate the source of the event.

const handleClick = useCallback((event, props) => {
const { pos, } = props;
console.log('Clicked pos', pos, 'rest', rest);

return false;
}, []);

useEditorEvent('click', handleClick);

textinput, has no associated event, and instead provides a from and to position, and the added text.

({ from, to, text }) => boolean