Slate React

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 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} {/ /} /> ) } defaultelement(props renderelementprops) the default element renderer defaultleaf(props renderleafprops) the default custom leaf renderer slate(editor reacteditor, value node\[], children react reactnode, onchange (value node\[]) => void, \[key string] any) a wrapper around the provider to handle onchange events, because the editor is a mutable singleton so it won't ever register as "changed" otherwise hooks react hooks for slate editors usefocused get the current focused state of the editor usereadonly get the current readonly state of the editor useselected get the current selected state of an element useslate get the current editor object from the react context re renders the context whenever changes occur in the editor useslatestatic get the current editor object from the react context a version of useslate that does not re render the context previously called useeditor reacteditor a react and dom specific version of the editor interface all about translating between the dom and slate findkey(editor reacteditor, node node) find a key for a slate node findpath(editor reacteditor, node node) find the path of slate node isfocused(editor reacteditor) check if the editor is focused isreadonly(editor reacteditor) check if the editor is in read only mode blur(editor reacteditor) blur the editor focus(editor reacteditor) focus the editor deselect(editor reacteditor) deselect the editor hasdomnode(editor reacteditor, target domnode, options { editable? boolean } = {}) check if a dom node is within the editor insertdata(editor reacteditor, data datatransfer) insert data from a datatransfer into the editor this is a proxy method to call in this order insertfragmentdata(editor reacteditor, data datatransfer) and then inserttextdata(editor reacteditor, data datatransfer) insertfragmentdata(editor reacteditor, data datatransfer) insert fragment data from a datatransfer into the editor returns true if some content has been effectively inserted inserttextdata(editor reacteditor, data datatransfer) insert text data from a datatransfer into the editor returns true if some content has been effectively inserted setfragmentdata(editor reacteditor, data datatransfer, originevent? 'drag' | 'copy' | 'cut') sets data from the currently selected fragment on a datatransfer todomnode(editor reacteditor, node node) find the native dom element from a slate node todompoint(editor reacteditor, point point) find a native dom selection point from a slate point todomrange(editor reacteditor, range range) find a native dom range from a slate range toslatenode(editor reacteditor, domnode domnode) find a slate node from a native dom element findeventrange(editor reacteditor, event any) get the target range from a dom event toslatepoint(editor reacteditor, dompoint dompoint) find a slate point from a dom selection's domnode and domoffset toslaterange(editor reacteditor, domrange domrange | domstaticrange | domselection, options? { exactmatch? boolean } = {}) find a slate range from a dom range or selection plugins react specific plugins for slate editors withreact(editor editor) adds react and dom specific behaviors to the editor when used with withhistory , withreact should be applied outside for example const editor = usememo(() => withreact(withhistory(createeditor())), \[]) utils private convenience modules