Aplicando Formato Personalizado

en la guía anterior aprendimos cómo crear tipos de bloques personalizados que renderizan fragmentos de texto dentro de diferentes contenedores pero slate permite más que solo "bloques" qweqwrqwr qrqw rqwr rqw en esta guía, te mostraremos cómo agregar opciones de formato personalizadas, como negrita , cursiva , código o tachado así que comenzamos 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} /> } }, \[]) return ( \<slate editor={editor} value={value} onchange={value => setvalue(value)}> \<editable renderelement={renderelement} onkeydown={event => { if (event key === '`' && event ctrlkey) { event preventdefault() const { selection } = editor const \[match] = editor nodes(editor, { match n => n type === 'code', }) transforms setnodes( editor, { type match ? 'paragraph' 'code' }, { match n => editor isblock(editor, n) } ) } }} /> \</slate> ) } y ahora, editaremos el onkeydown controlador para que cuando presiones control b , se agregue un formato en negrita al texto actualmente seleccionado 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} /> } }, \[]) return ( \<slate editor={editor} value={value} onchange={value => setvalue(value)}> \<editable renderelement={renderelement} onkeydown={event => { if (!event ctrlkey) { return } switch (event key) { // when "`" is pressed, keep our existing code block logic case '`' { event preventdefault() const \[match] = editor nodes(editor, { match n => n type === 'code', }) transforms setnodes( editor, { type match ? 'paragraph' 'code' }, { match n => editor isblock(editor, n) } ) break } // when "b" is pressed, bold the text in the selection case 'b' { event preventdefault() transforms setnodes( editor, { bold true }, // apply it to text nodes, and split the text node up if the // selection is overlapping only part of it { match n => text istext(n), split true } ) break } } }} /> \</slate> ) } está bien, así que hemos configurado el manejador de teclas de acceso rápido ¡pero! si ahora intentas seleccionar texto y presionar ctrl b , no notarás ningún cambio eso es porque no le hemos dicho a slate cómo renderizar una marca de "negrita" para cada formato que agregues, slate dividirá el contenido de texto en "hojas", y necesitas decirle a slate cómo leerlo, al igual que para los elementos así que definamos un leaf componente // define a react component to render leaves with bold text const leaf = props => { return ( \<span { props attributes} style={{ fontweight props leaf bold ? 'bold' 'normal' }} \> {props children} \</span> ) } bastante familiar, ¿verdad? y ahora, hablemos de esa hoja para hacer eso, pasaremos la renderleaf propiedad a nuestro editor 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} /> } }, \[]) // define a leaf rendering function that is memoized with `usecallback` const renderleaf = usecallback(props => { return \<leaf { props} /> }, \[]) return ( \<slate editor={editor} value={value} onchange={value => setvalue(value)}> \<editable renderelement={renderelement} // pass in the `renderleaf` function 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> ) } const leaf = props => { return ( \<span { props attributes} style={{ fontweight props leaf bold ? 'bold' 'normal' }} \> {props children} \</span> ) } ahora, si intentas seleccionar un fragmento de texto y presionar ctrl b ¡deberías verlo volverse negrita! ¡magia!