Bibliotecas
Pizarra React
20 min
esta subbiblioteca contiene la lógica específica de react para slate componentes componentes de react para renderizar editores de slate renderelementprops renderelementprops se pasan al renderelement controlador renderleafprops renderleafprops se pasan al renderleaf controlador editable el editor principal de slate manejo de eventos por defecto, el editable componente viene con un conjunto de controladores de eventos que manejan comportamientos típicos de edición de texto enriquecido (por ejemplo, implementa su propio oncopy , onpaste , ondrop , y onkeydown controladores) en algunos casos, es posible que desees extender o anular el comportamiento predeterminado de slate, lo cual se puede hacer pasando tu(s) propio(s) controlador(es) de eventos al editable componente tu controlador de eventos personalizado puede controlar si slate debe o no ejecutar su propio manejo de eventos para un evento dado después de que tu controlador se ejecute, dependiendo del valor de retorno de tu controlador de eventos como se describe a continuación 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) el renderizador de elementos predeterminado defaultleaf(props renderleafprops) el renderizador de hojas personalizadas predeterminado slate(editor reacteditor, value node\[], children react reactnode, onchange (value node\[]) => void, \[key string] any) un envoltorio alrededor del proveedor para manejar onchange eventos, porque el editor es un singleton mutable, por lo que nunca se registrará como "cambiado" de otra manera hooks hooks de react para editores de slate usefocused obtén el estado actual enfocado del editor usereadonly obtén el estado actual de solo lectura del editor useselected obtén el estado actual seleccionado de un elemento useslate obtén el objeto editor actual del contexto de react vuelve a renderizar el contexto cada vez que ocurren cambios en el editor useslatestatic obtén el objeto editor actual del contexto de react una versión de useslate que no vuelve a renderizar el contexto anteriormente llamado useeditor reacteditor una versión específica de react y dom del editor interfaz todo sobre la traducción entre el dom y slate findkey(editor reacteditor, node node) encuentra una clave para un nodo de slate findpath(editor reacteditor, node node) encuentra la ruta del nodo slate isfocused(editor reacteditor) verifica si el editor está enfocado isreadonly(editor reacteditor) verifica si el editor está en modo de solo lectura blur(editor reacteditor) desenfoca el editor focus(editor reacteditor) enfoca el editor deselect(editor reacteditor) deselecciona el editor hasdomnode(editor reacteditor, target domnode, options { editable? boolean } = {}) verifica si un nodo dom está dentro del editor insertdata(editor reacteditor, data datatransfer) inserta datos de un datatransfer en el editor setfragmentdata(editor reacteditor, data datatransfer) establece datos del fragmento actualmente seleccionado en un datatransfer todomnode(editor reacteditor, node node) encuentra el elemento dom nativo de un nodo slate todompoint(editor reacteditor, point point) encuentra un punto de selección dom nativo a partir de un punto de slate todomrange(editor reacteditor, range range) encuentra un rango dom nativo a partir de un rango toslatenode(editor reacteditor, domnode domnode) encuentra un nodo de slate a partir de un elemento findeventrange(editor reacteditor, event any) obtén el rango objetivo de un evento toslatepoint(editor reacteditor, dompoint dompoint) encuentra un punto de slate a partir de un punto de selección dom domnode y domoffset toslaterange(editor reacteditor, domrange domrange | domstaticrange | domselection) encuentra un rango de slate a partir de un rango o selección dom plugins plugins específicos de react para editores de slate withreact(editor editor) agrega comportamientos específicos de react y dom al editor utils módulos de conveniencia privados
