Renderizado

una de las mejores partes de slate es que está construido con react, por lo que se integra perfectamente en tu aplicación existente no reinventa su propia capa de vista que tienes que aprender intenta mantener todo lo más parecido a react posible con ese fin, slate te da control sobre el comportamiento de renderizado de tus nodos y propiedades personalizados en tu dominio de richtext puedes definir estos comportamientos pasando "props de renderizado" al nivel superior \<editable> componente por ejemplo, si quisieras renderizar componentes de elementos personalizados, pasarías el renderelement prop import { createeditor } from 'slate' import { slate, editable, withreact } from 'slate react' const myeditor = () => { const editor = usememo(() => withreact(createeditor()), \[]) const renderelement = usecallback(({ attributes, children, element }) => { switch (element type) { case 'quote' return \<blockquote { attributes}>{children}\</blockquote> case 'link' return ( \<a { attributes} href={element url}> {children} \</a> ) default return \<p { attributes}>{children}\</p> } }, \[]) return ( \<slate editor={editor}> \<editable renderelement={renderelement} /> \</slate> ) } 🤖 asegúrate de mezclar props attributes y renderizar props children en tus componentes personalizados los atributos deben ser añadidos al elemento dom de nivel superior dentro del componente, ya que son necesarios para que las funciones de ayuda dom de slate funcionen y los hijos son el contenido de texto real de tu documento que slate gestiona automáticamente por ti no tienes que usar elementos html simples, también puedes usar tus propios componentes personalizados de react const renderelement = usecallback(props => { switch (props element type) { case 'quote' return \<quoteelement { props} /> case 'link' return \<linkelement { props} /> default return \<defaultelement { props} /> } }, \[]) por ejemplo, si quisieras renderizar componentes de elementos personalizados, pasarías el renderelement prop hojas cuando se renderiza el formato a nivel de texto, los caracteres se agrupan en "hojas" de texto que contienen el mismo formato aplicado a ellos para personalizar el renderizado de cada hoja, utilizas un renderleaf prop const renderleaf = usecallback(({ attributes, children, leaf }) => { return ( \<span { attributes} style={{ fontweight leaf bold ? 'bold' 'normal', fontstyle leaf italic ? 'italic' 'normal', }} \> {children} \</span> ) }, \[]) sin embargo, observa cómo lo hemos manejado de manera ligeramente diferente a renderelement dado que el formato de texto tiende a ser bastante simple, hemos optado por deshacernos de la switch declaración y simplemente alternar algunos estilos en su lugar (¡pero no hay nada que te impida usar componentes personalizados si lo deseas!) una desventaja del formato a nivel de texto es que no puedes garantizar que cualquier formato dado sea "contiguo", lo que significa que se mantiene como una sola hoja esta limitación con respecto a las hojas es similar al dom, donde esto es inválido \<em>t\<strong>e\</em>x\</strong>t debido a que los elementos en el ejemplo anterior no se cierran correctamente, son inválidos en su lugar, escribirías el html anterior de la siguiente manera \<em>t\</em>\<strong>\<em>e\</em>x\</strong>t si por casualidad agregaste otra sección superpuesta de \<strike> a ese texto, es posible que tengas que reorganizar las etiquetas de cierre una vez más renderizar hojas en slate es similar no puedes garantizar que, aunque una palabra tenga un tipo de formato aplicado, esa hoja será contigua, porque depende de cómo se superponga con otros formatos por supuesto, esto de las hojas suena bastante complejo pero no tienes que pensar mucho en ello, siempre y cuando uses el formato a nivel de texto y el formato a nivel de elemento para sus propósitos previstos las propiedades de texto son para no contiguo , formato a nivel de carácter las propiedades de elemento son para contiguo , elementos semánticos en el documento decoraciones las decoraciones son otro tipo de formato a nivel de texto son similares a las propiedades personalizadas antiguas, excepto que cada una se aplica a un rango del documento en lugar de estar asociada con un nodo de texto dado sin embargo, las decoraciones se calculan en el tiempo de renderizado en función del contenido mismo esto es útil para el formato dinámico como el resaltado de sintaxis o palabras clave de búsqueda, donde los cambios en el contenido (o algunos datos externos) tienen el potencial de cambiar el formato las decoraciones son diferentes de las marcas en que no se almacenan en el estado del editor ¡barras de herramientas, menús, superposiciones y más! además de controlar la representación de nodos dentro de slate, también puedes recuperar el contexto actual del editor desde otros componentes usando el useslate hook de esa manera, otros componentes pueden ejecutar comandos, consultar el estado del editor o cualquier otra cosa un caso de uso común para esto es renderizar una barra de herramientas con botones de formato que se resaltan según la selección actual const myeditor = () => { const editor = usememo(() => withreact(createeditor()), \[]) return ( \<slate editor={editor}> \<toolbar /> \<editable /> \</slate> ) } const toolbar = () => { const editor = useslate() return ( \<div> \<button active={isboldactive(editor)}>b\</button> \<button active={isitalicactive(editor)}>i\</button> \</div> ) } porque el \<toolbar> usa el useslate hook para recuperar el contexto, se volverá a renderizar cada vez que el editor cambie, de modo que el estado activo de los botones se mantenga sincronizado