Comment on page
Event Handling
By default, the
Editable component comes with a set of event handlers that handle typical rich-text editing behaviors (for example, it implements its own onCopy, onPaste, onDrop, and onKeyDown handlers).In some cases you may want to extend or override Slate's default behavior, which can be done by passing your own event handler(s) to the
Editable component.Your custom event handler can control whether or not Slate should execute its own event handling for a given event after your handler runs depending on the return value of your event handler as described below.
import {Editable} from 'slate-react';
function MyEditor() {
const onClick = event => {
// Implement custom event logic...
// When no value is returned, Slate will execute its own event handler when
// neither isDefaultPrevented nor isPropagationStopped was set on the event
};
const onDrop = event => {
// Implement custom event logic...
// No matter the state of the event, treat it as being handled by returning
// true here, Slate will skip its own event handler
return true;
};
const onDragStart = event => {
// Implement custom event logic...
// No matter the status of the event, treat event as *not* being handled by
// returning false, Slate will execute its own event handler afterward
return false;
};
return (
<Editable
onClick={onClick}
onDrop={onDrop}
onDragStart={onDragStart}
{/*...*/}
/>
)
}
Last modified 7mo ago