This sub-library contains the React-specific logic for Slate.
Components
React components for rendering Slate editors
RenderElementProps
RenderElementProps are passed to the renderElement handler.
RenderLeafProps
RenderLeafProps are passed to the renderLeaf handler.
Editable
The main Slate editor.
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.
1
import{Editable}from'slate-react';
2
​
3
functionMyEditor(){
4
constonClick=event=>{
5
// Implement custom event logic...
6
​
7
// When no value is returned, Slate will execute its own event handler when
8
// neither isDefaultPrevented nor isPropagationStopped was set on the event
9
};
10
​
11
constonDrop=event=>{
12
// Implement custom event logic...
13
​
14
// No matter the state of the event, treat it as being handled by returning
15
// true here, Slate will skip its own event handler
16
returntrue;
17
};
18
​
19
constonDragStart=event=>{
20
// Implement custom event logic...
21
​
22
// No matter the status of the event, treat event as *not* being handled by
23
// returning false, Slate will execute its own event handler afterward