Agregar Controladores de Eventos

está bien, así que tienes slate instalado y renderizado en la página, y cuando escribes en él, puedes ver los cambios reflejados pero quieres hacer más que solo escribir una cadena de texto sin formato lo que hace que slate sea genial es lo fácil que es personalizarlo al igual que otros componentes de react a los que estás acostumbrado, slate te permite pasar manejadores que se activan en ciertos eventos utilicemos el onkeydown manejador para cambiar el contenido del editor cuando presionamos una tecla aquí está nuestra aplicación de antes const app = () => { const editor = usememo(() => withreact(createeditor()), \[]) const \[value, setvalue] = usestate(\[ { type 'paragraph', children \[{ text 'a line of text in a paragraph ' }], }, ]) return ( \<slate editor={editor} value={value} onchange={value => setvalue(value)}> \<editable /> \</slate> ) } ahora añadimos un onkeydown manejador const app = () => { const editor = usememo(() => withreact(createeditor()), \[]) const \[value, setvalue] = usestate(\[ { type 'paragraph', children \[{ text 'a line of text in a paragraph ' }], }, ]) return ( \<slate editor={editor} value={value} onchange={value => setvalue(value)}> \<editable // define a new handler which prints the key that was pressed onkeydown={event => { console log(event key) }} /> \</slate> ) } genial, ahora cuando se presiona una tecla en el editor, su código de tecla correspondiente se registra en la consola ahora queremos hacer que realmente cambie el contenido para los propósitos de nuestro ejemplo, implementemos convertir todos los ampersands, & , pulsaciones de teclas en la palabra y al ser tipeada nuestro onkeydown manejador podría verse así const app = () => { const editor = usememo(() => withreact(createeditor()), \[]) const \[value, setvalue] = usestate(\[ { type 'paragraph', children \[{ text 'a line of text in a paragraph ' }], }, ]) return ( \<slate editor={editor} value={value} onchange={value => setvalue(value)}> \<editable onkeydown={event => { if (event key === '&') { // prevent the ampersand character from being inserted event preventdefault() // execute the `inserttext` method when the event occurs editor inserttext('and') } }} /> \</slate> ) } con eso añadido, intenta escribir & , y deberías ver que de repente se convierte en y en su lugar! esto ofrece una idea de lo que se puede hacer con los manejadores de eventos de slate cada uno será llamado con el evento objeto, y puedes usar tu editor para realizar comandos en respuesta ¡sencillo!