Slate React

cette sous‑bibliothèque contient la logique spécifique à react pour slate composants composants react pour le rendu des éditeurs slate renderelementprops renderelementprops sont transmis au gestionnaire renderelement renderleafprops renderleafprops sont transmis au gestionnaire renderleaf modifiable l’éditeur slate principal gestion des événements par défaut, le composant modifiable est livré avec un ensemble de gestionnaires d’événements qui gèrent les comportements typiques d’édition de texte enrichi (par exemple, il implémente ses propres gestionnaires oncopy , onpaste , ondrop , et onkeydown ) dans certains cas, vous pouvez vouloir étendre ou remplacer le comportement par défaut de slate, ce qui peut être fait en transmettant votre propre gestionnaire d’événements au composant modifiable votre gestionnaire d’événement personnalisé peut contrôler si slate doit ou non exécuter son propre traitement d’événement pour un événement donné après l’exécution de votre gestionnaire, en fonction de la valeur de retour de votre gestionnaire comme décrit ci‑dessous 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) le moteur de rendu d’éléments par défaut defaultleaf(props renderleafprops) le moteur de rendu de feuilles personnalisé par défaut slate(editor reacteditor, value node\[], children react reactnode, onchange (value node\[]) => void, \[key string] any) un wrapper autour du provider qui gère les événements onchange , car l’éditeur est un singleton mutable et ne sera donc jamais détecté comme « modifié » autrement hooks hooks react pour les éditeurs slate usefocused obtenir l’état actuel de concentré de l’éditeur usereadonly obtenir l’état actuel de readonly de l’éditeur useselected obtenir l’état actuel de sélectionné d’un élément useslate obtenir l’objet éditeur actuel depuis le contexte react ré‑effectue un rendu du contexte à chaque changement dans l’éditeur useslatestatic obtenir l’objet éditeur actuel depuis le contexte react une version de useslate qui ne ré‑effectue pas le rendu du contexte auparavant appelé useeditor reacteditor une version spécifique à react et au dom de l’interface éditeur elle concerne la traduction entre le dom et slate findkey(editor reacteditor, node node) trouver une clé pour un nœud slate findpath(editor reacteditor, node node) trouver le chemin d’un nœud slate isfocused(editor reacteditor) vérifier si l’éditeur est focalisé isreadonly(editor reacteditor) vérifier si l’éditeur est en mode lecture seule blur(editor reacteditor) retirer le focus de l’éditeur focus(editor reacteditor) donner le focus à l’éditeur deselect(editor reacteditor) désélectionner l’éditeur hasdomnode(editor reacteditor, target domnode, options { editable? boolean } = {}) vérifiez si un nœud dom se trouve dans l’éditeur insertdata(editor reacteditor, data datatransfer) insérez des données depuis un transfert de données dans l’éditeur il s’agit d’une méthode proxy à appeler dans cet ordre insertfragmentdata(editor reacteditor, data datatransfer) puis inserttextdata(editor reacteditor, data datatransfer) insertfragmentdata(editor reacteditor, data datatransfer) insérez des données de fragment depuis un transfert de données dans l’éditeur renvoie true si du contenu a bien été inséré inserttextdata(editor reacteditor, data datatransfer) insérez des données textuelles depuis un transfert de données dans l’éditeur renvoie true si du contenu a bien été inséré setfragmentdata(editor reacteditor, data datatransfer, originevent? 'drag' | 'copy' | 'cut') définit les données du fragment actuellement sélectionné sur un transfert de données todomnode(editor reacteditor, node node) trouvez l’élément dom natif correspondant à un nœud slate todompoint(editor reacteditor, point point) trouvez un point de sélection dom natif correspondant à un point slate todomrange(editor reacteditor, range range) trouvez une plage dom native à partir d’une plage slate toslatenode(editor reacteditor, domnode domnode) trouvez un nœud slate à partir d’un élément dom natif findeventrange(editor reacteditor, event any) obtenez la plage cible à partir d’un événement dom toslatepoint(editor reacteditor, dompoint dompoint) trouvez un point slate à partir du domnode et du domoffset toslaterange(editor reacteditor, domrange domrange | domstaticrange | domselection, options? { exactmatch? boolean } = {}) trouvez une plage slate à partir d’une plage ou sélection dom plugins plugins spécifiques à react pour les éditeurs slate withreact(editor editor) ajoute des comportements spécifiques à react et au dom à l’éditeur lorsqu’il est utilisé avec withhistory , withreact doit être appliqué à l’extérieur par exemple const editor = usememo(() => withreact(withhistory(createeditor())), \[]) utils modules utilitaires privés