Ejecutando Comandos

hasta ahora, todo lo que hemos aprendido ha sido sobre cómo escribir lógica única para tu editor slate específico pero una de las cosas más poderosas de slate es que te permite modelar tu "dominio" de texto enriquecido específico como desees, y escribir menos código único en las guías anteriores hemos escrito algo de código útil para manejar bloques de código de formato y marcas en negrita y hemos conectado el onkeydown controlador para invocar ese código pero siempre lo hemos hecho utilizando los editor ayudantes integrados directamente, en lugar de usar "comandos" slate te permite aumentar el editor objeto para manejar tus propios comandos de texto enriquecido personalizados y puedes incluso usar "plugins" preempaquetados que añaden un conjunto dado de funcionalidades veamos cómo funciona esto comenzaremos con 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 ' }], }, ]) const renderelement = usecallback(props => { switch (props element type) { case 'code' return \<codeelement { props} /> default return \<defaultelement { props} /> } }, \[]) const renderleaf = usecallback(props => { return \<leaf { props} /> }, \[]) return ( \<slate editor={editor} value={value} onchange={value => setvalue(value)}> \<editable renderelement={renderelement} renderleaf={renderleaf} onkeydown={event => { if (!event ctrlkey) { return } switch (event key) { case '`' { event preventdefault() const \[match] = editor nodes(editor, { match n => n type === 'code', }) transforms setnodes( editor, { type match ? null 'code' }, { match n => editor isblock(editor, n) } ) break } case 'b' { event preventdefault() transforms setnodes( editor, { bold true }, { match n => text istext(n), split true } ) break } } }} /> \</slate> ) } tiene el concepto de "bloques de código" y "formato en negrita" pero estas cosas están todas definidas en casos únicos dentro del onkeydown controlador si quisieras reutilizar esa lógica en otro lugar, tendrías que extraerla en su lugar, podemos implementar estos conceptos específicos de dominio creando funciones auxiliares personalizadas // define our own custom set of helpers const customeditor = { isboldmarkactive(editor) { const \[match] = editor nodes(editor, { match n => n bold === true, universal true, }) return !!match }, iscodeblockactive(editor) { const \[match] = editor nodes(editor, { match n => n type === 'code', }) return !!match }, toggleboldmark(editor) { const isactive = customeditor isboldmarkactive(editor) transforms setnodes( editor, { bold isactive ? null true }, { match n => text istext(n), split true } ) }, togglecodeblock(editor) { const isactive = customeditor iscodeblockactive(editor) transforms setnodes( editor, { type isactive ? null 'code' }, { match n => editor isblock(editor, n) } ) }, } const app = () => { const editor = usememo(() => withreact(createeditor()), \[]) const \[value, setvalue] = usestate(\[ { type 'paragraph', children \[{ text 'a line of text in a paragraph ' }], }, ]) const renderelement = usecallback(props => { switch (props element type) { case 'code' return \<codeelement { props} /> default return \<defaultelement { props} /> } }, \[]) const renderleaf = usecallback(props => { return \<leaf { props} /> }, \[]) return ( \<slate editor={editor} value={value} onchange={value => setvalue(value)}> \<editable renderelement={renderelement} renderleaf={renderleaf} onkeydown={event => { if (!event ctrlkey) { return } // replace the `onkeydown` logic with our new commands switch (event key) { case '`' { event preventdefault() customeditor togglecodeblock(editor) break } case 'b' { event preventdefault() customeditor toggleboldmark(editor) break } } }} /> \</slate> ) } ahora nuestros comandos están claramente definidos y puedes invocarlos desde cualquier lugar donde tengamos acceso a nuestro editor objeto por ejemplo, desde botones de barra de herramientas hipotéticos const app = () => { const editor = usememo(() => withreact(createeditor()), \[]) const \[value, setvalue] = usestate(\[ { type 'paragraph', children \[{ text 'a line of text in a paragraph ' }], }, ]) const renderelement = usecallback(props => { switch (props element type) { case 'code' return \<codeelement { props} /> default return \<defaultelement { props} /> } }, \[]) const renderleaf = usecallback(props => { return \<leaf { props} /> }, \[]) return ( // add a toolbar with buttons that call the same methods \<slate editor={editor} value={value} onchange={value => setvalue(value)}> \<div> \<button onmousedown={event => { event preventdefault() customeditor toggleboldmark(editor) }} \> bold \</button> \<button onmousedown={event => { event preventdefault() customeditor togglecodeblock(editor) }} \> code block \</button> \</div> \<editable editor={editor} renderelement={renderelement} renderleaf={renderleaf} onkeydown={event => { if (!event ctrlkey) { return } switch (event key) { case '`' { event preventdefault() customeditor togglecodeblock(editor) break } case 'b' { event preventdefault() customeditor toggleboldmark(editor) break } } }} /> \</slate> ) } ese es el beneficio de extraer la lógica ¡y ahí lo tienes! acabamos de agregar un montón de funcionalidad al editor con muy poco trabajo y podemos mantener toda nuestra lógica de comandos probada y aislada en un solo lugar, lo que hace que el código sea más fácil de mantener