Bibliothèques
Slate Réagir
20 min
cette sous bibliothèque contient la logique spécifique à react pour slate composants composants react pour le rendu des éditeurs slate renderelementprops renderelementprops sont passés au renderelement gestionnaire renderleafprops renderleafprops sont passés au renderleaf gestionnaire éditable l'éditeur principal de slate gestion des événements par défaut, le editable composant 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 son propre oncopy , onpaste , ondrop , et onkeydown gestionnaires) dans certains cas, vous voudrez peut être étendre ou remplacer le comportement par défaut de slate, ce qui peut être fait en passant vos propres gestionnaires d'événements au editable composant votre gestionnaire d'événements personnalisé peut contrôler si slate doit ou non exécuter sa propre gestion des événements pour un événement donné après que votre gestionnaire s'exécute, en fonction de la valeur de retour de votre gestionnaire d'événements 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 exectue its own event handler afterward return false; }; return ( \<editable onclick={onclick} ondrop={ondrop} ondragstart={ondragstart} {/ /} /> ) } defaultelement(props renderelementprops) le rendu d'élément par défaut defaultleaf(props renderleafprops) le rendu de feuille personnalisé par défaut slate(editor reacteditor, value node\[], children react reactnode, onchange (value node\[]) => void, \[key string] any) un wrapper autour du fournisseur pour gérer onchange événements, car l'éditeur est un singleton mutable donc il ne s'enregistrera jamais comme "modifié" sinon hooks hooks react pour les éditeurs slate usefocused obtenez l'état actuel focalisé de l'éditeur usereadonly obtenez l'état actuel lecture seule de l'éditeur useselected obtenez l'état actuel sélectionné d'un élément useslate obtenez l'objet éditeur actuel à partir du contexte react re rend le contexte chaque fois que des changements se produisent dans l'éditeur useslatestatic obtenez l'objet éditeur actuel à partir du contexte react une version de useslate qui ne re rend pas le contexte précédemment appelé useeditor reacteditor une version spécifique à react et au dom de l' éditeur interface tout sur la traduction entre le dom et slate findkey(editor reacteditor, node node) trouvez une clé pour un nœud slate findpath(editor reacteditor, node node) trouvez le chemin du nœud slate estfocalisé(editor reacteditor) vérifiez si l'éditeur est focalisé estlectureseule(editor reacteditor) vérifiez si l'éditeur est en mode lecture seule flou(editor reacteditor) flou l'éditeur focaliser(editor reacteditor) focaliser l'éditeur désélectionner(editor reacteditor) désélectionner l'éditeur anoeuddom(editor reacteditor, cible domnode, options { editable? boolean } = {}) vérifiez si un nœud dom est dans l'éditeur insérerdonnées(editor reacteditor, données datatransfer) insérer des données d'un datatransfer dans l'éditeur définirdonnéesfragment(editor reacteditor, données datatransfer) définit les données du fragment actuellement sélectionné sur un datatransfer versnoeuddom(editor reacteditor, nœud node) trouvez l'élément dom natif à partir d'un nœud slate todompoint(editor reacteditor, point point) trouvez un point de sélection dom natif à partir d'un point slate todomrange(editor reacteditor, range range) trouvez une plage dom native à partir d'un plage toslatenode(editor reacteditor, domnode domnode) trouvez un nœud slate à partir d'un élément findeventrange(editor reacteditor, event any) obtenez la plage cible d'un événement toslatepoint(editor reacteditor, dompoint dompoint) trouvez un point slate à partir d'un domnode et domoffset toslaterange(editor reacteditor, domrange domrange | domstaticrange | domselection) trouvez une plage slate à partir d'une plage ou d'une 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 utils modules de commodité privés
